真正可用的暗色模式需用CSS自定义属性+prefers-color-scheme实现，而非filter: invert()或brightness()等滤镜——前者导致色彩反转、对比度不达标、UI细节丢失，后者引发全局失真、性能下降与兼容性问题。
filter: invert() 会让颜色反转，不是真正的暗色模式
直接用 filter: invert(100%) 看起来像“变暗”，但实际是把黑变白、蓝变橙、文字和背景全翻转，可读性极差——尤其对图片、图标、渐变和半透明元素。这不是暗色模式，是色彩灾难。
- 浏览器不会自动适配文本对比度，
invert()后的灰色文字可能在浅灰背景上只剩 2:1 对比度，不满足 WCAG - 所有
background-image、border-color、SVG 填充色都会被反转，UI 细节彻底丢失 - 不能和
prefers-color-scheme联动，用户系统设了暗色，页面反而更刺眼
filter: brightness() 数值调太低会丢失细节
brightness(0.7) 或 brightness(0.5) 看似简单，但它是全局线性压暗，不区分语义层级：按钮、阴影、边框、文字全按相同比例变暗，结果常是“糊成一片”。尤其当原始设计用的是浅灰文字（#999）+ 白底，压到 brightness(0.6) 后文字几乎不可读。
- 数值
brightness(0)是纯黑，brightness(1)是原样，brightness(0.8)以下就容易让中灰阶信息坍缩 - 它不改变色相或饱和度，深蓝按钮压暗后可能变成近似黑色，失去视觉反馈
- 和
contrast()叠加时顺序敏感：filter: brightness(0.8) contrast(1.2)和反过来效果不同，调试成本高
真正可用的暗色方案：用 CSS 自定义属性 + prefers-color-scheme
硬套 filter 是绕开问题，不是解决问题。暗色模式本质是两套颜色映射关系，必须靠变量控制。
- 声明基础变量：
:root { --bg: #fff; --text: #333; }，再加@media (prefers-color-scheme: dark) { :root { --bg: #1e1e1e; --text: #e0e0e0; } } - 所有颜色相关 CSS 都用
var(--bg)、var(--text)，而不是写死十六进制值 - 如果必须兼容旧代码，可局部加
filter，但只用于装饰性图片：img.deco { filter: brightness(0.9) contrast(1.1); }，且禁用在button、input、文本容器上
filter 滤镜的性能和渲染陷阱
filter 会触发层合成（layer promotion），尤其在滚动区域里加 filter，Chrome 和 Safari 都可能引发掉帧或内存暴涨。
立即学习“前端免费学习笔记（深入）”；
- 给
body或html加filter，等于强制整个页面进 GPU 层，动画卡顿概率大幅上升 -
filter不支持 transition，想做暗色切换动画？得用color、background-color这类可过渡属性配合 JS 控制类名 - 部分安卓 WebView（如微信内置）对
filter: invert()渲染异常，可能整页泛绿或闪烁
filter 打补丁式加暗色，短期能看，长期维护成本远高于从变量体系起步。最麻烦的不是写错一行 filter，而是它掩盖了颜色系统缺失这个根本问题。 
