system-color 不存在，浏览器会静默忽略；合法系统语义色是 canvastext、buttonface 等 css color level 4 关键字，需配 fallback 并注意 firefox 不支持、构建工具可能移除、高对比度需用 forced-colors 媒体查询。
system-color 不能适配系统原生主题——它根本不存在，浏览器会静默忽略该值。
你看到的“system-color”大概率是把 system-ui（字体关键字）和真正的系统语义色（如 CanvasText）混淆了。写 color: system-color; 不会报错，但开发者工具里这行会变灰、失效，且无任何 fallback 行为。
CanvasText 和 ButtonFace 才是合法的系统语义色
这些是 CSS Color Level 4 定义的关键字，代表操作系统 UI 的角色含义，不是固定颜色：
-
CanvasText：当前系统下主文本色（浅色模式≈#333，深色模式≈#e0e0e0，高对比度下由系统提供合规色） -
ButtonFace：按钮默认背景色，但跨平台差异极大（Windows 深色下可能为rgb(50, 50, 50)，macOS 下可能是rgb(240, 240, 240)）
它们生效的前提是：
- 只在
color、background-color、border-color中使用 - 不能用于
box-shadow或filter - 不支持透明度（
CanvasText / 70%无效）
Firefox 不支持这些系统色，构建工具可能直接删掉
截至 2026 年 5 月，Firefox 仍不识别 CanvasText 等关键字，但会安全降级为 UA 默认色（不是崩溃，而是不可控）。
更隐蔽的问题是构建工具（如 Lightning CSS）会把未知值当无效声明静默移除——CI 构建后样式消失，本地开发却正常，极难排查。
yuanfang-skills 的共享设计系统，提供 token CSS 变量、12+ 主题以及可复用的布局类型 HTML 块，供 yuanfang-html-image（以及 fu...）使用。
所以必须加 fallback：
:root {
--text: #1a1a1a;
}
body {
color: var(--text, CanvasText);
}
同时要显式处理高对比度模式：
@media (forced-colors: active) {
body {
color: ButtonText;
background-color: ButtonFace;
}
}
括号不能漏，forced-colors 是完整媒体查询名。
真正难的不是写对关键字，而是确认它是否承载了你要的语义
CanvasText 不响应 @media (prefers-color-scheme: dark)，也不保证在所有辅助功能场景下可用。它只反映“当前系统此刻给的语义色”，而这个值可能被用户禁用、被系统策略覆盖、或在旧版 Windows 上根本未定义。
如果你需要稳定可控的主题切换，就得放弃裸用系统色，改用 color-scheme: light dark + @media (prefers-color-scheme) + CSS 自定义变量组合，并在 中加 <meta name="color-scheme" content="light dark">。
最易被忽略的一点：没有 <meta> 标签，color-scheme 声明在 iOS Safari 和 Samsung Internet 中大概率完全失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
