为什么桌面版 Safari 15 不遵守我的 theme-color 设置？

Question

我的站点 ( https://knpw.rs ) 在 <head> 中有一个标签：

<meta name="theme-color" content="#F9F9F9"/>

在 Safari Mobile (iOS) 上，theme-color 受到 header 的尊重：

但在 Safari 桌面上，theme-color 不受尊重：

与 https://registry.terraform.io 比较 theme-color 设置为 #5c4ee5:

在移动设备上也受到尊重：

为什么我的 theme-color 在 Safari 15 桌面版上不受尊重？

Answer 1

这可能是因为您的 theme-color 值导致当前系统首选布局的对比度不佳（对于用户选择的全黑布局来说太亮了）。我认为 Apple Developer 的这段视频中提到，如果 Safari 不满足特定阈值，Safari 将忽略您的自定义值： https://developer.apple.com/videos/play/wwdc2021/10029/

本文还提到 behavior/limitation：https://css-tricks.com/meta-theme-color-and-trickery/

要解决此问题，您需要添加 2 个主题颜色值，每个对应一个首选配色方案 dark/light，并保持在阈值范围内。示例：

<meta name="theme-color" content="#f9f9f9" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#872e4e" media="(prefers-color-scheme: dark)">

Answer 2

某些颜色在 macOS Safari 15 上显示不正确，尤其是当您使用深色外观且主题颜色太浅时。

如果 theme-color 正常工作，我构建了这个小工具来预览。

⚠️ Note: When using separate tab mode, theme-color won't be applied to browser.

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

为什么桌面版 Safari 15 不遵守我的 theme-color 设置？

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

html

safari

mobile-safari