Search code examples
htmlsafarimobile-safari

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:

enter image description here

But on Safari Desktop, the theme-color is not respected:

Safari Desktop knpw.rs

Compare to https://registry.terraform.io which has theme-color set to #5c4ee5:

Terraform Registry desktop

Which is also respected on mobile:

enter image description here

Why isn't my theme-color respected on Safari 15 Desktop?

Solution

  • 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)">