<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 上檢視此頁面 • 報告此內容問題