Created
September 22, 2019 14:03
-
-
Save jthomaschewski/2f7d4f397b7cce307d77ffa97e84ad0c to your computer and use it in GitHub Desktop.
Detect Browser Dark Mode in JS & CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// check if browser/os is set to dark mode | |
function prefersDark() { | |
return window.matchMedia('(prefers-color-scheme: dark)').matches | |
} | |
// listen for dark mode change in browser/os: | |
const queryDark = window.matchMedia('(prefers-color-scheme: dark)') | |
queryDark.addListener(mediaQuery => { | |
const prefersDark = mediaQuery.matches | |
if (prefersDark) { | |
... switch theme or whatever | |
} | |
}) | |
// css media query: | |
// @media (prefers-color-scheme: dark) { | |
// ... styles for dark | |
// } | |
// Compatibility: https://caniuse.com/#feat=prefers-color-scheme |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment