'Why doesn't Safari 15 on Desktop respect my theme-color setting?
My site ( https://knpw.rs ) has a tag in the <head> as such:
<meta name="theme-color" content="#F9F9F9"/>
On Safari Mobile (iOS) the theme-color is respected for the header:
But on Safari Desktop, the theme-color is not respected:
Compare to https://registry.terraform.io which has theme-color set to #5c4ee5:
Which is also respected on mobile:
Why isn't my theme-color respected on Safari 15 Desktop?
Solution 1:[1]
This could be because your theme-color value is resulting in a bad contrast for the current system preferred layout (too bright for the user’s choice of having all dark layout). I think it is mentioned in this video from Apple Developer, that Safari will ignore your custom value if it doesn’t meet a certain threshold: https://developer.apple.com/videos/play/wwdc2021/10029/
This article is also mentioning that behavior/limitation: https://css-tricks.com/meta-theme-color-and-trickery/
To resolve this, you need to add 2 theme-color values, one for each preferred color scheme dark/light, and stay within the thresholds. Example:
<meta name="theme-color" content="#f9f9f9" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#872e4e" media="(prefers-color-scheme: dark)">
Solution 2:[2]
Some colors are not displayed properly on macOS Safari 15, especially when you use dark appearance and the theme color is too light.
I built this small tool to preview if theme-color working properly.
?? Note: When using
separate tabmode, theme-color won't be applied to browser.
link: https://roger.pub/theme-color-preview/
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Oliver |
| Solution 2 |