代替

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

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

仕様書

• [3] CSS Color Module Level 3 (2011-06-07 21:54:38 +09:00 版) http://www.w3.org/TR/2011/REC-css3-color-20110607/#css2-system

システム色の一覧

[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 では禁止されています。

歴史

関連

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

例

[37]

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

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

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

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

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

[46] CSS System colors ( (Simon Pieters 著, 2013-08-30 19:21:05 +09:00 版)) http://lists.w3.org/Archives/Public/www-archive/2013Aug/0026.html

[47] gecko-dev/widget/windows/nsLookAndFeel.cpp at master · mozilla/gecko-dev ( (2014-02-05 05:07:46 +09:00 版)) https://github.com/mozilla/gecko-dev/blob/master/widget/windows/nsLookAndFeel.cpp

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

[49] <color> - CSS | MDN ( (2014-01-15 13:15:09 +09:00 版)) 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著, 2018-02-20 01:30:49 +09:00) 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 (2018-05-08 21:34:04 +09:00) 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 (2018-05-08 21:34:55 +09:00) https://github.com/w3c/csswg-drafts/issues/2089

[53] system colors posts from 2001 (L. David Baron著, 2019-04-12 14:11:55 +09:00) https://lists.w3.org/Archives/Public/www-archive/2019Apr/0000.html