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

System colors

システムカラーはOSやブラウザが定義するUIカラーパレットへの参照であり、ユーザーのシステム設定やアクセシビリティ設定に自動的に対応します。ダークモードやハイコントラストモードでの表示に特に有用です。カスタムUIコンポーネントをネイティブのルック&フィールに馴染ませるために使用します。

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

概要

システムカラーはOSやブラウザが定義するUIカラーパレットへの参照であり、ユーザーのシステム設定やアクセシビリティ設定に自動的に対応します。ダークモードやハイコントラストモードでの表示に特に有用です。カスタムUIコンポーネントをネイティブのルック&フィールに馴染ませるために使用します。

対応ブラウザ

デスクトップ

Chrome 1+
Edge 12+
Safari 1+
Firefox 1+

モバイル

Chrome Android 18+
Safari iOS 1+
Firefox Android 4+

基本構文

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

実務での使いどころ

  • OSテーマとの統合

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

注意点

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

アクセシビリティ

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

参考リンク