为什么桌面版 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 上不受尊重？

【问题讨论】：

标签： html safari mobile-safari

【解决方案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/

【讨论】：