Safari 26 doesn't use theme-color anymore

[Schweinepriester]

Fixes #7364 and see there for findings.

Technically I haven't tested Safari on macOS, but iPadOS makes the claimed iOS and macOS plausible imho.

@jensimmons do you know more by any chance? :)

[Fyrd]

Hmm, did a bit of research of support on Safari/MacOS and trying different versions on BrowserStack I'm not seeing it supported at all for some reason? It should have been in Safari 15 but their only available 15.x version is 15.6 on Monterey and I'm not seeing it there or subsequent versions:

Is/was there some additional condition for it to work @jensimmons ?

[jensimmons]

Hmm, did a bit of research of support on Safari/MacOS and trying different versions on BrowserStack I'm not seeing it supported at all for some reason? It should have been in Safari 15 but their only available 15.x version is 15.6 on Monterey and I'm not seeing it there or subsequent versions

I don't entirely remember the details off the top of my head, but it looks like from that screenshot you are not in "Compat mode". Go into Safari settings and switch the look of the UI (Safari 15.0–18.6). How about now?

[jensimmons]

I recommend testing web apps separate from pages in Safari.

And I'm wondering about technology like this, where the API is supported, but it doesn't have an effect in certain situations — because that's how something in the operating system works, outside of the web page.

It is true that we are not using theme-color in the way we have been in recent years. We discovered that many developers have a theme color configured, but did not know they did. They did not intentionally choose a color. They just ended up with one — presumably created by some kind of build tool. For example, there was a site that's a well-known resource for developers. They had a bright orange color set, and it didn't look very good. I reached out to learn more about why they'd choose such a color. They had no idea they had an orange theme color set. No idea at all. It was not intentional. They didn't know how it had ended up in their code. It's likely a build tool grabbed the hexadecimal number from their icon, and inserted it into the HTML head.

Rather than rely on that sort of situation improving (educating developers / tracking down the build tools & trying to get them to change their behavior / asking sites to look and see if they had an accidental theme color & update), we are now using other techniques to get to a place where each site looks great in the browser.

But does that mean "Safari does not support theme-color anymore"? I'm not sure... It is still supported. The browser engine still knows this API. The theme-color meta tag just doesn't have the impact that did previously.

[Schweinepriester]

thank you for looking into it! :)

so where do we go from here?
partial for something like "safari handles theme-color on a technical level, but currently has no impact on the UI" or alike?

[Fyrd]

Thanks for that insight @jensimmons , very helpful!

I've been thinking about this one for a while and I've been struggling with coming up with the best solution. Here's my thought process:

On the one hand it seems to make sense that if the browser does something with the color it's supported, otherwise it's not. I think that's what most developers checking for support would expect. No one cares about a browser's ability to read a meta tag if it doesn't do anything with it.

On the other hand I totally understand if a browser isn't interested in utilizing this value, for some design choice it makes sense, for others it doesn't.

For most features you'd always want them to be supported across browsers but that doesn't necessarily apply here, right? So browsers/versions should be allowed to not have support. I guess there is some precedent for that, not all mobile/desktop features make sense on both platforms for example.

So I'm leaning towards only considering support (or partial) as has been done so far, maybe with an updated description/note to indicate that it's up to the browser whether or not or how to support it. I think that matches the spec as well.

Thoughts?

[Schweinepriester]

by chance I came across MDNs https://caniuse.com/mdn-api_htmlinputelement_webkitdirectory, note 1 & 2

1 The property can be set, but has no effect (see bug 271705).

2 The property reflects the attribute, but users cannot choose a directory, only individual files (see bug 40248532.

both resulting in partial - so I think we should we do that, I mean note 1 is basically what we have here now.

if you agree, I'll update the PR :)

[Fyrd]

Yeah, that sounds reasonable!

[Schweinepriester]

updated, ready to go!

[Fyrd]

@Schweinepriester Okay so I don't think I read your comment closely enough before I responded 😅 My bad. Coming back to my earlier comment:

No one cares about a browser's ability to read a meta tag if it doesn't do anything with it.

There's some places where you'd want the browser to at least recognize the new feature without breaking anything and be okay with it not doing anything so you can use it in a progressive enhancement kind of way, but there's other places where it's a given that it's not going to cause any harm if not supported and I think the theme-color meta tag is an example of that.

So I just don't see any value to developers in pointing out the difference between a browser that recognizes the tag but ignores vs one that does not recognize it. So ultimately I feel both should be considered "not supported".

Incidentally during my testing I found Chrome for Android does not use theme-color in the browser in dark mode (just uses a black title bar) and only seems to use it for light mode in...some cases? So I think it needs to be downgraded to partial support and the "before Chrome 92" note should be removed. Probably worth further investigation...

[Schweinepriester]

@Fyrd both adjusted o7

[Fyrd]

Much appreciated!

[mister-ben]

I'm curious about the note for iOS Safari added here, "Supported, but does not actually use the color anywhere". I see this comment:

But does that mean "Safari does not support theme-color anymore"? I'm not sure... It is still supported. The browser engine still knows this API. The theme-color meta tag just doesn't have the impact that did previously.

Does this "support" mean anything more than that the value from the meta tag can be accessed, i.e. document.querySelector('meta[name="theme-color"]')?.content is possible? If that is all it is, then this note would also apply to Mac Safari, and even Internet Explorer.

[Schweinepriester]

more info became available:

• https://mastodon.social/@grooovinger/116148263894460665
• https://grooovinger.com/notes/2026-02-27-safari-26-header-background