直接修改CSS变量（如--lightness）可统一微调颜色深度，但须全部颜色用hsl()声明且媒体查询仅重设变量值；若在@media中硬写color: #1e293b，则重复维护、易漏、无法响应主题切换，违背“一处改、全局变”原则。
直接改--lightness或--saturation变量就能微调颜色深度，但必须所有颜色都用hsl()声明，且媒体查询只覆盖变量值，不重写样式规则。
为什么不能在@media里直接写color: #1e293b？
那样等于重复维护两套颜色逻辑，容易漏、难同步、无法响应后续主题切换。CSS变量的核心价值是“一处改，全局变”——前提是所有颜色都走var(--color-text)路径。一旦某个组件用硬编码color: #334155，它就彻底脱离控制链。
- 媒体查询只负责“给变量赋新值”，比如
@media (min-resolution: 2dppx) { :root { --lightness: 28%; } } - 所有用到
hsl(var(--hue), var(--saturation), var(--lightness))的地方自动变深 - 第三方库（如Tailwind）若未映射你的变量，需手动加
text-[color:var(--text-primary)]类兜底
@media (min-resolution: 2dppx)怎么安全调深色？
高分屏下文字常显“发灰”，不是因为颜色不准，而是像素密度提升后对比度感知下降。此时不宜粗暴降--lightness到20%，容易让浅灰文字在深背景上糊成一片。
- 优先用
clamp(25%, calc(var(--lightness) - 5%), 35%)限制调整幅度，防过暗 - 搭配
--contrast-ratio: 4.5;这类语义变量，供color-contrast()函数调用 - 避免在
@media里写filter: brightness(0.95)——它会劣化文字抗锯齿，尤其macOS上明显
小屏幕竖屏下颜色变浅的常见陷阱
移动端强光环境多，系统常默认启用prefers-contrast: high，但很多开发者只监听prefers-color-scheme，漏掉这一层。结果是：用户开了高对比模式，你的--lightness: 40%在浅色主题下仍显太淡。
立即学习“前端免费学习笔记（深入）”；
- 补上
@media (prefers-contrast: high) { :root { --lightness: 55%; } } - 注意该媒体特性优先级低于
data-theme="dark"，所以CSS中要把它写在手动主题规则之后 - 不要用
calc(var(--lightness) + 10%)直接加——小数精度可能让最终值变成55.0000001%，某些旧版Safari会截断为55%但渲染异常
最易被忽略的是：变量名必须稳定。比如--text-lightness和--bg-lightness得分开定义，否则调深文本时连背景也跟着变暗，破坏对比关系。这不是“能不能”的问题，而是“要不要”的设计判断——颜色深度从来不是孤立参数。
