The Media Feature

I recently learned about the prefers-color-choice media feature and its relation with display settings in devices like your mobile phone. I liked the idea of how the media feature worked: catering to a preference set by visitors in their own devices. So I set out to set up a dark mode option here using the media feature.

After reading a couple of blog posts on the topic, I also learned that CSS custom properties and the filter property could be useful, and indeed they were. All good stuff.

Though I do not keep up with every whiz-bang web trend anymore, and a relief it is, the real reason I am late to the dark party is because my old operating system does not support it.

High Sierra, Boo!

I use a late 2011 Macbook Pro, which has never been opened (probably full of dust) and the black paint on the E and S keys is wore off. Aside from it taking a minimum of two hours for Safari security updates to finish, the laptop still works great. Yet Apple has decided my laptop cannot run anything newer than High Sierra (10.13.6), at least four versions old as I write this. I was recently informed that dark mode support came with 10.14. All this time I had no idea about the media feature and its popularity, nor could I see when a website or web application was offering a dark theme. I only got inquisitive when hype about ‘dark mode’ hit critical mass, when even regular news agencies were blogging about it. That is showing up late. So I looked into it, and here we are.

But before arriving completely, there was an obstacle to overcome; that was, to develop what I could not see.

Add-ons for the Win

Because High Sierra lacked support for the media feature, default browser functionality was no help. Upon realizing this and griping about it to my confrères in the Textpattern community, they clued me in to the Firefox add-on, Dark Website Enforcer (also called Dark Mode Switcher on GitHub). Enforce and switch did not convey what I was looking for, but the add-on delivered exactly what I needed; a way to make the browser display use of the prefers-color-choice media feature. It made it possible to use Firefox as a local dark mode development tool in old operating systems like mine.

Then it was just reading up and refactoring, and now dark mode is delivered upon thee. If you have opted for the dark world in your device settings, there is a good chance you are looking at my dark theme now.

The add-on has some limitations, or at least it did when I used it. It does not recognize some methods for handling images in relation to the colour choice feature. For example, using prefers-color-choice inside of the HTML picture element, or even when calling an alternate image from CSS under the prefers-color-choice: dark query. The methods work, and are visible in compliant operating systems, but you won’t see the result if the OS is too old, even with help of the add-on. In that case, it is hard to know if you are doing it right in local development. You have to be fearless and push the blind changes live, then verify them in a mobile device.

The add-on’s shortcomings did not impact me, however. I use one image only for presentation—the ladder on my homepage—and served it up via CSS, not HTML. But I was using two files for it, for layout reasons I don’t fully remember. After working through the dark mode changes, I realized one image was enough, as a background to a peudo element. On that I could apply colour inversion and opacity via the filter property, ::before { filter: invert() opacity(); }, and change the value of those filters via the dark/light media features. That side optimization alone was worth the effort to get dark mode set up.

CSS Reorganization

As for organization of the CSS file, I refactored it to take advantage of custom properties. Some people leave their rules where they are, apparently, but it made sense to me to extract all colour rules out from where they were tucked and group them together under the :root {} block that now defines the colours for everything. I moved that complex of rules to the bottom of the mobile-first rules, immediately above the first media query, which is now the prefers-color-choice: dark query. Following is an abbreviated and less-abstract look at that part of the CSS file:

/* --=== LIGHT MODE COLOURS ===--
    (custom properties)
-------------------------------------*/
:root {
  --document: #222;
  --document-bg: #f5f5f1;
  --footer: #333;

  --side-message: #444;
  --general-bg: #e0e0e0;
  --general-border: #929292;

  /*et cetera*/
}

/* ALL THE COLOURED THINGS */

html {background-color: var(--document-bg);}
body {color: var(--document);}
.pied {color: var(--footer);}

/*et cetera*/

/*===============================
         MEDIA QUERIES
=================================*/

/* --=== DARK MODE COLOURS ===-- 
(repeat of :root block w/ dark colours)
-------------------------------------*/
@media (prefers-color-scheme: dark) {
  :root {
    --document: #f9f0d0;
    --document-bg: #000;
    --footer: #9f998a;

    /*et cetera*/

    }
}

That makes it appear nice and compact, but there are still many lines where those three /*et cetera*/ markers are. Nevertheless, colour management will be easier going forward, and with a lot less scrolling to find individual colour rules. Further, because my site is simple and my CSS file is lightweight (could be a bit more), there is no need to break rules into light.css and dark.css files. One file rules it all.

Colour Mode Usability

Since the dark mode craze started, many articles, like this one and this, have surfaced to point out that human eyes and brains deal better with light themes. Neither will dark themes improve screen energy efficiency, unless you have a powerful OLED display, apparently.

On the other hand, studies also observe that light text on dark backgrounds (dark modes) can be beneficial to suppress myopia in children, which is, albeit, a specific situation most websites and business applications are not concerned with. For the rest of us, there is no definitive health or ecological advantage to using a dark theme.

Some experts argue there is no productivity advantage, either, and that might be true when grinding in a spreadsheet, or doing developmental editing on a long-form piece. But we do different tasks when it comes to matters of productivity, and there are a lot more design variables to consider than colour alone, so I would not be too quick to make determinations and claims on that one. Who knows what designers will yet achieve.

Speaking as someone creeping up on old age, and needing eyewear to read and right, I find it pleasant to switch to dark mode at sundown, after having been using light mode all day. The same is true if I’m up early before light mode kicks in. And even though dark mode does not impact or improve my eyes or battery, I find the glare of a light/white screen is considerably greater compared to a dark/black screen when ambient light is low.

Steven Hoober backs that up in his UX Matters analysis of dark designs, saying a typical dark-mode page is five to six times less bright than exactly the same content in light mode. Or to put it another way, I can effectively use a light design website as a flashlight to go up the stairs in the dark—and that does save my battery compared to the actual Flashlight setting—but I cannot with a dark design. I have tested it.

But those scenarios for using dark mode (and light mode too, for that matter) are only true if the website or application in question is also respecting other important text and layout considerations that influence usability. If your design ethic still clings to 11-pixel font-size, for example, I will not be sticking around, regardless.

Sepia Mode

This from the CSS WG about the prefers-color-scheme feature is curious:

The values for this feature might be expanded in the future (to express a more active preference for light color schemes, or preferences for other types of color schemes like ‘sepia’). As such, the most future-friendly way to use this media feature is by negation such as '(prefers-color-scheme: dark)' and '(not (prefers-color-scheme: dark))', which ensures that new values fall into at least one of the styling blocks.

A possible sepia option sounds fun to me.