inverted-colors 媒体查询不被任何主流浏览器支持，从未进入CSS规范正式推荐阶段；可用替代方案是已标准化的 @media (forced-colors: active)，在Chrome 105+、Edge 105+、Firefox 96+、Safari 17.4+ 中稳定支持。
inverted-colors 媒体查询目前**不被任何主流浏览器支持**，它从未进入 CSS 规范正式推荐阶段，也未被 Chrome、Firefox、Safari 或 Edge 实现。你查不到有效的 @media (inverted-colors) 行为，所有尝试都会静默失败。
为什么你会看到 inverted-colors 相关说法
它曾短暂出现在早期 W3C 媒体查询草案（Media Queries Level 4）中，但已被移除；部分无障碍工具或系统级“强制反色”功能（如 macOS 的 Display → Invert Colors、Windows 的高对比度模式）**不触发任何 CSS 媒体查询**，而是直接由操作系统层翻转像素——此时网页 CSS 完全无感知。
- macOS “反转颜色”或“智能反转”：纯图形层操作，
prefers-color-scheme不变，inverted-colors不匹配 - Windows 高对比度模式：可能触发
@media (forced-colors: active)（已标准化），但不是inverted-colors - Android/iOS 辅助功能中的“色彩校正”或“深色反转”：同样无对应 CSS 查询
真正可用的替代方案：用 forced-colors 检测高对比度模式
如果你的目标是适配系统级高对比度/强制配色场景（例如 Windows 高对比主题、某些安卓辅助设置），应使用已落地的标准：@media (forced-colors: active)。它在 Chrome 105+、Edge 105+、Firefox 96+、Safari 17.4+ 中稳定支持。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 它表示用户启用了系统级“强制配色”，浏览器会将页面内大部分颜色替换为系统预设的高对比色板
- 此时你应避免写死
background-color或color，改用CanvasText、ButtonFace等系统颜色关键词 - 示例：
@media (forced-colors: active) { button { background-color: ButtonFace; color: ButtonText; border: 1px solid ButtonText; } }
如何应对真实“反色”需求（比如白底黑字变黑底白字）
没有媒体查询能可靠捕获“屏幕像素被系统翻转”这件事。可行路径只有两条：
立即学习“前端免费学习笔记（深入）”；
-
放弃检测，靠设计防御：避免依赖背景/文字色的绝对值，多用语义化系统颜色（
Canvas、CanvasText）、透明度叠加、mix-blend-mode: difference（仅限特定动效场景） -
用 JS +
window.matchMedia试探性 fallback：虽然不能检测反色，但可监听forced-colors和prefers-color-scheme，再结合window.devicePixelRatio或screen.colorDepth做粗略推测（不推荐，误判率高）
真正需要“反色”效果的组件（如导航栏文字过图），优先考虑 mix-blend-mode: difference 或带 backdrop-filter 的毛玻璃遮罩——它们不依赖系统状态，可控且即时生效。别把时间花在查一个根本不存在的 inverted-colors 上。
