如何获取Chrome forceDarkModeEnabled所用CSS实现站点自定义暗色模式

Chrome的Auto Dark Mode for Web Contents功能没有对外公开可直接复用的完整静态CSS规则——它本质是Chromium渲染引擎内置的动态颜色处理逻辑，不是提前写好的固定CSS文件，你可以通过以下方式还原出高度近似的效果：

• 直接提取浏览器实际生效的动态样式
  开启chrome://flags/#enable-force-dark后打开任意测试页面，调出Chrome开发者工具，切到Elements面板的Styles栏，就能看到浏览器为每个元素自动注入的暗色适配规则，包含背景色亮度调整、文本色对比度校准、媒体元素亮度滤镜、边框/阴影色适配等核心逻辑。你可以多测试不同类型的页面元素（普通文本、表单控件、图片、Canvas、透明背景元素、固定定位组件等），把通用的、和元素特定类名/ID无关的规则抽离整理，就能得到大部分核心CSS。
• 对齐Chromium的暗色处理核心逻辑
  抽样式的时候不要硬抄单页的生成结果，要对齐它内置的处理规则，适配性会更好：
  • 对亮度高于阈值的浅背景做亮度压低，避免纯黑纯白的强对比
  • 保证文本和背景的对比度满足WCAG最低可读标准
  • 对图片、视频类元素默认加低强度的亮度/对比度滤镜，避免暗色模式下过曝
  • 对已经声明color-scheme: dark的元素跳过自动反转处理
  • 表单控件的暗色样式用浏览器内置暗色基底适配，不要硬反转颜色导致控件样式失真
• 自定义模式的兼容处理
  你把整理好的暗色规则全部挂载到根元素的自定义类下（比如给<html>标签加data-theme="dark"属性，所有暗色规则都以这个属性为前缀），开关状态存在localStorage里，用户手动触发时切换这个属性即可，这样不管用户用什么浏览器、有没有开系统/浏览器自带的强制暗色，你的自定义暗色模式都能正常生效，不会出现样式冲突。

踩坑提示：不要直接把开发者工具里单页抓取到的自动暗色规则全量复制到站点中，Chrome生成的规则里包含大量针对当前页面特定元素的专属选择器、行内样式覆盖，全量复制会带来大量冗余代码，在站点其他页面很容易出现样式错乱。

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