移动端图片颜色反转是浏览器在合成阶段强制rgb通道翻转所致，绕过css变量和媒体查询；修复需同时关闭对应浏览器的强制反转开关、清除gpu缓存，并验证声明与渲染链状态。
移动端 CSS 暗黑模式下图片颜色反转，不是你写错了 filter，也不是系统 bug，而是浏览器主动启用的「强制像素级反转」逻辑在作祟——它绕过 CSS 变量、忽略 prefers-color-scheme 媒体查询，直接对 img 标签最终渲染帧做 RGB 通道翻转。
为什么 filter: invert(1) 在移动端常被浏览器“偷偷加”
UC、vivo、Safari 等移动端浏览器默认开启「智能反转」或「经典反转」辅助功能，这类机制不走 CSS 渲染管线，而是在合成阶段（Compositor）对整个图层做后处理。哪怕你没写任何 filter，<img src="logo.png"> 也会被强制套上 invert(1) hue-rotate(180deg)。
- UC 浏览器：由「强制全页深色反转」触发，连 PNG 透明通道都翻，导致 LOGO 白底变黑、alpha 区域发紫
- vivo 浏览器：「图片智能反转」模块独立运行，优先级高于页面 CSS，关闭需重启进程才生效
- Safari：「智能反转」默认排除图片，但一旦用户手动开启「经典反转」，所有
<img>和<video></video>立即反转，且无法用!important覆盖
prefers-color-scheme 对图片反转完全无效
媒体查询只控制 CSS 层叠，而图片反转发生在更底层的图形合成器（GPU Compositor）。即使你写了：
html[data-theme="dark"] img { filter: none !important; }
——该规则仍会被浏览器反转引擎忽略。因为此时图片已不是“CSS 元素”，而是“合成图层帧”。
-
@media (prefers-color-scheme: dark)只影响样式计算，不影响系统级渲染策略 - 想真正拦截，必须用
data-theme配合 JS 动态移除/重置src，或注入filter: invert(0)覆盖（仅对部分浏览器有效） - Chrome for Android 不走这套反转逻辑，所以同一页面在 Chrome 里正常，在 UC 里反色——这不是兼容性问题，是策略差异
修复时最容易漏掉的三个硬性条件
单纯关掉一个开关，大概率无效。必须同时满足：
- 关闭浏览器设置里的「强制全页深色反转」和「图片智能降亮」（UC）或「图片智能反转」（vivo），缺一不可
- 清除「CSS 样式缓存」+「GPU 渲染缓存」，否则旧 LUT 表仍在内存中复用，重启页面也不行
- 确保
<meta name="color-scheme" content="light dark">在最顶部，否则 Safari 可能跳过整条暗色渲染链，让反转逻辑进入不可控状态
真正的难点不在“怎么关”，而在“关完之后浏览器是否真把反转模块卸载了”。很多情况下，UI 开关看似关闭，但底层渲染线程仍在运行——最可靠的验证方式是打开 DevTools → Rendering → 勾选「Emulate inverted colors」，如果此时图片不再二次反色，说明浏览器层反转已停；如果还反，就得查进程级残留或换用阅读器视图绕过整条渲染链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
