Login/Register
Why doesn't Safari 15 on Desktop respect my theme-color setting?
Asked Answered
Solved htmlsafarimobile-safari
P

2

7

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?

Prostitute answered 8/10, 2021 at 13:39 Comment(0)
M
7

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)">
Muscadel answered 16/10, 2021 at 11:8 Comment(3)
That appears to be the case, some colors are working and others are not. I understand why Safari is doing this, it's just a shame Safari doesn't have some sort of warning in the console about this and seemingly no tooling to help determine colors that won't get clobbered. – Prostitute
Agreed, it‘s very tedious to debug invalid color values. – Muscadel
Spent a long time experimenting: In Safari 16 for desktop the theme-color is not applied unless safari layout is set to "compact" in the preferences. In iPadOS, the "compact tab bar" must be selected under Settings > Safari. In iOS, you need to enable the "Allow Website Tinting" setting under Settings > Safari. – Temptress
L
9

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 tab mode, theme-color won't be applied to browser.

link: https://roger.zone/theme-color-preview/

Safari 15 Theme Color Preview

Landpoor answered 5/12, 2021 at 15:35 Comment(10)
This is a cool idea but not working as of March 2022 – Uziel
Can confirm it doesn't work in macOS Safari 15.2. But it works in iOS Safari. – Chemotropism
@Uziel Hi, which version of browser, on macOS 12.3/12.0.1 and Safari 15.4/15.1, it working properly. – Landpoor
I checked my phone and it does work in IOS. I'm running Safari 15.4 and Monterey 12.3. From what I can see, theme-colour isn't working on any desktop sites for me at the moment, including the site I'm currently working on. – Uziel
@Uziel I'm using same version like you. My friends using old version still working normal. Is it possible that some system preferences override theme-color feature? – Landpoor
I played around with a bunch of settings and it turns out having tab layout set to "separate" was the reason – Uziel
@Uziel Thank you for testing, it made me confused many days 🙏 – Landpoor
@Roger Awesome!!! P.s.: works (again?) in macOS Monterey 12.4 Beta (21F5048e) and Safari 15.5 (17613.2.4.1.2) – Muscadel
Allow Website Tinting must be enabled in iOS Safari settings. Otherwise it only work in PWA mode. – Sealed
Make sure to set Safari in Settings/Tabs/'Tab Layout' to Compact! Still working for me... – Supernal
M
7

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)">
Muscadel answered 16/10, 2021 at 11:8 Comment(3)
That appears to be the case, some colors are working and others are not. I understand why Safari is doing this, it's just a shame Safari doesn't have some sort of warning in the console about this and seemingly no tooling to help determine colors that won't get clobbered. – Prostitute
Agreed, it‘s very tedious to debug invalid color values. – Muscadel
Spent a long time experimenting: In Safari 16 for desktop the theme-color is not applied unless safari layout is set to "compact" in the preferences. In iPadOS, the "compact tab bar" must be selected under Settings > Safari. In iOS, you need to enable the "Allow Website Tinting" setting under Settings > Safari. – Temptress

© 2022 - 2024 — McMap. All rights reserved.