应弃用CSS系统颜色关键字，因其映射不一致、无法测对比度、不支持alpha及HSL/RGB；须改用prefers-color-scheme媒体查询配合CSS变量，并单独处理forced-colors: active场景。
别用系统颜色关键字匹配操作系统主题——它不可靠、不可测、不合规，WCAG 检查直接报错。
为什么 Canvas 或 HighlightText 不能用于主题适配
这些 CSS System Colors 是 CSS 2.1 的遗留产物，并非为现代主题系统设计。它们在不同浏览器中映射结果不一致：Chrome 可能把 ButtonFace 解析为 #f0f0f0，Firefox 返回 #c0c0c0，Safari 可能直接忽略并 fallback 到 initial。更关键的是，它们无法通过工具计算对比度，axe 和 Lighthouse 都会标记为 “contrast cannot be determined”。
- Windows 高对比度模式下，
CanvasText确实常为#ffffff，但 macOS VoiceOver + Dark Mode 下它可能变成浅灰，文字完全不可读 -
color: LinkText;在无高对比设置的 Windows 上可能渲染为低饱和蓝，与浅色背景对比度仅 2.1:1，不满足 WCAG AA - 所有系统色都不支持 alpha，写
CanvasAlpha无效；也无 HSL/RGB 等可编程形式，无法做亮度微调或动画
真正可用的替代路径：用 prefers-color-scheme + 明确色值
必须放弃系统关键字，改用可验证、可控制、可测试的颜色方案。
- 在
:root中先定义默认值：--text-primary: #333;、--bg-surface: #fff; - 用成对媒体查询覆盖：
@media (prefers-color-scheme: light) { :root { --text-primary: #333; } }和@media (prefers-color-scheme: dark) { :root { --text-primary: #e0e0e0; } }—— 漏掉任意一个，变量就未定义 - 每个
var()必须带 fallback：color: var(--text-primary, #333);，防止 JS 注入失败或 SSR 渲染时变量为空 - 原生控件（
input、select、滚动条）需额外加和:root { color-scheme: light dark; }，否则不会自动变色
高对比度模式要单独处理，不是 prefers-color-scheme 的子集
forced-colors: active 是独立机制，和深色/浅色模式无关。用户可能开着 Windows 高对比黑底白字，但系统主题仍是“浅色”，prefers-color-scheme: light 会命中，而 forced-colors 不会触发。
- 必须单独写
@media (forced-colors: active) { ... }块，里面只用Canvas、CanvasText等系统色——这是唯一被允许的场景 - 该媒体查询内必须剥离所有
box-shadow、background-image和自定义background-color，否则会被浏览器强制覆盖或忽略 - 按钮边框要显式设为
1px solid ButtonBorder，不能依赖默认边框或透明边框，否则高对比下会消失 - 别试图在
forced-colors块里混用prefers-color-scheme，两者不嵌套、不叠加，浏览器按优先级顺序匹配
最易被忽略的一点：系统色只在 forced-colors: active 下才具备语义一致性；其他任何场景下使用，都是在赌浏览器实现，而不是在做无障碍设计。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
