检测浏览器是否使用暗模式并使用其他图标

Question

Google Chrome 73已发布，并为浏览器添加了“暗模式”支持。我注意到许多图标现在看起来很糟。

有没有一种方法可以检测用户是否使用暗模式并更改图标？

Answer 1

为了使它比Josh 的答案更通用一点，请在浏览器仍然在media本地实现时尝试此操作。（注意JS 中没有硬编码的主题、ids 或media-queries数量；它们都保存在 HTML 中。）

<link rel="icon" href="/favicon.ico?light" media="(prefers-color-scheme:no-preference)">
<link rel="icon" href="/favicon.ico?dark"  media="(prefers-color-scheme:dark)">
<link rel="icon" href="/favicon.ico?light" media="(prefers-color-scheme:light)">

$(document).ready(function() {
    if (!window.matchMedia)
        return;

    var current = $('head > link[rel="icon"][media]');
    $.each(current, function(i, icon) {
        var match = window.matchMedia(icon.media);
        function swap() {
            if (match.matches) {
                current.remove();
                current = $(icon).appendTo('head');
            }
        }
        match.addListener(swap);
        swap();
    });
});

结果是，一旦支持该属性，您只需删除 Javascript，它仍然可以工作。

我故意分成/favicon.ico?light两个标签而不是一个标签，media="(prefers-color-scheme: no-preference), (prefers-color-scheme:light)"因为一些不支持media永久选择rel="icon"他们看到的第一个的浏览器......而其他人选择最后一个！

Answer 2

head在Firefox中但不在Safari中从文档的作品中添加和删​​除图标：

• 演示：https : //zesty-soybean.glitch.me/
• 资料来源：https : //glitch.com/edit/#!/zesty-soybean

Chrome仍在实施中(prefers-color-scheme: dark)，因此评审团还没有成立。https://crbug.com/889087。在带有的Chrome 76中--enable-blink-features=MediaQueryPrefersColorScheme，这会在页面加载时正确设置图标，但在暗模式下不会动态响应更改。

Safari在黑暗模式（例如Wikimedia Foundation，Github）中为黑暗图标添加了灰色背景，因此这种变通方法对于提高可读性不是必需的。

1. 添加两个link rel=icon元素，id以备后用：

   <link rel="icon" href="a.png" id="light-scheme-icon">
   <link rel="icon" href="b.png" id="dark-scheme-icon">
   

2. 创建一个CSS媒体匹配器：

   matcher = window.matchMedia('(prefers-color-scheme: dark)');
   matcher.addListener(onUpdate);
   onUpdate();
   

3. 从文档的中添加/删除元素head：

   lightSchemeIcon = document.querySelector('link#light-scheme-icon');
   darkSchemeIcon = document.querySelector('link#dark-scheme-icon');
   
   function onUpdate() {
     if (matcher.matches) {
       lightSchemeIcon.remove();
       document.head.append(darkSchemeIcon);
     } else {
       document.head.append(lightSchemeIcon);
       darkSchemeIcon.remove();
     }
   }
   

Answer 3

CSS 具有使用prefers-color-scheme媒体功能的主题模式检测：

@media (prefers-color-scheme: dark) {
  ...
}

考虑到这一点，现在您可以使用 SVG 作为您网站的图标：

<link rel="icon" href="/favicon.svg" type="image/svg+xml">

然后您可以使用 CSSprefers-color-scheme媒体功能更新 SVG 图标设计。下面是一个带有圆角的 SVG 矩形，它具有不同的颜色，具体取决于活动主题：

<svg width="50" height="50" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
  <style>
    rect {
      fill: green;
    }
    @media (prefers-color-scheme: dark) {
      rect {
        fill: red;
      }
    }
  </style>
  <rect width="50" height="50" rx="5"/>
</svg>

现在，考虑到当前浏览器对 SVG 图标的支持，旧浏览器需要回退：

<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.png" type="image/png">
<!-- favicon.ico in the root -->

来自https://catalin.red/svg-favicon-light-dark-theme/

这里也是一个演示：https : //codepen.io/catalinred/pen/vYOERwL