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

Question

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

有没有办法检测用户是否使用暗模式并更改图标？

标签： google-chromebrowser

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 with 中--enable-blink-features=MediaQueryPrefersColorScheme，这会在页面加载时正确设置图标，但不会动态响应暗模式的变化。

Safari 在深色模式下（例如Wikimedia Foundation、Github）为深色图标添加了灰色背景，因此对于易读性而言，此解决方法不是必需的。

1. 稍后添加两个link rel=icon带有 s 的元素：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();
     }
   }