canvastext等系统色关键字需配合color-scheme声明和兜底策略才生效，否则在firefox或构建工具中静默失效；必须在中添加正确meta、仅在:root/html上声明color-scheme，且不覆盖原生控件样式。
直接用 CanvasText、ButtonFace 这类系统色关键字就能让原生控件（如 input、select、滚动条）自动适配系统主题，但前提是必须配合 color-scheme 声明和正确兜底策略，否则在 Firefox 或构建工具里会静默失效。
为什么 color: CanvasText 写了却没变色？
常见错误是只写颜色关键字，忽略两个硬性前提：
-
color-scheme必须在里加<meta name="color-scheme" content="light dark">，漏掉或写错name就完全不触发 -
color-scheme: light dark只能写在:root或html上，写在input或form里无效，也不报错 - 显式设置了
background-color、color或border-color的元素，会彻底屏蔽系统色生效——它只对“未覆盖”的原生控件起作用
如何安全使用 CanvasText 等系统色关键字？
裸写 color: CanvasText 在旧环境或高对比度模式下容易失控，必须分层兜底：
- 用
var()提供 fallback：color: var(--text, CanvasText);，并在:root中定义--text: #1a1a1a; - 高对比度模式必须显式处理：
@media (forced-colors: active) { color: ButtonText; background-color: ButtonFace; }（括号不能漏） - 构建工具（如 Lightning CSS）可能把未知系统色当无效值静默移除，CI 构建后样式消失却无提示，建议在 CI 日志中检查 CSS 输出是否含这些关键字
color-scheme 和 @media (prefers-color-scheme) 怎么分工？
二者不是替代关系，而是职责分离：
-
color-scheme是浏览器渲染引擎级开关，只影响未设色的原生控件（input边框、<progress></progress>轨道、::-webkit-scrollbar、Canvas/CanvasText等），不改你写的任何样式 -
@media (prefers-color-scheme: dark)是开发者可控层，用来改自定义区域的background-color、color等，但无法控制滚动条或 option 下拉项的默认填充色 - 测试时先清空所有自定义
input样式，确认原生表现是否已符合预期，再逐步叠加局部修饰——这是最容易被跳过的验证步骤
真正难的不是写出 color: CanvasText，而是判断这个值是否承载了你想要的语义：它不响应 @media (prefers-color-scheme: dark)，也不保证在所有辅助功能场景下可用；跨平台差异（比如 macOS Sonoma 的 ButtonFace 是浅灰，Windows 10 深色模式下却是深灰）得靠 @media (forced-colors: active) 和变量 fallback 来收口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
