Dark Mode for All the Things
The Advent of Native Dark Mode Support
This method used to be the most elegant way to offer users a dark theme since you couldn’t store your preference anywhere globally. The preference needed to be saved on a per-site basis, and while setting a cookie for this has no real privacy implications, EU law disagrees with that1 and makes the solution in the very least cumbersome to deal with.
macOS added support for
prefers-color-scheme, because now there was a reason to. You could set your preference for a dark theme across the operating system and when switching, all apps with support as well as Safari and all currently loaded websites would switch accordingly.
The code for this is deceptively simple:
Things to Consider
It’s important to check your light and dark themes thoroughly. I personally use a light theme when I’m in well-lit rooms during the day and a dark theme later in the day when my surroundings are darker.
If you find images on your site to be too bright in dark mode, you can swap them out in your dark theme. If your background color is neutral (all RGB channels with the same value), you can also try reducing the
opacity of the respective
img elements a bit. With a neutral background color, you’ll avoid changing the overall chroma of the images.
Dark Mode Support in Browsers and Devices
macOS, iOS, and iPadOS all support Dark Mode system-wide and Safari supports CSS @media query
macOS added Dark Mode support with macOS Mojave (10.14) in 2018. iOS added Dark Mode support with iOS 13.0 in 2019. iPadOS supports it just the same since the name change with iPadOS 13.1.
Microsoft Windows and Edge
Microsoft Edge supports Dark Mode. If you set your Windows to Dark Mode, Microsoft Edge will by default use that preference to also interpet
In addition to that, users can enable Dark Mode only for Edge directly in the browser.
Android and Google Chrome
Android supports a system-wide Dark Theme since Android 10 in 2019 and Google’s mobile Chrome browser will adhere to that preference.
Google Chrome on desktop platforms will adhere to system-wide settings of macOS and Windows to also offer Dark Mode @media query support according to user preference.
The GDPR mandates that cookies may only be stored on a user’s computer after specific consent is given, except for strictly mandatory cookies. While most law experts agree on e.g. cookies for load balancer operation or shopping carts being required, thus requiring no prior consent, the discussion is a bit more difficult on topics like setting a theme preference. Since any data stored to differentiate a user’s preference could potentially be labelled “personally identifiable information”, we’re in for a wild ride. The biggest drawback of these privacy laws is big corporations continuing with what they’re doing, gaining a competetive advantage over those who can’t simply weather lawsuits coming their way. ↩︎
Feel free to reach out via email for comments or discussion on this article.