How to use CSS media queries for dark mode!
Dark mode is all the rage. Safari Technology Preview added support for Media Queries. Chrome has already announced it will soon support Dark mode. The requirements are (as of writing this):
- Safari Technology Preview 68 or higher
- macOS Mojave 10.14
I'm personally not a fan of using dark mode and I'm no more correct than the person who prefers it. The point is that preference matters. Some users find it either more pleasing or perhaps reduces eye strain. The best part though is its a fun and easy hack:
Notably you can also detect light mode:
It's that easy. If you have a simple site, it's quick to retrofit. More complex sites (especially with image backgrounds or poorly written CSS) probably will require a lot more work. It took me about 10 minutes total to make a beta of dark mode. More info at developer.mozilla.org. One of the more promising features is eventually we will have media-queries for
prefers-contrast which is a big win for both designers and accessibility. Apple OSes already have a bulk of these features (macOS has invert, reduce motion, dark mode and low contrast, whereas iOS has increase contrast, reduce motion and invert) You can see them all at drafts.csswg.org. Allowing web apps and sites to sport these features probably will become a small but important design trend as users can exert greater control for experience over their OS and content they consume for the best visual experience based on preference and requirements.
If you visit this website now with dark mode enabled and the correct browser, you'll get to see dark mode in action! Now the real question: are we going to have a "dark mode first" movement? ;)