system-ui 是 css 的字体族关键字，不是颜色值；color: system-ui 无效且被浏览器忽略，系统文字颜色需用 prefers-color-scheme 媒体查询配合明确色值实现跨平台适配。
什么是 system-ui 字体，它和颜色无关
直接说结论：system-ui 是 CSS 的字体族（font-family 值），不是颜色关键字，也不能用来定义“系统字体颜色”。不存在 color: system-ui 这种写法，浏览器会忽略它。很多人搜“system-ui 颜色”是因为混淆了「系统字体」和「系统语义颜色」（比如 macOS 的 control-color 或 Windows 的高对比度主题色），但后者在标准 CSS 中没有等效的跨浏览器颜色值。
想用系统默认文字色？别依赖不存在的 system-ui 颜色
CSS 没有定义类似 system-text-color 的标准关键字。浏览器默认文本色是 black（或更准确地说，是用户代理样式表中 color: -webkit-text / color: CanvasText 等内部值），但这些不是可移植的 CSS 值：
-
CanvasText是 CSS Color Level 4 提案中的系统颜色，目前仅 Safari 和部分 Chromium 版本支持（Firefox 仍不支持） -
-webkit-text是 WebKit 私有值，Chrome/Edge 已弃用，不应使用 - 直接写
color: initial或不设color，会回退到 UA 默认值，但该值受系统主题、辅助功能设置（如高对比度模式）影响，且无法显式控制明暗适配
真正可行的跨浏览器系统色方案：用 prefers-color-scheme + 语义化 fallback
如果你的目标是让文字色自动适配深色/浅色系统主题，正确路径是结合媒体查询与明确的颜色值：
body {
color: #333; /* 浅色主题 fallback */
}
<p>@media (prefers-color-scheme: dark) {
body {
color: #ddd; /<em> 深色主题 fallback </em>/
}
}</p>
这样做的原因：
-
prefers-color-scheme在 Chrome 76+、Firefox 67+、Safari 12.1+ 全面支持，兼容性远超任何系统颜色关键字 - 避免依赖未标准化的
CanvasText或ButtonFace等值——它们行为不一致（例如 Windows 暗色模式下CanvasText可能仍是深灰而非白） - 设计可控：你可以按实际对比度需求选色（如 WCAG AA/AAA 要求），而不是赌系统返回的“默认色”是否可读
顺带澄清：system-ui 字体本身怎么用才安全
虽然它和颜色无关，但常被一起误搜。正确用法是作为 font-family 的首项，并附带合理 fallback：
h1 {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
注意点：
- 必须把
system-ui放最前，否则旧浏览器（如 IE）会跳过整个声明 - 不能省略
sans-serif末尾兜底，否则某些 Linux 系统可能渲染为等宽字体 - 它只解决字体选择，不影响颜色、行高、字重等其他样式
系统颜色这件事，没有银弹。靠一个关键字自动适配所有平台所有辅助设置，目前做不到。老实用媒体查询 + 明确色值，才是稳定落地的方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
