<system-color>

Baseline 广泛可用 *

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

* 此特性的某些部分可能存在不同级别的支持。

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

然而，用户代理可以提供一个名为强制颜色模式的辅助功能，在该模式下，颜色被限制在用户和用户代理定义的调色板中，覆盖作者在某些属性中的颜色选择。在强制颜色模式下，<system-color>会公开所选颜色，以便页面的其余部分可以与之集成。强制颜色模式的一个示例是Windows 上的高对比度模式。

在强制颜色模式下，作者应将<system-color>类型中的颜色用于不属于颜色被覆盖的属性集的所有属性。这可确保页面在所有属性中一致使用相同的调色板。

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

<system-color>值可以在任何可以使用<color>的地方使用。

语法

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

根据您的设置，表格中显示的示例颜色可能会发生变化。您还可以使用不同的浏览器、操作系统和系统设置查看此页面，以检查差异。

关键字	描述	示例
`AccentColor`	强调用户界面控件的背景。
`AccentColorText`	强调用户界面控件的文本。
`ActiveText`	活动链接的文本。
`ButtonBorder`	控件的基本边框颜色。
`ButtonFace`	控件的背景颜色。
`ButtonText`	控件的文本颜色。
`Canvas`	应用程序内容或文档的背景。
`CanvasText`	应用程序内容或文档中的文本颜色。
`Field`	输入字段的背景。
`FieldText`	输入字段中的文本。
`GrayText`	禁用项的文本颜色（例如，禁用的控件）。
`Highlight`	选定项的背景。
`HighlightText`	选定项的文本颜色。
`LinkText`	非活动、未访问链接的文本。
`Mark`	已特别标记的文本的背景（例如，通过 HTML `mark` 元素）。
`MarkText`	已特别标记的文本（例如，通过 HTML `mark` 元素）。
`SelectedItem`	选定项的背景，例如，选中的复选框。
`SelectedItemText`	选定项的文本。
`VisitedText`	已访问链接的文本。

已废弃的系统颜色关键字

以下关键字在 CSS 颜色模块的早期版本中定义。现在已废弃用于公共网页。

关键字	描述	替换
`ActiveBorder`	活动窗口边框	`ButtonBorder`
`ActiveCaption`	活动窗口标题。应与 `CaptionText` 作为前景色一起使用。	`Canvas`
`AppWorkspace`	多文档界面的背景颜色。	`Canvas`
`Background`	桌面背景。	`Canvas`
`ButtonHighlight`	对于由于周围边框层而显示为 3D 的 3D 元素，朝向光源的边框颜色。	`ButtonFace`
`ButtonShadow`	对于由于周围边框层而显示为 3D 的 3D 元素，远离光源的边框颜色。	`ButtonFace`
`CaptionText`	标题、大小框和滚动条箭头框中的文本。应与 `ActiveCaption` 背景颜色一起使用。	`CanvasText`
`InactiveBorder`	非活动窗口边框。	`ButtonBorder`
`InactiveCaption`	非活动窗口标题。应与 `InactiveCaptionText` 前景色一起使用。	`Canvas`
`InactiveCaptionText`	非活动标题中文本的颜色。应与 `InactiveCaption` 背景颜色一起使用。	`GrayText`
`InfoBackground`	工具提示控件的背景颜色。应与 `InfoText` 前景色一起使用。	`Canvas`
`InfoText`	工具提示控件的文本颜色。应与 `InfoBackground` 背景颜色一起使用。	`CanvasText`
`Menu`	菜单背景。应与 `MenuText` 或 `-moz-MenuBarText` 前景色一起使用。	`Canvas`
`MenuText`	菜单中的文本。应与 `Menu` 背景颜色一起使用。	`CanvasText`
`Scrollbar`	滚动条的背景颜色。	`Canvas`
`ThreeDDarkShadow`	对于由于两层同心边框而显示为 3D 的 3D 元素，远离光源的两个边框中较暗（通常是外部）的颜色。	`ButtonBorder`
`ThreeDFace`	对于由于两层同心边框而显示为 3D 的 3D 元素，正面的背景颜色。应与 `ButtonText` 前景色一起使用。	`ButtonFace`
`ThreeDHighlight`	对于由于两层同心边框而显示为 3D 的 3D 元素，朝向光源的两个边框中较亮（通常是外部）的颜色。	`ButtonBorder`
`ThreeDLightShadow`	对于由于两层同心边框而显示为 3D 的 3D 元素，朝向光源的两个边框中较暗（通常是内部）的颜色。	`ButtonBorder`
`ThreeDShadow`	对于由于两层同心边框而显示为 3D 的 3D 元素，远离光源的两个边框中较亮（通常是内部）的颜色。	`ButtonBorder`
`Window`	窗口背景。应与 `WindowText` 前景色一起使用。	`Canvas`
`WindowFrame`	窗口框架。	`ButtonBorder`
`WindowText`	窗口中的文本。应与 `Window` 背景颜色一起使用。	`CanvasText`

示例

使用系统颜色

在此示例中，我们有一个按钮，通常使用 box-shadow 属性获得对比度。在强制颜色模式下，box-shadow 被强制为 none，因此示例使用 forced-colors 媒体特性来确保存在适当颜色（在本例中为 ButtonBorder）的边框。

HTML

html

<button class="button">Press me!</button>

CSS

css

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

@media (forced-colors: active) {
  .button {
    /* Use a border instead, since box-shadow
    is forced to 'none' in forced-colors mode */
    border: 2px ButtonBorder solid;
  }
}

结果

规范

规范
CSS 颜色模块第四版 # css-system-colors

浏览器兼容性

另见

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

帮助改进 MDN

了解如何贡献

本页面最后由 MDN 贡献者于 2025 年 10 月 10 日修改。

在 GitHub 上查看此页面 • 报告此内容问题