Yesterday I've spent more time than I really wanted to implement a trivial fix on a Firefox extension: implementing a "dark theme" in CSS.

Turns out it is quite simple and as usual the documentation on MDN is topnotch.

On a basic level, this is all it's needed:

body {
    /* This will apply if no preference is set */
    background-color: red;
}

.myclass {
    /* This will apply if no preference is set */
    color: yellow;
}

/* This will apply if the operating system is set to DARK theme */
@media (prefers-color-scheme: dark) {
    body { background-color: black; }
    .myclass { color: white; }
}

/* This will apply if the operating system is set to LIGHT theme */
@media (prefers-color-scheme: light) {
    body { background-color: white; }
    .myclass { color: black; }
}

The problem that took me some time was figuring out how to simulate a dark theme so Firefox could "pick up" this info.

Again, Stack Overflow to the rescue suggesting this obscure config item to be set in about:config: ui.systemUsesDarkTheme: <int>. Switching from 0 to 1 would let me see how the CSS is applied.

Apparently Chrome is (as of today) a bit more friendly than that, having a tick somewhere in the web developer tools.

By the way, I hate all this stuff.