<system-color>

<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: 活动窗口边框。
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: 对于因两层同心环绕边框而呈现 3D 效果的 3D 元素的面部背景颜色。应与 ButtonText 前景色一起使用。
ThreeDHighlight: 对于因两层同心环绕边框而呈现 3D 效果的 3D 元素，面向光源的两条边框中较亮（通常是外层）的颜色。
ThreeDLightShadow: 对于因两层同心环绕边框而呈现 3D 效果的 3D 元素，面向光源的两条边框中较暗（通常是内层）的颜色。
ThreeDShadow: 对于因两层同心环绕边框而呈现 3D 效果的 3D 元素，背离光源的两条边框中较亮（通常是内层）的颜色。
Window: 窗口背景。应与 WindowText 前景色一起使用。
WindowFrame: 窗口框架。
WindowText: 窗口中的文字。应与 Window 背景颜色一起使用。

示例

使用系统颜色

在本例中，我们有一个按钮，它通常使用 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 颜色模块级别 4 # css-system-colors

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

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