canvastext不是自动适配的万能文字色，它不继承、不响应currentcolor、不能参与color-mix()，也不随prefers-color-scheme切换，且跨平台rgb值差异大，高对比度模式下可能被覆盖或丢弃；可靠方案是color-scheme配合@media查询，用css自定义变量分层控制，并以canvas/canvastext仅作forced-colors兜底。
CanvasText不是“自动适配”的万能文字色
直接写 color: CanvasText; 看似省事，但实际效果极不可控：它不继承、不响应 currentColor、不能参与 color-mix() 计算，更不会随 @media (prefers-color-scheme) 主动切换。macOS 和 Windows 下解析出的 RGB 值可能相差极大，高对比度模式下还可能被系统强制覆盖甚至丢弃整条声明。
color-scheme + media query 才是可靠组合
color-scheme 本身不改你的样式，只告诉浏览器“我支持深色模式”，从而让原生控件（如 <input> 边框、滚动条）用系统语义色渲染。要让它生效，必须同时满足：
-
<meta name="color-scheme" content="light dark">放在最前面（紧接<meta charset>后） -
color-scheme: light dark;只能写在:root或html上，子元素上写无效 - 自定义样式（比如
background-color: #fff）会完全覆盖系统色行为——想保留适配能力，就得用background-color: Canvas;这类系统关键字，而非硬编码值
真正推荐的做法：用 CSS 自定义变量 + 媒体查询
系统色关键词（Canvas、CanvasText）应仅作为 fallback 使用，主逻辑必须靠语义化变量控制。例如：
:root {
--bg-surface: #fff;
--text-primary: #1a1a1a;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-surface: #1e1e1e;
--text-primary: #e0e0e0;
}
}
@media (forced-colors: active) {
:root {
--bg-surface: Canvas;
--text-primary: CanvasText;
}
}
.card {
background-color: var(--bg-surface);
color: var(--text-primary);
}
这样既能精准控制各语义层颜色，又能通过 forced-colors 媒体查询兜底高对比度场景——而系统色只出现在最窄的兜底分支里，不污染主流程。
别忘了 forced-colors 模式下的 display: none 风险
当用户开启 Windows 高对比度模式时，浏览器会启用 forced-colors: active，此时某些 CSS 属性（如 background-image、border-radius）会被强制禁用。更隐蔽的问题是：如果你写了 color: CanvasText !important;，部分旧版 Edge 会因无法解析而丢弃整条规则，导致文字变成默认黑色且无背景，瞬间违反 WCAG 对比度要求。所以所有关键颜色都必须有明确的 var(--text-primary) 回退，且变量定义必须在 :root 中完成，不能依赖 JS 注入或条件计算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
