如何通过HTML的CSS inverted-colors媒体查询检测系统反色模式做样式适配-html教程-PHP中文网

inverted-colors 媒体查询不被任何主流浏览器支持，从未进入CSS规范正式推荐阶段；可用替代方案是已标准化的 @media (forced-colors: active)，在Chrome 105+、Edge 105+、Firefox 96+、Safari 17.4+ 中稳定支持。

如何通过html的css inverted-colors媒体查询检测系统反色模式做样式适配

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+ 中稳定支持。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 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 做粗略推测（不推荐，误判率高）