Chrome自动暗黑模式下如何获取转换后的CSS颜色及检查元素？

1. 获取按钮反转后的CSS颜色 #

• 拾色器直接取色：打开Chrome开发者工具的元素面板，找到目标按钮的颜色相关CSS属性（比如background-color），点击属性旁的颜色方块打开拾色器，直接拾取页面上按钮的实际显示颜色——这个就是暗黑模式反转后的颜色值，不受面板显示原始值的影响。
• 控制台命令获取计算样式：在开发者工具的控制台输入以下命令（把你的按钮选择器替换成实际的选择器，比如button.submit-btn）：

  getComputedStyle(document.querySelector('你的按钮选择器')).backgroundColor
  

  执行后会返回元素实际渲染的颜色值，也就是反转后的结果。

2. 检查已转换元素的工具 #

• 计算样式面板：选中目标元素后，切换到元素面板的「计算样式」标签，这里会显示元素最终应用的所有样式，包括浏览器自动暗黑模式转换后的结果，能直接看到反转后的颜色、渐变等属性值。
• 渲染面板辅助验证：按Esc打开开发者工具的抽屉面板，切换到「渲染」标签，找到Emulate CSS media feature prefers-color-scheme选项，可以手动切换亮色/暗黑模式，配合计算样式面板对比查看转换后的样式变化。

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