There are a number of ways to approach a dark mode for your website, but essentially you get all the styles ready for it and then apply them when the user has indicated they want them, whether by direct choice or a system-level preference. If your website doesn’t have a dark mode, well, then, it doesn’t have a dark mode.
Chrome is testing changing that, and forcing your website to have a dark mode if a user has indicated they prefer them at the system level. André Cipriani Bandarra:
With this feature, the browser applies an automatically generated dark theme to light themed sites, when the user has opted into dark themes in the operating system. Users can opt-out of dark themes by either disabling the option on the OS level or in a specific setting in Chrome.
A little scary, I think. But hey let’s give it a test to see. They’ve built in the ability to test this right into Chrome DevTools.
Just looking at my own site quick…
The homepage looks like crap, as it didn’t flip out the explicit white background color. Not sure why, as it does on article pages where it looks much better:
The WordPress admin famously has no dark mode, so here’s a look at that:
I have mixed feelings about it. On one hand, users should have control over what they want to see in their browsers on their computers. Nobody is claiming accessibility features like high contrast, invert colors, or reduced motion modes shouldn’t exist. They directly affect website rendering. This could be considered an accessibility feature. On the other hand, this can cause accessibility problems (case in point: the contrast issues visible right here in that first screenshot).
This is just an Origin Trial for now, so I imagine there is plenty of time before this ships and for problems to get ironed out. But the web is huge so I imagine the edge cases here are absolutely bonkers and this is going to be very hard to perfect. It’s not even clear if this is just a Chrome-on-Android thing or if it will spread wider than that. It’s also not clear that if it leaves your site alone if you have a hand-crafted dark mode, or if it still messes with the design. Me, I’d probably use their mechanism for opt-ing out until I could get the details right.
I agree with you, the auto dark theme is pretty problematic.
Initially I expected Chrome to do a primitive inversion of colours, but it seems more advanced (and therefore, much more unreliable). The inversion is pretty selective; for example if I have a lime green background it strangely doesn’t transform it into dark green (or some dark gray).
Anyway, speaking of auto dark mode, I find Aral Balkan’s workaround pretty interesting: CSS filters. https://ar.al/2021/08/24/implementing-dark-mode-in-a-handful-of-lines-of-css-with-css-filters/ Kinda lazy, but it does seem to yield better visual results :)
DarkReader (chrome extension) works incredibly well for this. It’s crazy annoying to not have this on Android — Chrome used to allow it and it was pretty crap (like above), but it was better than being blinded at night.
I think that, in a few years, a large percentage of users will have the setup I do now: dark mode after the sun sets, light mode after it rises.
As a user I prefer dark mode in most scenarios and I would not be mad if it’d be more prevalent. I just hope this won’t introduce a layer of randomness when each browser brings on its own individual and naturally imperfect heuristics. We have such a situation for dark mode in email clients already and it’s not beautiful, although really funny at times. But I am optimistic that such concerns are void since it looks like authors will have these standard compliant ways to ensure their intentions are being respected.
Oh my god thank you so much you have changed my life…found this through Google Discover…I’ve been using the Dark Reader extension for nearly a DECADE and it’s always been a bit too heavy…at last, it’s built into chrome (albeit, tucked away in devtools)!!! Thank you so much for sharing
Tried it. Seems a cool feature but the Chrome extension https://chrome.google.com/webstore/detail/eimadpbcbfnmbkopoojfekhnkhdbieeh is better.
Simple dark mode algorithm
That is bad for image, video or other media elements.