Six Levels of Dark Mode

The six levels Barebone Basic Benign Bold Bisectional Ballistic Beyond Beguiling

Being reminded of the visually hidden debate hasn’t been the only thing that happened to me on this year’s CSS Naked Day.

I’ve observed that on pretty much all the sites I’ve visited, dark mode was rather absent after the styles had been removed. This got me thinking, maybe it’s time to talk about the six levels of dark mode.

A less catchy—but more accurate—title for this blog post would have been “six levels of color scheme switching”. Oh well. Most of the example code in this article shows the dark side, so the title does make sense. Just keep in mind that the other way around also works.

Enough said, let’s get to it.

Level 1:

Barebone

This level is as easy as it gets, but apparently the underlying directive was missing on the sites mentioned in the introduction. You can opt into light/dark mode differentiation even without a single line of CSS, which is great in general, but especially on April 9.

Simply add the following meta tag to the document head, and you are good to go.

... continue reading