Chrome默认深色模式与第三方深色插件颜色差异原因咨询

一、Chrome原生Auto Dark Mode的底层实现 #

Chrome通过chrome://flags开启的Auto Dark Mode for Web Contents是内核级的深色模式适配，核心流程如下：

• 全页面样式扫描：浏览器渲染引擎（Blink）会遍历页面所有DOM元素，提取color、background-color、border-color等色彩相关CSS属性，同时识别图片、视频、SVG等不可反转的媒体元素。
• 智能色彩转换：
  • 对浅色背景的元素，自动反转文本/边框色彩到深色系，但会跳过带有prefers-color-scheme: light声明的元素，以及标注为“不可修改”的内容。
  • 对于纯黑（#000）这类深色，直接保留原色彩；纯白（#fff）会被转换为适配深色背景的暗白色调，避免刺眼；自定义色彩（如你测试的蓝色）会通过内置算法调整亮度和对比度，确保在深色模式下的可读性与协调性。
• 内核层样式覆盖：所有色彩调整在样式计算阶段完成，相当于在页面原有样式之后添加了一层优先级极高的内核样式，无需修改页面原始代码。

二、与第三方深色模式插件的核心差异 #

第三方插件的实现逻辑和原生功能有本质区别：

• 修改层级不同：
  原生功能是在浏览器渲染引擎内部介入，样式优先级远高于页面内所有CSS和插件注入的样式；第三方插件大多通过前端脚本注入<style>标签或修改元素style属性，属于页面层级的样式覆盖，会受CSS层叠规则限制，可能被页面的!important样式覆盖。
• 色彩处理逻辑不同：
  原生功能有一套基于无障碍规范的色彩安全算法，能精准识别需要调整的元素，避免不合理反转；多数第三方插件仅做全局色彩反转或预设模板替换，对自定义色彩（如你测试的蓝色）不会做智能调整，因此保留了原始颜色。
• 触发与兼容性：
  原生功能和系统深色模式深度联动，依赖内核级的prefers-color-scheme扩展实现；第三方插件依赖脚本注入，部分网站的CSP策略会阻止其运行，页面自身的JS逻辑也可能覆盖插件的修改。

对应测试场景的验证 #

你的测试结果完全匹配上述逻辑：

上方三组图（浅色模式/第三方插件）：黑色#000、白色#fff、蓝色均保留原始色彩，因为插件未做智能色彩调整
下方三组图（Chrome默认深色模式）：黑色#000保留，白色#fff转为暗白色，蓝色被调整为适配深色的版本，这是原生内核的智能色彩转换导致的

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