google-chrome - 检测浏览器是否使用暗模式并使用不同的图标

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 .在 Chrome 76 中使用 --enable-blink-features=MediaQueryPrefersColorScheme ，这会在页面加载时正确设置图标，但不会动态响应暗模式下的更改。

Safari 在暗模式下为暗图标添加灰色背景(例如， Wikimedia Foundation 、 Github )，因此为了易读性，不需要此解决方法。

加两个 link rel=icon带有 id 的元素s 稍后:

<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();
  }
}