Time to update your theme-color meta tag | Stuff & Nonsense

I have mixed feelings about the inclusion of Safari's new editable browser chrome, but love it or hate it, more and more iOS and OSX users will end up seeing it. Andy hasn't touched on any of the controversies around the tag, but their article does a solid job of outlining what's changed, why, and how to make the most of it.

For example, I hadn't realised that theme-color was already used by PWAs installed from Chrome; nor did I know that Safari had enabled media queries on the tag, meaning that you can do things like this (code is Andy's example):

<!-- Dark mode theme: blue -->
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0e4359">

<!-- Light mode theme or no preference: red -->
<meta name="theme-color" content="#a62339">

Also, good to have confirmed that this will be a user preference:

Safari users can turn off coloured toolbars with “Preferences > Advanced > Never Use Background color in toolbar” but I suspect most people will leave the default turned on.

Explore Other Notes

⬅ Newer

Deceptive dark patterns

"Dark pattern" is one of those phrases that could be problematic,  or could just be evocative (there are some obvious race-related issues with equating dark/darker with bad/worse, but …

Older ➡

Fully repairable laptops

A fully repairable laptop design, as thin as a standard ultrabook and with high-end Intel parts, up to 64GB RAM, and up to 1TB of hard drive space. I/O is hot-swappable, so you can configure the …

  • <!DOCTYPE html> <html> <head> <title></title> </head> <body> <p>I have mixed feelings about the inclusion of Safari's new editable browser chrome, but love it or hate it, more and more iOS and OSX users will end up seeing it. Andy hasn't touched on any of the …</p> </body> </html>
  • Murray Adcock.
Journal permalink