This is a really clean and succinct guide to supporting dark mode! Great use of visuals too.
I have dark mode enabled on my iPhone SE, but only see the dark colour scheme for this website in Safari, not Firefox (v19.1, the latest version, afaict).
Yeah, I have dark mode enabled in Windows, and I’m running Firefox developer edition (70.0b13), and I don’t see dark mode on this website. I have no idea which of the three are to blame.
The primary issue I have with using the prefers-color-scheme media query is it doesn’t allow me to specify which theme I’d like per site. If you’re considering implementing this, I’d suggest adding a setting to your site with three options: light, dark, and system. That way, users on systems that don’t have OS-level theme support can still benefit from a dark/light mode, and users have the ability to override the system default should they choose to do so.
Strong disagree. This feature is actually well-designed in that the configuration is correctly external to the website. If the user says they prefer dark, then they prefer dark. Leave it to browser extensions - which already exist - to allow overriding this setting on a per-website basis.
That’s like saying because a user allowed notifications on one site, they must want notifications on every site.
No, it’s like saying sites should not make it configurable whether they notify you; instead they should rely on the browser’s permissions system.
It may be fine to have an override if “system” is a default. The problem with any other solution to user selection is that if you switch your system then any page you visit will be jarring. It’s like having flash photography right in your face while browsing and it is a serious problem. An analogy to this might be the way TV commercials used to be super loud. Sure, you could use the volume controls to make it work for you, but for that short period you have to deal with something unpleasant.
One way to improve it might be to allow the browser to support an override for a site rather than the site program it. In that case, this CSS media query is still the right way to go.
According to caniuse.com, it’s supported by ~ 32% of users globally. If you switch to Usage relative you’ll see it’s mainly due to the fact Chrome for Android doesn’t support it. I’m not sure if this data is accurate though.
Noticed dark mode working just recently with Android 10 + Firefox Preview Nightly + DuckDuckGo.