<system-color>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

* Some parts of this feature may have varying levels of support.

CSS 数据类型 <system-color> 通常反映了用于网页不同部分所选的默认颜色。

然而用户代理可以提供名为强制颜色模式的无障碍特性，颜色在此模式中被限制于用户和用户代理所定义的色组中，在特定属性中改写作者所选的颜色。在强制颜色模式中，<system-color> 暴露了所选颜色，页面的其余部分可由此融入其中。强制颜色模式的一个例子为 Windows 上的高对比度模式。

在强制颜色模式中，作者应为所有颜色未被改写的属性使用 <system-color> 类型中的颜色。由此确保页面在所有属性上一致使用相同的色组。

作者可使用媒体特性 forced-colors 检测强制颜色模式。

在可使用 <color> 的任意位置均可使用 <system-color> 值。

语法

注意这些关键字虽然不区分大小写，但此处为了可读性以混合的大小写列出。

AccentColor: 突显的用户界面控件的背景颜色
AccentColorText: 突显的用户界面控件的文本颜色
ActiveText: 活跃链接的文本颜色
ButtonBorder: 控件的边框底色
ButtonFace: 控件的背景颜色
ButtonText: 控件的文本颜色
Canvas: 应用内容或文档的背景颜色
CanvasText: 应用内容或文档中的文本颜色
Field: 输入框的背景颜色
FieldText: 输入框中的文本颜色
GrayText: 禁用元素（如禁用控件）的文本颜色
Highlight: 选中项的背景颜色
HighlightText: 选中项的文本颜色
LinkText: 非活跃且未访问链接的文本颜色
Mark: 被专门标记（如用 HTML mark 元素）的文本的背景颜色
MarkText: 被专门标记（如用 HTML mark 元素）的文本颜色
VisitedText: 已访问链接的文本颜色

弃用的系统颜色关键字

在 CSS 颜色模块的先前版本中定义了下列关键字。现在不推荐在公共网页上使用这些关键字。

ActiveBorder 已弃用: 活跃窗口的边框颜色。
ActiveCaption 已弃用: 活跃窗口的标题栏颜色。应与前景色 CaptionText 一同使用。
AppWorkspace 已弃用: 多文档界面的背景颜色。
Background 已弃用: 桌面背景颜色。
ButtonHighlight 已弃用: 因有一层环绕边框而有立体感的立体元素面向光源的边框颜色。
ButtonShadow 已弃用: 因有一层环绕边框而有立体感的立体元素背向光源的边框颜色。
CaptionText 已弃用: 标题栏、尺寸框和滚动条箭头框中的文本颜色。应与背景色 ActiveCaption 一同使用。
InactiveBorder 已弃用: 非活跃窗口的边框颜色。
InactiveCaption 已弃用: 非活跃窗口的标题栏颜色。应与前景色 InactiveCaptionText 一同使用。
InactiveCaptionText 已弃用: 非活跃窗口的标题栏中的文本颜色。应与背景色 InactiveCaption 一同使用。
InfoBackground 已弃用: 提示框控件的背景颜色。应与前景色 InfoText 一同使用。
InfoText 已弃用: 提示框控件的文本颜色。应与背景色 InfoBackground 一同使用。
Menu 已弃用: 菜单背景颜色。应与前景色 MenuText 或 -moz-MenuBarText 一同使用。
MenuText 已弃用: 菜单中的文本颜色。应与背景色 Menu 一同使用。
Scrollbar 已弃用: 滚动条的背景颜色。
ThreeDDarkShadow 已弃用: 因有两层同心环绕边框而有立体感的立体元素背向光源的较暗（通常为外侧）的边框颜色。
ThreeDFace 已弃用: 因有两层同心环绕边框而有立体感的立体元素正面的背景颜色。应与前景色 ButtonText 一同使用。
ThreeDHighlight 已弃用: 因有两层同心环绕边框而有立体感的立体元素面向光源的较亮（通常为外侧）的边框颜色。
ThreeDLightShadow 已弃用: 因有两层同心环绕边框而有立体感的立体元素面向光源的较暗（通常为内侧）的边框颜色。
ThreeDShadow 已弃用: 因有两层同心环绕边框而有立体感的立体元素背向光源的较亮（通常为内侧）的边框颜色。
Window 已弃用: 窗口的背景颜色。应与前景色 WindowText 一同使用。
WindowFrame 已弃用: 窗口的边框颜色。
WindowText 已弃用: 窗口中的文本颜色。应与背景色 Window 一同使用。

示例

使用系统颜色

在此示例中有一个按钮使用 box-shadow 属性在正常情况下形成对比。在强制颜色模式中，box-shadow 被强制变为 none，故此示例使用 forced-colors 媒体特性确保有颜色合适（此例为 ButtonBorder）的边框。

HTML

html

<button class="button">按我！</button>

CSS

css

.button {
  border: 0;
  padding: 10px;
  box-shadow:
    -2px -2px 5px gray,
    2px 2px 5px gray;
}

@media (forced-colors: active) {
  .button {
    /* 改用边框，这是因为在强制颜色模式中 box-shadow 被强制变为“none” */
    border: 2px ButtonBorder solid;
  }
}

结果

规范

Specification
CSS Color Module Level 4 # css-system-colors

浏览器兼容性

参见

<color>——这些关键字所属的数据类型

Help improve MDN

Learn how to contribute

This page was last modified on ⁨2025年10月13日⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content