在 MacOS 上的 Chrome 中检测深色主题

Question

我有一个带有主题切换器（深色、浅色和重置操作系统）的网站，效果很好。在 MacOS 中，我通常将主题设置为深色，只有 Chrome 永远不会为具有

prefers-color-scheme

 媒体查询的网站加载深色主题，包括我的（当未设置手动选择器时），而其他浏览器则这样做.

我添加了一个事件监听器，以监听更改，它再次显示在除 Chrome 之外的所有浏览器中。

经过测试（M1 MBP 上的所有浏览器和操作系统均为最新版本）：

Chrome（事件不记录到控制台）
Chrome 隐身模式（事件不会记录到控制台）
Firefox 开发者版（事件日志到控制台）
Safari（事件日志到控制台）
Edge（事件日志到控制台）
Chrome Canary（事件日志到控制台）

这已经困扰我太久了，我知道的网站已经设置了

prefers-color-scheme: dark;

，最初不向我显示黑暗主题，我必须找到手动切换/按钮。我知道这不是世界末日，但这很令人沮丧。

我打开隐身（以排除扩展）重新加载页面，更改我的主题，没有任何记录到控制台
我尝试了 Firefox 和 Safari，一切都很好
我尝试了 Edge，想知道这是否是 MacOS 上的 Chromium 错误，再次完美运行
我尝试了 Canary，效果很好
将标志重置为默认值
将 Chrome 外观设置为系统
禁用所有扩展
在 Chrome 中进行每次更改后都会重新启动
重置 Chrome 中的所有设置（我其实并不想这样做，但我做到了）
在谷歌上广泛搜索，似乎没有人遇到同样的问题，而且这种情况已经持续了很长时间，就像一年多了。

我现在别无选择，我不想重新安装 Chrome，因为这可能比我重置 Chrome 但它什么也没做时更让我烦恼。

我的 JS 事件监听器很好，除了这台 Mac 上的 Chrome 之外，它可以在任何地方工作，它也可以在 Windows Chrome 上工作。主题在 Android Chrome 和 iPad 上正确显示。

当我更改 MacOS 主题时，期望此日志应该将操作系统主题主题发送到 Chrome 控制台：

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', evt => {
  const theme = evt.matches ? "dark" : "light";
  console.log( theme );
});

绝对没有任何反应，只有在 Chrome 中。当我更改操作系统时，我的 MS Teams、Safari 和其他所有内容都会更改主题。

当我调整窗口大小时，这会按预期记录到控制台：

window.matchMedia('(min-width: 768px)').addEventListener('change', evt => {
  const size = evt.matches ? "yeah" : "nah";
  console.log( size );
});

进一步补充一下，这种情况也发生在 MDN 上，没有任何变化。这不是我的主题切换器，我只是在硬选择主题时向 localStorage 添加一个条目，有一个重置按钮可以删除选定的条目，localStorage 为空并且 data-attr 未显示在 HTML 元素上，所以我做任何事情的方式都没有问题。如果我选择深色主题，它会在重复访问时加载正确的主题，这只是系统首选项的问题。

问题是，为什么该侦听器不能在 Chrome 中运行，我可以做什么来阻止它运行，特别是在重置我能想到的所有内容之后？

所以我想我的问题是，以前有人遇到过这个问题，如果是的话，你做了什么来解决它？

Answer 1

你绝对不是一个人在这里。你现在找到答案了吗？

鉴于 Canary 工作正常（我自己尝试并确认），并且 Chromium 独立版也可以工作，也许是由于某些标志启用/禁用或某些标志的默认值不同？..