[1] システム色System Colorsは、システムにおいて UI の構成要素に与えられている色を表すキーワードです。

代替

[2] システム色は CSS2 で導入されましたが、 CSS3 で非推奨 >>3 とされています。

[38] システム色は複数の特性で特定の組み合わせを指定することにより当該システムの UI を再現しようとするものですが、色も含めた様々な見た目を一括で指定できる 'appearance' 特性を使う方が望ましいとされています >>3。

仕様書

システム色の一覧

[36] システム色の名前と意味は次の通りです >>3。

[8] ActiveBorder
活性窓の境界線の色です。
[9] ActiveCaption
活性窓の見出しの色です。
[10] AppWorkspace
MDI の背景色です。
[11] Background
デスクトップの背景色です。
[12] ButtonFace
周りに境界線の層が1つあって三次元に見える三次元要素の表面faceの部分の背景色です。
[13] ButtonHighlight
周りに境界線の層が1つあって三次元に見える三次元要素の光源側の部分の背景色です。
[14] ButtonShadow
周りに境界線の層が1つあって三次元に見える三次元要素の光源から遠い側の部分の背景色です。
[15] ButtonText
押しボタンの文字色です。
[16] CaptionText
見出し、サイズ箱、スクロールバーの矢印箱の文字色です。
[17] GrayText
灰色化された (無効状態の) 文字色です。 現在ディスプレイのドライバーが立体灰色solid gray colorに対応していないなら、 #000 (黒) です。
[18] Highlight
制御子中で選択されている項目の色です。
[19] HighlightText
制御子中で選択されている項目の文字色です。
[20] InactiveBorder
非活性窓の枠線の色です。
[21] InactiveCaption
非活性窓の見出しの色です。
[22] InactiveCaptionText
非活性窓の見出しの文字色です。
[23] InfoBackground
ツールチップの背景色です。
[24] InfoText
ツールチップの文字色です。
[25] Menu
メニューの背景色です。
[26] MenuText
メニューの文字色です。
[27] Scrollbar
スクロールバーの灰色領域gray areaの色です。
[28] ThreeDDarkShadow
周りに同心境界線の層が2つあって三次元に見える三次元要素の光源から遠い部分の暗い方 (通常は外側) の色です。
[29] ThreeDFace
周りに同心境界線の層が2つあって三次元に見える三次元要素の表面faceの背景色です。
[30] ThreeDHighlight
周りに同心境界線の層が2つあって三次元に見える三次元要素の光源に近い部分の明るい方 (通常は外側) の色です。
[31] ThreeDLightShadow
周りに同心境界線の層が2つあって三次元に見える三次元要素の光源に近い部分の暗い方 (通常は内側) の色です。
[32] ThreeDShadow
周りに同心境界線の層が2つあって三次元に見える三次元要素の光源から遠い部分の明るい方 (通常は内側) の色です。
[33] Window
窓の背景色です。
[34] WindowFrame
窓の枠の色です。
[35] WindowText
窓の文字色です。

構文

[6] システム色は CSS のキーワードとして表します。システム色は <color> を使える場所で使うことができます。

[7] システム色は大文字・小文字不区別ですが、仕様書において記述されている、 読みやすい大文字と小文字を混合した書き方を使うべきとされています >>3。

レンダリング

[4] 相当する値を持たないシステムにあっては、最も近いシステム色の値とするか、または何らかの既定の色とするべきです。 >>3

プロファイル

[5] CSS のプロファイルによってはシステム色に全く対応していません。 >>3

文脈

[54] SVG SVG-in-OpenType では禁止されています。

歴史

CSS2

[40] システム色は CSS 2.0 で導入されました。

[41] CSS 2.1 には、 CSS3 では非推奨となっている、と注意書きがあります >>39。

関連

[42] 同様にシステムにおけるフォント設定を表している「システム・フォント」を 'font' 特性に指定できます。

例

[37] 

p { color: WindowText; background-color: Window }

段落を窓の前景色と背景色によりレンダリングします >>3。

[43] CSS Basic User Interface Module Level 3 (CSS3 UI) ( (Tantek Çelik 著, 版)) http://www.w3.org/TR/2012/WD-css3-ui-20120117/#changes-list

[44] [css-colors] Specify the System Colors colors ( (Simon Pieters 著, 版)) http://lists.w3.org/Archives/Public/www-style/2013Aug/0667.html

[45] [Fwd: System colors] ( (L. David Baron 著, 版)) http://lists.w3.org/Archives/Public/www-archive/2013Aug/0027.html

[46] CSS System colors ( (Simon Pieters 著, 版)) http://lists.w3.org/Archives/Public/www-archive/2013Aug/0026.html

[47] gecko-dev/widget/windows/nsLookAndFeel.cpp at master · mozilla/gecko-dev ( ( 版)) https://github.com/mozilla/gecko-dev/blob/master/widget/windows/nsLookAndFeel.cpp

[48] GetSysColor function (Windows) ( ( 版)) http://msdn.microsoft.com/en-us/library/windows/desktop/ms724371(v=vs.85).aspx

[49] <color> - CSS | MDN ( ( 版)) https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#System_Colors

[50] [css-color-3] Remove old note for the appearance property (GloverDonovan著, ) https://github.com/w3c/csswg-drafts/commit/43b163e4445b9935c0bae38f1a5b0f803d25ff69

[51] [css-color-3] Remove old note for the appearance property by GloverDonovan · Pull Request #2334 · w3c/csswg-drafts () https://github.com/w3c/csswg-drafts/pull/2334

[52] [css-color-3] Dangling link to `appearance` property in CR of Color-3 · Issue #2089 · w3c/csswg-drafts () https://github.com/w3c/csswg-drafts/issues/2089

[53] system colors posts from 2001 (L. David Baron著, ) https://lists.w3.org/Archives/Public/www-archive/2019Apr/0000.html