@media (inverted-colors: inverted) 不被任何主流浏览器支持，已从w3c标准中移除；应改用已标准化的 @media (forced-colors: active) 检测高对比度模式，并使用系统色关键词适配。
@media (inverted-colors: inverted) 根本不起作用——它不会匹配任何浏览器，也不会触发任何样式，所有尝试都会静默失败。
@media (inverted-colors: ...) 在所有主流浏览器中均未实现
- Chrome、Firefox、Safari、Edge 都不支持
inverted-colors媒体查询 - 它曾短暂出现在 W3C Media Queries Level 4 草案里，但已被正式移除，从未进入推荐标准
- DevTools 中写上
@media (inverted-colors: inverted) { ... }，控制台不会报错，但规则永远不会生效 - 你无法靠它检测 macOS 的“智能反转”、Windows 的“高对比度反色”、iOS/Android 的辅助色彩校正
真实系统反色行为根本不走 CSS 媒体查询路径
- macOS “显示 → 反转颜色”：纯 GPU 层像素翻转，
prefers-color-scheme不变，inverted-colors不触发，网页完全无感知 - Windows 高对比度模式（含反色主题）：可能激活
@media (forced-colors: active)，但不是inverted-colors - Android/iOS 辅助功能里的“色彩校正”或“深色反转”：同样没有对应 CSS 查询机制
应该用 @media (forced-colors: active) 替代（且仅用于高对比度场景）
- 这是唯一已标准化、跨浏览器稳定支持的方案（Chrome 105+、Edge 105+、Firefox 96+、Safari 17.4+）
- 它表示系统已强制接管配色，此时：
-
background-color和color声明会被浏览器忽略 - 必须改用
CanvasText、ButtonFace、ButtonText等系统色关键词 - SVG 元素需加
forced-color-adjust: none（Safari 还需配合color-scheme: light dark声明）
-
示例：
@media (forced-colors: active) {
body {
color: CanvasText;
background-color: Canvas;
}
button {
background-color: ButtonFace;
color: ButtonText;
}
}
如果你真需要应对“白底黑字变黑底白字”这类视觉反转
没有可靠 CSS 方案。可行路径只有两条：
-
设计防御优先：避免写死色值；多用语义化系统色；慎用
mix-blend-mode: difference（仅限局部动效，兼容性差） -
JS 试探性 fallback：监听
forced-colors+prefers-color-scheme，再结合window.devicePixelRatio或screen信息做粗略推测（注意：这不是检测，只是启发式规避）
最常被忽略的一点：很多人以为开了“反转颜色”就能靠媒体查询响应，实际上系统根本没给网页留接口——你得接受这个限制，从渲染鲁棒性入手，而不是执着于“检测”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
