Why doesn't Safari 15 on Desktop respect my theme-color setting?

Question

My site ( https://knpw.rs ) has a tag in the as such:

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?

user_5750030 · Answer

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:

user_6071965 · Answer

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.