深色模式下filter: brightness()失效，应改用CSS变量配合prefers-color-scheme、hsl()调Lightness、color-mix()混色或--lightness-offset动态计算；渐变和阴影需单独处理。
深色模式下用 filter: brightness() 会失效？
直接写 filter: brightness(0.8) 在深色模式里往往没效果，甚至让文字更难读。因为 brightness() 是对整个元素做全局像素级缩放，不区分语义、不响应系统配色逻辑，还可能把原本该变暗的背景反而压得发灰。
真正该做的，是让颜色本身“变暗”，而不是强行压暗像素——尤其是文本、边框、图标这类语义明确的元素。
- 优先用 CSS 自定义属性（
--color-primary）控制颜色，再配合@media (prefers-color-scheme: dark)覆盖变量值 -
filter只适合临时视觉微调（比如 hover 状态），别用它做主题适配主逻辑 - 若必须用
filter，记得加will-change: filter防止重绘卡顿，但别在滚动容器里滥用
怎么用 hsl() 动态降低 Lightness 值
hsl() 的第三个参数就是 Lightness，改它最直接。深色模式下把 Lightness 从 70% 降到 40%，比硬套 rgba(0,0,0,0.2) 更可控、更保色相。
示例：
立即学习“前端免费学习笔记（深入）”；
button {
background-color: hsl(210, 60%, 70%);
}
@media (prefers-color-scheme: dark) {
button {
background-color: hsl(210, 60%, 40%);
}
}
- Lightness 不是亮度（brightness），也不是明度（value），它是 HSL 模型中“黑白占比”的中间值，
0%是纯黑，100%是纯白 - 同一色相下，Lightness 降太多（比如从
60%直降到20%）容易丢失细节，建议降幅 ≤30 个百分点 - 别用
hsla()加 alpha 来模拟变暗——半透叠加背景会导致不可控的混合结果，尤其在不同深色背景上表现不一
color-mix() 在深色模式里怎么安全降 Lightness
color-mix() 是目前最语义清晰的方案：它能按指定比例混合两种颜色，且天然支持 in srgb 或 in oklch 等色彩空间，避免 HSL 在边缘色相上的断层。
例如，让主色向黑色靠拢 20%：
.text-primary {
color: color-mix(in srgb, var(--color-primary) 80%, black 20%);
}
- 必须写明色彩空间（
in srgb最稳妥），否则部分浏览器（如 Safari 16.4+ 之前）会静默失败 -
color-mix()不支持变量嵌套计算，var(--color-primary)必须是已解析的合法颜色值（不能是hsl(var(--h), var(--s), var(--l))这种间接形式） - Chrome 111+ 和 Firefox 119+ 支持良好，Safari 17.4+ 开始支持；如需兼容旧版，得回退到
:root中预设深色变量
为什么改 --lightness-offset 变量比硬编码更灵活
把 Lightness 的偏移量抽成变量，就能一套逻辑适配多层级颜色（主色、次色、禁用态、悬停态），不用每个都写一遍媒体查询。
示例：
立即学习“前端免费学习笔记（深入）”；
:root {
--lightness-offset: 0;
}
@media (prefers-color-scheme: dark) {
:root {
--lightness-offset: -25;
}
}
.btn {
background-color: hsl(210, 60%, calc(70% + var(--lightness-offset)));
}
- 注意
calc()里单位要一致：70%+-25是非法的，必须写成calc(70% + var(--lightness-offset)% )或统一用无单位数值再乘以% - 这个技巧对
lch()和oklch()同样适用，而且后者在 Lightness 调整时色相更稳定 - 别在
@layer或@container里动态改这个变量——它们不触发媒体查询重算，变量值不会更新
真正麻烦的是渐变和阴影：它们没法直接参与 hsl() 计算或 color-mix()，得单独处理。这点很多人一开始根本没想到。
