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 this 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.