无需登录 数据私有 本地保存

CSS 系统颜色演示 - Canvas/Window/Highlight 等

CSS 参考 CSS 主题 演示 系统颜色
33
0
0
0

🎨 CSS 系统颜色演示

Canvas · Window · Highlight · Mark · AccentColor 等 21 个系统颜色关键字

🖥️ 系统主题
☀️ 亮色主题 color-scheme: light
🌙 暗色主题 color-scheme: dark

🧩 实际 UI 组件预览

以下组件使用系统颜色关键字渲染，切换系统主题时外观会相应变化

按钮 ButtonFace
输入框 Field
链接 LinkText 未访问链接  ·  已访问链接
活动链接 (ActiveText)
高亮 Highlight / 标记 Mark

选中这段高亮文字看看效果

这是标记文字的效果

选中项 SelectedItem
选中项示例

灰色文本 GrayText（禁用态）

强调色 AccentColor 强调色标签

AccentColor 通常来自系统主题色

📖 常见问题与知识点

CSS 系统颜色是 CSS Color Level 4 规范中定义的一组特殊颜色关键字，它们会自动匹配用户操作系统（Windows、macOS、Linux 等）的主题设置。例如 Canvas 在亮色主题下通常是白色，在暗色主题下则变为深灰色。使用系统颜色可以让网页自然地融入用户的系统主题，无需手动编写亮色/暗色两套样式。
Canvas 代表文档/画布的背景色，通常用于网页主体背景；Window 代表操作系统窗口的背景色。在大多数系统上两者颜色相同或非常接近，但在某些主题中可能有细微差别。Canvas 是 W3C 推荐用于网页背景的系统颜色，搭配 CanvasText 使用。
直接在 CSS 属性中使用颜色关键字即可：
background: Canvas;
color: CanvasText;
border-color: ButtonBorder;
也可以配合 color-scheme 属性强制指定主题：
color-scheme: dark;（该元素内系统颜色按暗色主题解析）
CSS 系统颜色在现代浏览器中广泛支持：Chrome 89+、Firefox 88+、Safari 15+、Edge 89+ 均完整支持。其中 AccentColor 和 AccentColorText 在 Safari 15.5+ 中得到支持。对于不支持的老旧浏览器，建议提供 fallback 颜色值。
系统颜色适合需要自动适配系统主题的场景，无需编写媒体查询或 JS 检测。CSS 变量则适合需要精细控制品牌色的场景。两者可以结合使用：用系统颜色作为基础层，用 CSS 变量覆盖特定元素。例如：--bg: Canvas; background: var(--bg);
Highlight 用于文本选区（鼠标拖选文字时的背景色），SelectedItem 用于列表或菜单中被选中项目的背景色。两者在大多数系统中颜色相近但不完全相同。Highlight 通常更偏蓝色调，SelectedItem 可能更偏灰色调。
Mark 源自 HTML <mark> 元素的默认样式，用于永久性标记文本（如搜索结果高亮）。Highlight 用于临时性选中文本。在亮色主题下 Mark 通常是黄色，Highlight 是蓝色；暗色主题下两者都会相应变暗。
color-scheme CSS 属性告诉浏览器该元素应使用哪种配色方案渲染系统颜色。可选值：light、dark、light dark（同时支持）。例如在页面根元素设置 color-scheme: light dark; 可以让整个页面自适应系统主题。也可以在任意子元素上单独设置，实现局部主题切换。
🔧 相关工具