暗黑模式下文字看不清是因人眼在低亮度环境下对中高亮度色敏感度下降，导致对比度不足；需用oklch()重算感知亮度、声明color-scheme开关、重估gap/border/shadow等视觉分量。
暗黑模式下颜色发灰、文字“融化”、图标看不清，不是 CSS 写错了，而是人眼在低亮度环境下的感知机制变了——对比度必须重算，不能沿用亮色模式的数值。
为什么系统切暗色后文字突然看不清？
纯黑或深灰背景大幅降低人眼对中高亮度颜色的敏感度，尤其蓝紫系（hsl(240, 30%, 70%)）在 #121212 上实测对比度可能跌破 4.5:1，低于 WCAG AA 标准。这不是浏览器 bug，是视觉恒常性导致的生理现象：你“觉得还行”，但屏幕实际已不达标。
- 用 Chrome DevTools 的「Accessibility」面板实时测当前元素对比度，别信肉眼判断
-
hsl(0, 0%, 80%)（浅灰白）在深底上常只有 ≈3.2:1，而hsl(210, 10%, 82%)（冷调稳白）可达 7.1:1 - OLED 屏幕会放大问题：纯白文字边缘易辉光，子像素混色让细线图标发虚
为什么不能直接把亮色模式的十六进制变暗？
硬改 #2563eb → #1d4ed8 看似合理，但 HSL 或 sRGB 坐标系里，L/lightness 和人眼感知亮度严重脱节。同一 L 值在明/暗背景下视觉重量差异巨大，容易导致品牌色在暗色下“褪色”或“糊成一片”。
- 优先用
oklch()或lch()：它们的L通道直连感知亮度，oklch(45% 0.35 250)比hsl(250, 60%, 45%)更稳 - 旧浏览器回退方案：用
color-mix(in srgb, ...)或预编译变量，别用filter: brightness()强行压暗——它破坏色彩空间一致性 - 第三方组件库（如 MUI）默认拉高饱和度，结果图表撞色、tag 跳戏，需手动覆盖其
--mui-palette-primary-main等变量
为什么 @media (prefers-color-scheme: dark) 改了颜色却没生效？
常见错觉：写了媒体查询就万事大吉。其实浏览器根本没“认出”你支持暗色模式，原生控件（input、滚动条、button）仍按系统默认逻辑渲染，你的 CSS 只盖住了部分表层。
- 必须在
<meta name="color-scheme" content="light dark">或:root上显式声明color-scheme: light dark - 仅靠媒体查询不会触发系统级暗色渲染，
color-scheme才是开关 - 若用 CSS-in-JS（如 Emotion），确保该
meta是 HTML 静态注入的，动态插入大概率被忽略
最易被忽略的一点：暗色模式下，gap、border-color、box-shadow 的视觉分量全变了。不是颜色本身错了，是它和周围环境的相对关系崩了——得按新上下文重估所有间距、描边、阴影的明度与透明度，而不是只调文字色。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
