为啥桌面版 Safari 15 不尊重我的主题颜色设置？
Posted
技术标签:
【中文标题】为啥桌面版 Safari 15 不尊重我的主题颜色设置？【英文标题】：Why doesn't Safari 15 on Desktop respect my theme-color setting?为什么桌面版 Safari 15 不尊重我的主题颜色设置？ 【发布时间】：2021-11-28 11:14:53 【问题描述】：我的网站 (https://knpw.rs) 在 <head> 中有一个标签，如下所示：
<meta name="theme-color" content="#F9F9F9"/>
在 Safari Mobile (ios) 上，theme-color 被视为标头：
但在 Safari 桌面上，theme-color 不受尊重：
与将theme-color 设置为#5c4ee5 的https://registry.terraform.io 进行比较：
这在移动设备上也受到尊重：
为什么我的theme-color 在 Safari 15 Desktop 上不受尊重？
【问题讨论】：
【参考方案1】：这可能是因为您的主题颜色值导致当前系统首选布局的对比度不佳（对于用户选择全暗布局来说太亮了）。我认为 Apple Developer 的这段视频中提到，如果 Safari 不满足某个阈值，它将忽略您的自定义值： https://developer.apple.com/videos/play/wwdc2021/10029/
本文还提到了行为/限制：https://css-tricks.com/meta-theme-color-and-trickery/
要解决此问题，您需要添加 2 个主题颜色值，一个用于每个首选的深色/浅色配色方案，并保持在阈值范围内。示例：
<meta name="theme-color" content="#f9f9f9" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#872e4e" media="(prefers-color-scheme: dark)">
【讨论】：
似乎是这样，有些颜色有效，有些则无效。我理解为什么 Safari 会这样做，只是遗憾的是 Safari 没有在控制台中对此发出某种警告，而且似乎没有工具来帮助确定不会被破坏的颜色。 同意，调试无效颜色值非常繁琐。【参考方案2】：某些颜色在 macOS Safari 15 上无法正常显示，尤其是当您使用深色外观且主题颜色太浅时。
我构建了这个小工具来预览theme-color 是否正常工作。
链接：https://roger.pub/theme-color-preview/
【讨论】：
以上是关于为啥桌面版 Safari 15 不尊重我的主题颜色设置？的主要内容，如果未能解决你的问题，请参考以下文章
Safari 不尊重 `transform-origin` SVG 属性