如何使页面的图标响应用户的配色方案偏好？

Question

页面通过favicon.ico或通过各种<link>标签为浏览器提供图标，例如

<link rel='icon' type='image/png' href='icon.png'>

问题是，如果图标与浏览器选项卡的颜色相同，那么您就看不到它。

有一些半明显的解决方案

(1) 作为用户，选择选项卡不是纯白色或纯黑色的主题（并祈祷网站不要选择相同的颜色）

(2) 作为开发人员，选择一个不是纯白色或纯黑色的图标颜色（并祈祷它与用户的主题不匹配）或为图标添加框架。

但是，只是好奇，作为一名开发人员，是否有一种方法可以告诉浏览器在选项卡为深色时使用一个图标，如果选项卡为浅色则使用不同的图标？例如 SVG CSS？不同的<link>标签？

_{PS：是的，我知道上面的主题很花哨。与我用来分隔帐户的其他配置文件相比，它是“谷歌绿色”。这样我就可以很容易地知道每个浏览器窗口正在使用哪个帐户。我有 7 个以上的个人资料，每个都有不同且非常独特的主题}

Answer 1

你正在谈论两种可能的事情：

\n

\n
1. 浏览器主题
\n
2. 操作系统配色方案
\n

\n

您的屏幕截图描绘了第一个。Chrome 不会向其 Javascript API 公开用户选择的主题。据我所知，其他浏览器也没有。这可能是一件好事：它将是极其独特的\xe2\x80\x93，因此是一种对用户进行指纹识别的方法。

\n

但第二个，操作系统配色方案，是暴露给浏览器的！这通常只是 或dark之一light。并非每个操作系统都支持配色方案，但那些在谈论配色方案时通常使用“深色模式”等术语的操作系统。例如， Apple 有一些有关如何在 macOS 上使用深色模式的文档。

\n

如果操作系统支持配色方案，它们将通过CSS 媒体查询暴露给浏览器：@media ( prefers-color-scheme: dark )。该功能拥有超过 91% 的全球浏览器支持。

\n

它在 CSS 中的好处是，您可以为您的 favico 提供 SVG，其中包含该媒体查询，并且您的用户将自动获得正确的 SVG。

\n

Thomas Steiner 在2019 年的这篇文章中推广了这种技术。一个例子：

\n

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">\n  <style>\n    path {\n      fill: black;\n    }\n\n    @media (prefers-color-scheme: dark) {\n      path {\n        fill: white;\n      }\n    }\n  </style>\n  <path d="....." />\n</svg>\n

\n

不过，回到您的帖子：用户可能有一个dark配色方案，以及（比如说）华丽的绿色浏览器主题，因此 favico 可能看起来很糟糕。没有回避它。

\n

那么最简单的解决方案呢？

\n

在您的 favico 上添加背景颜色。一个与时间一样古老的解决方案！

\n