Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

System colors

<system-color> は CSS のデータ型で、ウェブページの様々な部分に通常使用する既定の色を反映します。

しかし、ユーザーエージェントは強制色モードと呼ばれるアクセシビリティ機能を提供することができ、このモードでは色はユーザーとユーザーエージェントが定義したパレットに制限され、特定のプロパティで作者が選択した色を上書きします。強制色モードでは、 <system-color> は選択された色を公開するので、ページの残りの部分はそれらと統合することができます。強制色モードの例としては、 Windows の高コントラストモードがあります。

強制色モードでは、作者は <system-color> 型の色を、色がオーバーライドされるプロパティの設定にはないすべてのプロパティに使用するべきです。これにより、ページがすべてのプロパティで一貫して同じ色パレットを使用することを保証します。

作者は forced-colors メディア特性を使用して、強制色モードを検出することができます。

<system-color> 値は、 <color> を使用できる場所であればどこでも使用することができます。

システムカラーテーマ対応

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.types.color.system-color
1
12
1
1
18
1
CSS タイプ
system-color.accentcolor accentcolortext

`AccentColor` と `AccentColorText`
115
115
103
16.5
115
16.5
system-color.buttonborder

`ボタンボーダー`
101
101
109
101
system-color.mark

「マーク」
102
102
109
102
system-color.marktext

`マークテキスト`
102
102
109
102
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 1件
実装メモ
  • フォールバックのみをサポートします: アクセント カラー (macOS の外観パネル) が「マルチカラー」に設定されている場合のネイティブ カラー。 iOS では、青色のアクセント カラーに戻ります
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 1件
実装メモ
  • フォールバックのみをサポートします: アクセント カラー (macOS の外観パネル) が「マルチカラー」に設定されている場合のネイティブ カラー。 iOS では、青色のアクセント カラーに戻ります

基本構文

CSS 
.button {
  background-color: ButtonFace;
  color: ButtonText;
  border-color: ButtonBorder;
}

ライブデモ

button typecol-

CSS button typecol- demo.

プレビュー全画面表示

Canvas type

CSS Canvas type demo.

プレビュー全画面表示

Highlight type

CSS Highlight type demo.

プレビュー全画面表示

実務での使いどころ

  • OSテーマとの統合

    カスタムUIコンポーネントのカラーをOSのシステムカラーに合わせ、ネイティブのような見た目を実現します。

注意点

  • システムカラーの実際の値はOS・ブラウザ・ユーザー設定によって異なるため、表示結果が環境ごとに変わります。

アクセシビリティ

  • システムカラーは強制カラーモード（Windows ハイコントラスト）で適切に機能するため、アクセシビリティ向上に貢献します。

参考リンク