根本原因是视觉上下文和渲染路径的系统性变化，而非颜色本身改变；背景明度影响人眼对亮度的对数感知（韦伯-费希纳定律），导致固定色值跨主题失效，需用lch()等相对方法动态调整。
同一颜色在浅色和深色主题里效果不同，根本原因不是颜色“变”了，而是它所处的视觉上下文和渲染路径发生了系统性变化。
背景明度改变直接颠覆颜色感知
人眼对颜色的判断高度依赖周围亮度。同一个 #666 在白色背景上是中灰，在深灰背景上就接近亮灰，甚至发白；而 #999 在浅色主题里可能显得脏，在深色主题里反而成了主文字色。这不是 CSS 失效，是韦伯-费希纳定律在起作用——人对亮度的感知是对数关系，不是线性。
- 别用固定灰阶值（如
#333、#666）跨主题复用，它们在不同背景下的相对明度会漂移 - 深色主题下，
color: #fff并不总是最佳选择：OLED 屏上纯白会过曝，且与图标、边框等元素对比过强 - 推荐用
hsl()或lch()做相对调整，例如：color: lch(from var(--text-base) calc(l + 15%) c h)，确保文字在深色背景下“提亮”而非“硬切为白”
currentColor 不继承 background-color，只继承 color 值
currentColor 是个常见误解源头。它永远只取当前元素的 color 计算值，跟它的 background-color 毫无关系。所以写 box-shadow: 0 2px 4px currentColor，阴影颜色不会随背景变深而变浅——它只会是你设的 color 值（比如 #333），在深色背景上可能完全看不见。
- 想让阴影适配背景？必须显式绑定变量，例如：
box-shadow: 0 2px 8px hsla(from var(--bg-base) h s calc(l - 20%) / 0.15) - SVG 图标填色别依赖
currentColor自动适配，除非你已确保父级color值在深/浅主题下都合理 - 禁用态按钮的
color和background-color必须成对定义，不能只改一个
浏览器对 prefers-color-scheme 的解析存在延迟与隔离
媒体查询本身没问题，但实际生效时机和作用域常被忽略。Safari 在 iOS 15–16 中切换系统深色模式后，页面若未重排或未触发样式重计算，@media (prefers-color-scheme: dark) 规则可能滞后应用；Chrome 若遇到内联 style 标签或 document.write，也可能跳过重算。
- 检查「Computed」面板里最终
color值来源，确认它是否真来自媒体查询块，而不是被后面更高权重的选择器覆盖 - 避免把主题变量全塞进
:root再靠 JS 切换class，这会导致 CSS 变量未更新——应直接在@media块内重定义变量 -
data-theme必须挂在上，否则原生控件（如<select></select>下拉箭头、滚动条）不会响应
真正难的不是写出两套颜色值，而是意识到：颜色从来不是孤立存在的像素，它是背景、设备、浏览器策略和人眼共同参与的一次实时计算。任何脱离上下文谈“同一颜色”的做法，都会在某个屏幕、某个浏览器、某个用户设置下失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
