filter: invert() 不能真正“自动反转颜色”，因为它无差别逐像素取反，导致彩色文本消失、图标模糊、对比度崩坏，且不区分语义与背景/前景。
filter: invert() 为什么不能真正“自动反转颜色”
filter: invert() 确实能翻转 RGB 通道值，但它是无差别逐像素取反：黑变白、红变青、#ff0000 变成 #00ffff。这不等于“可读性友好的颜色反转”，尤其对彩色文本、带透明度的元素或非灰度图像，常导致文字消失、图标变糊、对比度崩坏。它不理解语义，也不区分背景/前景——所以别指望靠一行 invert(100%) 实现深色模式切换。
真正可用的颜色反转：用 invert() + hue-rotate() 组合修复色相偏移
纯 invert() 后的青绿色文字在白底上很难读，是因为色相被强行拉偏。补一个 hue-rotate() 能把主色调往回扳一点，让反转后仍接近“黑/白/灰”系：
button {
filter: invert(100%) hue-rotate(180deg);
}
常见组合尝试（按实际效果微调）：
-
invert(100%) hue-rotate(180deg)：适合红色/蓝色主色按钮，能压住青绿色溢出 -
invert(90%) hue-rotate(200deg)：保留一点原色感，避免完全失真 - 慎用
sepia()或grayscale()前置——它们会吃掉色相信息，让hue-rotate()失效
filter 反转在 SVG 和图片上的兼容性陷阱
SVG 内联元素（比如 <svg><path fill="red"></svg>）默认不继承父级 filter，必须显式加到自身或用 filter: url(#myFilter) 引用定义；而 PNG/JPEG 图片应用 invert() 后，alpha 通道也会被反转——半透明阴影可能变成刺眼白边。
立即学习“前端免费学习笔记（深入）”；
关键限制：
- Firefox 对 SVG 元素的
filter支持更严格，invert()在<use>引用时可能失效 - iOS Safari 15.4 之前，
filter在position: fixed元素上会触发渲染异常（内容闪动或消失） - 不要对含 CSS 动画的元素叠加多层
filter，GPU 渲染开销陡增，低端安卓机易掉帧
比 filter 更稳的“反转”方案：CSS 自定义属性 + 媒体查询
如果你真需要语义清晰、高对比、可维护的深色/浅色切换，filter 是捷径也是债。直接控制颜色变量才是正解：
:root {
--text-color: #333;
--bg-color: #fff;
}
@media (prefers-color-scheme: dark) {
:root {
--text-color: #eee;
--bg-color: #111;
}
}
body { color: var(--text-color); background: var(--bg-color); }
这样做的好处：
- 颜色值可控，不会出现
invert()导致的意外紫/青/黄噪点 - 支持无障碍对比度检测工具（如 axe DevTools）准确校验
- 动画过渡平滑：
transition: color 0.2s, background 0.2s直接生效
filter 的 invert 是视觉障眼法，不是颜色逻辑反转。真要兼顾可访问性、设计意图和长期维护，绕不开手动定义颜色变量——那几行 var(--xxx) 看似多写，其实省掉了后面所有调色、debug 和兼容性补丁的时间。
