Skip to content

Instantly share code, notes, and snippets.

@the-glima

the-glima/dark-mode.css

Created May 29, 2020 02:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save the-glima/9e575e3a22813fdd3ab76aa33946a766 to your computer and use it in GitHub Desktop.
Save the-glima/9e575e3a22813fdd3ab76aa33946a766 to your computer and use it in GitHub Desktop.
Download ZIP
Easiest way to add Dark Mode #website
Raw
dark-mode.css
/*
You can use prefers-color-scheme media query to detect user's color theme.
The easiest and best way to add Dark Mode to your project.
*/
:root {
--color-text: black;
--color-background: white;
}
@media screen and (prefers-color-scheme: dark) {
:root {
--color-text: white;
--color-background: black;
}
}
/*
But keep in mind that Dark Mode is not just changing black to white
but handling the contrast. This was just an example.
You can also use "light".
*/
@media screen and (prefers-color-scheme: light) {
:root {
--color-text: black;
--color-background: white;
}
}
@the-glima
Copy link
Author

the-glima commented May 29, 2020 •
edited

To test and emulate on Chrome.
Go to Console > Three dots > Show Console Drawer (or just press ESC) > Three dots > Rendering

image

Check support, MDN link:
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment