Automatic Dark Mode for your website
How to detect the user’s theme in MacOS Mojave and use it to change the look of your website
Dark mode is in right now. It’s easier on your eyes in low light environments and it’s a refreshing change from the light metallic greys we’ve seen over the years. A distinguishing visual feature of MacOS Mojave is Dark Mode and app developers can take some steps to update their apps to take full advantage of this new feature, but what can we do as web developers to tap into this?
Some new media queries have the answer, you can check out the spec for prefers-color-scheme. The spec defines light, dark and no-preference options. The Safari team is on the case, so let’s test it out.
What can we create?
I put together a quick demo of what we can achieve with some basic styling rules and prefers-color-scheme.
How do I get started?
So how can we achieve this effect? Getting started is as easy as adding a media query to your CSS like so.
