Question

Google Chrome 73已发布，它向浏览器添加了暗模式支持。我注意到现在有很多图标看起来很糟糕。

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

谢谢

Answer 1

在文档的head中添加和删除图标在Firefox中有效，但在Safari中无效：

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

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

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

添加两个link rel=icon元素，id，以供日后使用：

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

创建CSS媒体匹配器：

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

添加/删除文档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 2

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

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

考虑到这一点，如今，您可以将SVG用作您网站的图标：

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

然后，您可以使用CSS prefers-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网站图标的current browser support，需要使用旧版浏览器进行回退：

<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

Answer 3

要使其比Josh's answer更通用，请尝试这样做，同时浏览器仍可以自行实现media。（请注意，JS中没有硬编码的主题，id或media查询的数量；它们都保存在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 4

最简单的选择是在计算机上更改模式时更改源。

var element = document.querySelector("link[rel='icon']");
const darkModeListener = (event) => {
if (event.matches) {
  console.log("dark");
  element.setAttribute("href","img/favicon-dark.svg");
} else {
  console.log("light");
  element.setAttribute("href","img/favicon-light.svg");
}
};

// Update favicon on Mode change 
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', darkModeListener);

// Check Mode on load
if (window.matchMedia && window.matchMedia('(prefers-color-scheme:      dark)').matches) {
  element.setAttribute("href","img/favicon-dark.svg");
} else {
  element.setAttribute("href","img/favicon-light.svg");
}

但是，如果您有多设备图标，则需要执行以下操作...

// Switch Favicon on Dark/Light Mode
        let colorSchemeQueryList = window.matchMedia('(prefers-color-scheme: dark)');
            const setColorScheme = e => {
              if (e.matches) {
                // Dark
                var favicon = document.querySelectorAll('link[data-type="favicon"]');
                var i = favicon.length;
                while (i--) {              
                  favicon[i].setAttribute('href', favicon[i].dataset.dark);
                }
              } else {
                // Light
                var favicon = document.querySelectorAll('link[data-type="favicon"]');
                var i = favicon.length;
                while (i--) {              
                  favicon[i].setAttribute("href", favicon[i].dataset.light);
                }
              }
            }
           
           setColorScheme(colorSchemeQueryList);
           colorSchemeQueryList.addListener(setColorScheme);

<link rel="apple-touch-icon" sizes="180x180" href="Images/favicon/light/apple-touch-icon.png" data-type="favicon" data-light="Images/favicon/light/apple-touch-icon.png" data-dark="Images/favicon/dark/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="Images/favicon/light/favicon-32x32.png" data-type="favicon" data-light="Images/favicon/light/favicon-32x32.png" data-dark="Images/favicon/dark/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="Images/favicon/light/favicon-16x16.png" data-type="favicon" data-light="Images/favicon/light/favicon-16x16.png" data-dark="Images/favicon/dark/favicon-16x16.png">
  <link rel="favicon" href="Images/favicon/light/site.webfavicon" data-type="favicon" data-light="Images/favicon/light/site.webfavicon" data-dark="Images/favicon/dark/site.webfavicon">
  <link rel="mask-icon" href="Images/favicon/light/safari-pinned-tab.svg" color="#000000" data-type="favicon" data-light="Images/favicon/light/safari-pinned-tab.svg" data-dark="Images/favicon/dark/safari-pinned-tab.svg">

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

4 个答案: