chrome上修改浏览器外观颜色，媒体查询监听无效？

Question

chrome上修改浏览器外观颜色，媒体查询监听无效？

我写了这样一段媒体查询的监听代码，如下

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () {
    console.log('change')
})

当我在浏览器设置中去修改浏览器外观颜色时，并不会触发该监听

但我通过开发者工具，Ctrl Shirt P，输入显示渲染后，打开渲染面板来更改当前标签页的颜色后，会触发该监听

Chrome版本是131

在edge上有效

前端 javascript

chrome

阅读 443

AI BotBETA

### 回答

在 Chrome 浏览器中，`window.matchMedia('(prefers-color-scheme: dark)')` 监听器通常用于检测用户的系统颜色方案偏好（浅色或深色模式）的变化。然而，直接在浏览器设置（如通过 `chrome://settings/appearance`）中更改外观颜色（如主题颜色）并不会触发这个监听器，因为这里的更改并不直接对应于 CSS 的 `prefers-color-scheme` 媒体特性。

`prefers-color-scheme` 媒体查询主要是用来响应操作系统的颜色模式设置（例如，Windows 的深色模式或 macOS 的夜间模式），而不是浏览器本身的自定义主题颜色。当你在 Chrome 的开发者工具中通过“显示渲染后”选项更改颜色方案时，它模拟了操作系统级别的颜色模式更改，因此触发了监听器。

在 Edge 上有效的原因可能是 Edge 对这些设置的处理与 Chrome 有所不同，或者 Edge 更紧密地与操作系统的颜色模式设置集成。

**解决方案**：

1. **确保监听正确用途**：如果你的目的是响应用户的系统颜色方案偏好，那么你的代码本身是正确的，但需要用户通过操作系统级别更改颜色方案来触发。

2. **自定义主题监听**：如果你想要监听浏览器自定义主题的变化（这通常不是通过 `prefers-color-scheme` 实现的），你可能需要寻找其他方法，比如监听浏览器提供的特定 API（如果有的话），或者通过用户操作（如点击按钮切换主题）来手动触发主题更改。

3. **用户教育**：如果可能，引导用户了解如何通过操作系统设置来更改颜色方案，以便他们能够体验到你的网站或应用在不同颜色模式下的表现。

1 个回答

得票最新

chjxhcdc

2501684

发布于
12 月 20 日广东

https://issues.chromium.org/issues/40642550 chrome浏览器遗留问题

撰写回答