The universal theme selector, forgotten to the ages

It has become very common for websites to provide users with at least two colour schemes: the light theme and the dark theme. There are plenty of solutions to do this, and a lot of websites seem to implement some kind of JavaScript doo-hickey to change it on the fly. These methods – at least as far as I can tell – either use a cookie or web storage to store the user's preference, which then gets set accordingly upon page load.

One way I've seen this be done is to set a class such as theme-dark on a root element of your app based on the fetched preference. The root often being body, or one of those root divs frameworks such as React like to insert. Then for every block of CSS you have that has to do with colouring, you have the equivalent version of it with the .theme-dark selector and the precedence rules kick in.

The other one is that styling is left entirely to the JS framework, in which case god knows what ends up happening.

However there's also another fairly recent solution that's part of CSS instead

Media features

In recent years it has become increasingly common to use the built-in @media-queries to control CSS. This lets users select their preferred scheme exactly once, and then (hopefully) have all websites conform to this preference. This is achieved through the prefers-color-scheme media feature, which currently supports light and dark as its settings.

Another query one can use is the prefers-contrast feature, which lets users define either more or less as the contrast value. As of writing this article, this is considered experimental however.

There are some caveats though. Most users probably don't know this option even exists. In Firefox as far as I could tell the only way to force the browser set the theme preference to dark was through the about:config page, which is pretty much for power users only. However, I think what browsers do nowadays is propagate your OS colour scheme preference. In addition, it doesn't seem you can set this preference on a page-by-page preference without some kind of extension.

Blast from the past: alternative style sheets

Long before either one of these media features existed however, there was another option user agents had in their arsenal, that has been largely forgotten/abandoned. Pages can provide a list of alternative style sheets, among which the user can select one. If you are reading this on Firefox, you can test the feature out for yourself *right now* by navigating to the view > page style menu. (alt → v → y) though I must warn you, it is crazy!

Pretty neat, huh? Why were these abandoned, then? I have no idea, but Chrome dropped support for them in early 2009 with the release of Chrome 49, so it's probably the same story as with mathml.

Ramblings

I think this feature is extremely cool and should honestly be brought back, but in a more powerful revamped fashion. Browsers should at the very least store which stylesheet you've previously selected, and load that one by default, similar to how different websites their own solutions. This would be a completely standard and universal way for websites to offer colour schemes.

No longer would you have to hunt down the settings page where you can change the theme. The feature could also be combined with the existing media queries so users are provided the default theme they want, but can change it on a page-by-page basis. User agents should also make it clear which pages do and don't support custom theming, and have the options be visible, and I think the best way to do it would be similarly to the widely available reader mode – as a page action.