Chrome深色模式下window.matchMedia返回matches:false的问题咨询

1. 网站自带主题设置覆盖系统偏好 #

Google翻译本身有独立的主题切换功能，如果当前设置为浅色而非跟随系统，会直接让prefers-color-scheme: dark的检测结果变为false。你可以点页面右上角的齿轮图标，进去看看主题选项是不是选了浅色。

2. Chrome针对该站点的专属主题配置 #

Chrome允许给单个站点单独设置主题模式，可能你之前不小心给translate.google.com开了强制浅色：

• 打开翻译页面，点地址栏左边的🔒图标
• 选择「网站设置」
• 找到「外观」里的「主题」选项，确认是不是设成了浅色，改成跟随系统就行

3. 网站通过代码强制指定配色模式 #

有些网站会用<meta name="color-scheme" content="light">标签或者CSS的color-scheme: light;属性，告诉浏览器只支持浅色模式，这会直接影响媒体查询的结果。你可以在翻译页面的源码里搜color-scheme，就能看到有没有这类设置。

快速验证方法 #

如果是网站代码强制的，你可以用Chrome开发者工具临时修改：在Elements面板找到对应的meta标签，把content改成light dark或者直接删掉，再重新执行window.matchMedia('(prefers-color-scheme: dark)')，就能得到正确的true结果了。

内容的提问来源于stack exchange，提问作者Jessica Wang