Going dark (mode)

While working on tooling to analyze Web App Manifest usage in relation to some new feature proposals, it became clear we needed a test Manifest that included the proposed syntax for dark/light mode support. I decided to make my site the guinea pig and spent an hour or so tweaking things to make it happen. Here’s a run-down of what I did:

CSS tweaks

The first step was to add in the prefers-color-scheme Media Query. If you’re unfamiliar, it looks a little something like this:

/* Your regular rules go here */

@media (prefers-color-scheme: dark) {
  /* Overrides for the "dark" theme go here */
}

@media (prefers-color-scheme: light) {
  /* Overrides for the "light" theme go here */
}

I only wanted to add a "dark" theme as my default is pretty much a "light" theme anyway. For the most part, this was pretty straightforward… just swapping color values, being sure to use the specific properties I wanted to change (e.g., background-color, border-color) rather than the shorthand. The only tricky/convoluted bit was updating my fancy link underlines (which don’t use text-decoration).

Tweaking SVGs

You may not have realized it, but SVGs also support the prefers-color-scheme Media Query. Most of my SVGs were black & white already, so I had no color definitions in them. Adding an embedded stylesheet to swap out colors did the trick though:

svg { background-color: white; }
path { fill: black; }
@media (prefers-color-scheme: dark) {
  svg { background-color: #454545; }
  path { fill: #fffcf4; }
}

While most of these SVGs are in my HTML, some are referenced in my Web App Manifest. At the time I’m writing this, no browsers support SVG icons in the Manifest, but it’s something we (the Edge team) are working on adding for Chromium. And, when we land it, my hope is that we’ll include dark/light icon support by rastorizing the vector files in each of these contexts.

Tweaking the Manifest

Continuing in the realm of speculation, there’s a proposal to support user-prefered color schemes in the Manifest as well. That proposal calls for a user_preferences block, wherein certain keys can be redefined. Here’s what I did, based on our discussions:

"user_preferences": {
  "color_scheme_dark": {
    "background_color": "#5b5b5b",
    "icons": [
      {
        "src": "/i/icon.svg",
        "type": "image/svg+xml",
        "sizes": "512x512",
        "purpose": "any monochrome maskable"
      },
      {
        "src": "/i/icon-reverse.png",
        "type": "image/png",
        "sizes": "512x512",
        "purpose": "any monochrome maskable"
      },
      {
        "src": "/i/notification-icon-reverse.png",
        "type": "image/png",
        "sizes": "256x256",
        "purpose": "any monochrome maskable"
      }
    ]
  }
},

I’m not sure yet whether my color-adapting SVG icon would need to be included here so as not to be replaced by the PNG versions, so I went ahead and included it anyway.

And that’s pretty much it. With just a little bit of time, I got it all set up. If you happen to use the new theme and something looks wonky, please let me know.

This post originally appeared on my blog.