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