Dark Mode in CSS Guide
css-tricks.com
css-tricks.com
What if the user toggles their preference on a system level? Should this then override the locally stored value? Should it be cleared? Or is the stored preference persisted over the system preference at all times, leaving the user unable to reset the value to restore the behavior of following system preferences first.
Additionally, you will now have to add JavaScript in a critical page load path to add classes to avoid a flash of the wrong color. As well as critical CSS to ensure the most basic colors are applied early on while the rest of your stylesheet loads in.
My take on this is, don't even try to add a dark mode toggle to the site itself, always rely on CSS and never JS. This is the responsibility of the browser, you can even customize the appearance in your browser settings separately of the operating system. It will load user agent styles with dark mode if the 'color-scheme' meta is set correctly, so you don't have to even do the critical styles to avoid flashes.
I would really like to see Firefox, Chrome, etc. add a dark mode toggle in the navigation bar that could simply be used to toggle the 'prefers-color-scheme' value on sites that have the 'color-scheme' meta set up correctly, so we don't have to constantly implement this feature over and over again on every site (usually done wrong).
> But what if users want to override their system preference for a site? Just because a user prefers dark mode for their OS doesn’t always mean they prefer it on a website. That’s why providing a way to manually override dark mode, despite the system settings, is a good idea.
And I agree. You want to follow the OS, but be able to override per-site.
I like dark mode at night but it strains my eyes to read longform text in it. So I want news sites and Wikipedia only to stay in light mode, and I turn my brightness way down while I'm reading them.
① “Decrease the brightness and contrast of images a bit so that it looks comfortable to the eyes when it’s against a dark background.”
② “If we simply invert a dark shadow using light colors, then we get this funky thing […] Close elements should still be lighter and distant elements should still be darker – even in a dark UI.”
Oh yes, shadows are tricky. I got ① right for the dark theme of https://FreeSolitaire.win, but I never thought of ②. Good to know!
Please don't do this. It just makes dark mode into an inferior version with limited contrast/color depth instead of a real alternative.
An alternative would be something like hover/click/tap to show the full-brightness image, but that’s something of a discoverability issue unless there’s clear direction given to the user, which doesn’t fit a lot of use cases cleanly imo.
A better alternative would be something configured in the browser that passes the user’s preference to the page, and an API similar to color scheme that controls image brightness in different theme modes. This is probably the best for users and developers, and least likely to be a “thing”.
> There several approaches to go about doing this:
> Using a Body Class
> Using Separate Stylesheets
> Using Custom Properties
> Using Server-Side Scripts
I wish browsers would just expose a more visible prefers-color-scheme toggle. Adding this to every website separately makes no sense. It would also make it more likely that websites respect my configured preference.
Not related to websites, but I would also like to take this upportunity to remind everyone that dark/like toggles might be a win over a single fixed color scheme but are still a massive downgrade over the fully customizable color schmes that desktop operating systems used to support.