Meta Element: theme-color

In the changelog I’m documenting modifications to this site that might be of interest, but are not necessarily my own ideas or work. This time it’s about a new tag that's supported in Safari.

With the latest developer preview of Safari there's support for the meta element with the name theme-color. While there was some support mostly on Android phones, it is now also possible to modify the color of the tab bar of Apples browser on macOS. The support for media queries seems to be new. So first I've added these two lines way up in the head-Element of my template to set the color to match the background color of my website.

<meta
    name="theme-color"
    media="(prefers-color-scheme: light)"
    content="hsl(0, 0%, 95%)"
/>

<meta
    name="theme-color"
    media="(prefers-color-scheme: dark)"
    content="hsl(216, 25%, 12%)"
/>

Unfortunately, CSS custom properties are seemingly not (yet?) supported so the color is just changing when the color mode of the operating system is changing. It was fun to see this work, but I wasn't too happy since it would not always match the chosen color theme on my site.

But since the neccessary code is already in place, it's just a small change in two parts of the site. The correct color on the meta element needs to be set when a page is loading and when someone switches the color mode. Now I can change the color with my own JavaScript based switcher almost that easy. Here's the commit with these changes.

Im pretty happy with that solution for the moment, although I'm a bit concerned that I might forget to change the color in these two additional places when I'm fiddling around in the stylesheets next time. Maybe this is the right point to think about design tokens. I like this small detail and I'm curious if other browser vendors will provide something similar in the future. People have for example also used it to make notifications more obvious.

A lot of the new features of Safari in the upcoming release of macOS are shown in this video on apple.com.