In this Envato Tuts+ quick tip we’ll take a look at an experimental CSS feature which detects whether a user has “dark mode” enabled on their Mac. It’s done via a media query, and will allow you to style a website “dark” or “light” accordingly. Let’s take a look!
How to Implement “Dark Mode” via CSS
What is “Dark Mode”?
Last year MacOS Mojave introduced a way to toggle between “dark” and “light” appearance (dark mode can be much easier on the eyes, particularly in low light conditions). This toggling affects the UI, changing the visual appearance of elements such as menu bars, panels, buttons and so on.
Beyond the MacOS UI, this setting is also open to other applications, so apps which take advantage of it will also toggle between dark and light versions depending on the user’s preference.
“Dark Mode” in CSS
Using the prefers-color-scheme media query we can leverage this dark mode setting within our websites too. The syntax looks something like this:
@media (prefers-color-scheme: dark) {
body {
/* dark styles here */
}
}We can use dark or light as values within the media query. In the example above we’re stating that if a user has dark mode enabled, we’ll apply some different styles. Try the demo below by toggling your dark/light appearance:
Caveats
Be warned: this is all highly experimental. As of the time of writing this feature only works in one browser: Safari Technology Preview. However, it’s being discussed in working groups, and we’re already seeing glimpses of it in the Webkit source code.
Conclusion
That’s it for this quick tip! What are your thoughts on it? Should this be something we implement in our websites? Would you use it? Are media queries being pushed beyond what they should be used for? Let us know!
