必须分开处理深色模式和高对比度模式，因二者触发条件、生效范围及css响应方式均不同；优先级顺序为forced-colors: active > prefers-color-scheme: dark。
只靠 @media (prefers-color-scheme: dark) 无法同时适配深色模式和高对比度模式——这两者是完全独立的系统功能，触发条件、生效范围、CSS 响应方式都不同。必须分开处理，且优先级有明确顺序。
为什么 forced-color-adjust 和 prefers-color-scheme 不能混用
forced-color-adjust 只在 Windows 高对比度模式（Forced Colors Mode）下生效，此时浏览器会强制将所有元素重绘为系统限定的几组高对比色（如黑底白字、白底黑字、蓝底黄字等）。它的作用非常窄：forced-color-adjust: none 是让某个元素“退出”这个强制重绘，保留你写的 color 或 background-color；它对 macOS/iOS/Android 的深色模式完全无感。
@media (prefers-color-scheme: dark) 则只响应系统深色/浅色偏好设置，不涉及颜色强制重绘，也不影响高对比度逻辑。两者互不触发、互不覆盖。
常见翻车点：
- 给
html加了forced-color-adjust: none，误以为能“关闭深色模式”，结果系统深色下表单仍是白底 - 在
@media (prefers-color-scheme: dark)里写forced-color-adjust: auto，纯属冗余——该媒体查询下此属性根本不会被应用 - 依赖
Canvas系统色却没声明color-scheme: light dark，导致 Safari 下滚动条、<input>仍为浅色
如何正确响应高对比度模式（Forced Colors Mode）
高对比度模式下，浏览器会自动将 Canvas、CanvasText、ButtonFace 等系统语义色映射到当前高对比主题色板。你只需用这些关键字，而不是硬编码值：
- 背景统一用
background-color: Canvas，文字用color: CanvasText - 按钮边框可用
border-color: ButtonBorder，禁用状态用color: GrayText - 所有
fill/stroke属性也应使用系统色，而非#000或currentColor（后者在高对比下可能失效） - 若需局部退出强制重绘（例如品牌 logo 必须保持原色），仅对该元素设
forced-color-adjust: none，并确保其子元素不继承该声明
注意：forced-color-adjust 在 Safari 中至今不支持（截至 2026 年 8 月），所以依赖它的逻辑必须有降级：比如用 CanvasText 作为主色，forced-color-adjust: none 仅作增强。
如何让 CSS 变量同时兼容两种模式
CSS 变量本身不感知模式，但你可以用层级叠加的方式让它们“响应”：
- 在
:root中定义默认值（浅色）：--bg: #fff、--text: #333 - 用
@media (prefers-color-scheme: dark)覆盖深色变量：:root { --bg: Canvas; --text: CanvasText; } - 再用
@media (forced-colors: active)覆盖高对比变量（注意：此媒体查询优先级高于prefers-color-scheme）：:root { --bg: Canvas; --text: CanvasText; }—— 实际值往往相同，但语义更准 - 关键点：所有变量必须用系统色关键字赋值，而非十六进制；若需透明度，用
color-mix(in srgb, CanvasText 70%, transparent)（Chrome 111+），别写CanvasText80（无效）
不要把变量定义嵌套在媒体查询内部再引用——var(--bg) 在未匹配媒体查询时会 fallback，必须保证 :root 始终有定义。
最容易被忽略的初始化细节
移动端和 WebView 下，@media (prefers-color-scheme: dark) 和 @media (forced-colors: active) 的匹配时机晚于首屏渲染，极易闪屏。解决方案不是加 JS 延迟，而是提前同步：
- 在
内联轻量 JS，用window.matchMedia('(prefers-color-scheme: dark)')和window.matchMedia('(forced-colors: active)')立即读取，并设置document.documentElement.setAttribute('data-prefers-dark', 'true')和data-forced-colors - 所有关键样式规则写两遍：
[data-prefers-dark] .card（保首屏） +@media (prefers-color-scheme: dark) .card（保语义） -
<meta name="color-scheme" content="light dark">必须存在，否则 iOS Safari 下<input>、<select></select>等原生控件永不响应任何主题逻辑
系统色关键字（Canvas、CanvasText）不是“可选项”，是跨平台一致性的底线。硬编码值越少，两种模式下的维护成本越低。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
