最直接可靠的方法是手动调整hsl中的l值，通过媒体查询切换预设的两套亮度值，保持色相和饱和度不变以确保视觉连贯；color-mix()可自然掺白/黑但兼容性有限；避免使用filter: brightness()以免影响整体渲染；light-dark()是未来方案但当前支持度不足。
用 hsl() 手动改 l 值最直接可靠
浏览器不支持 hsl(210, 70%, calc(60% - 15%)) 这类带 calc() 的写法，所以“动态”在这里指人工预设两套值，靠媒体查询切换。关键不是自动计算，而是用同一色相（h）和饱和度（s），只调亮度（l）——这样视觉连贯、无偏色。
操作步骤：
- 用开发者工具拾取原始颜色，右键选“Copy as HSL”
- 浅色模式下若为
hsl(210, 70%, 60%)，深色模式可试hsl(210, 70%, 14%)（背景）或hsl(210, 70%, 90%)（文字） -
l值低于 12% 易与纯黑混淆，高于 92% 在深底上可能发灰，建议控制在 12%–92% 区间
color-mix() 是真能“按比例混合”的现代方案
color-mix() 不是调亮度，而是向白/黑掺色，结果更自然、不溢出，且保留 alpha。但它有兼容性门槛：Chrome 111+、Safari 16.4+、Firefox 119+ 支持；旧版会直接忽略整条声明，必须加降级。
典型写法：
- 提亮：
color-mix(in srgb, #4a6fa5 75%, white 25%) - 压暗：
color-mix(in srgb, #4a6fa5 80%, black 20%) - 降级写法必须前置：
background-color: #4a6fa5; background-color: color-mix(in srgb, #4a6fa5 75%, white 25%);
别碰 filter: brightness() 调颜色本身
这个滤镜作用于整个渲染层，不是颜色值。对带透明度的元素、子内容、阴影都会一并处理，极易导致文字边缘模糊、对比度崩坏。它适合做全局氛围调节（比如夜间模式整体柔光），但不适合精准控制按钮边框或文本色。
常见误用现象：
- 给
rgba(0,0,0,0.6)加brightness(1.2)，结果文字变灰白、可读性骤降 - 父容器用了
brightness()，子元素图标也跟着泛光，失去细节 - 和
opacity叠加时，视觉对比度可能跌破 WCAG 4.5:1 下限
CSS 变量 + light-dark() 是未来最简路径
light-dark() 是 CSS Color Level 5 新增函数，语法干净：color: light-dark(#333, #ddd);。但它依赖 color-scheme 声明生效，且当前仅 Chromium 和 Safari 技术预览版稳定支持，Firefox 尚未落地。
启用前提：
- 根元素必须声明：
:root { color-scheme: light dark; } - 不能嵌套在其他媒体查询里，必须顶层定义
- 若某区域需强制深色（如代码块），可加
.code-block { color-scheme: dark; }，其内部light-dark()就永远取第二个参数
目前生产环境建议把它作为渐进增强项，而非主力方案——毕竟你没法让所有用户都升级到 Chrome 128。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
