color-scheme CSS 屬性和對應的中繼標記可讓開發人員選擇為網頁啟用使用者代理程式樣式表的主題專屬預設值。
背景
prefers-color-scheme 使用者偏好設定媒體功能
prefers-color-scheme 使用者偏好設定媒體功能可讓開發人員完全掌控網頁外觀。如果您對這項功能不太熟悉，請閱讀我的文章 prefers-color-scheme：大家好，我是老朋友，我在片中記錄瞭如何打造出色的深色模式體驗，
文章中只有短暫提及的一件謎題是 color-scheme CSS 屬性，以及相同名稱的對應中繼標記。這些版面配置可讓您選擇為頁面採用使用者代理程式樣式表的主題專屬預設值，例如表單控制項、捲軸和 CSS 系統顏色，讓網頁成為開發人員更輕鬆。同時，這項功能可防止瀏覽器自行套用任何轉換。
瀏覽器支援
prefers-color-scheme
color-scheme
使用者代理程式樣式表
在繼續之前，我先簡單說明一下使用者代理程式樣式表。大多數情況下，您可以將「使用者代理程式」 (UA) 這個字想成是「browser」的簡便方法。通用 Analytics (分析) 樣式表會決定網頁的預設外觀和風格。顧名思義，通用 Analytics (分析) 樣式表是取決於相關通用 Analytics (分析)。您可以查看 Chrome (以及 Chromium) 的通用 Analytics (分析) 樣式表，並與 Firefox 或 Safari (以及 WebKit) 進行比較。一般來說，通用 Analytics (分析) 樣式表對大部分的內容都有共識。例如，它們都會將連結設為藍色、一般文字，以及背景顏色為白色，但也有一些重要 (有時令人困擾) 的差異，例如樣式表單控制項的方式。
進一步查看 WebKit 的通用 Analytics (分析) 樣式表以及深色模式的運作方式。(在樣式表中對「dark」執行全文搜尋)。視深色模式是否開啟而定，樣式表的預設值會有所不同。為了說明，以下其中一個 CSS 規則會使用 :matches 虛擬類別和 WebKit 內部變數 (例如 -apple-system-control-background)，以及 WebKit-internal 預先處理指令指令 #if defined：
input,
input:matches([type="password"], [type="search"]) {
-webkit-appearance: textfield;
#if defined(HAVE_OS_DARK_MODE_SUPPORT) &&
HAVE_OS_DARK_MODE_SUPPORT
color: text;
background-color: -apple-system-control-background;
#else
background-color: white;
#endif
/* snip */
}
您會發現上述的 color 和 background-color 屬性有一些非標準值。
text 和 -apple-system-control-background 都不是有效的 CSS 顏色。這是 WebKit-internal 的語意顏色。
反之，CSS 採用標準化語意系統顏色。
您可以在 CSS 色彩模組層級 4 中指定。舉例來說，Canvas (請勿與 <canvas> 標記混淆) 用於應用程式內容或文件的背景，CanvasText 則用於應用程式內容或文件中的文字。兩者相互搭配，請勿單獨使用。
通用 Analytics (分析) 樣式表可以使用自己的專屬或標準化語意系統顏色，決定 HTML 元素預設轉譯方式。如果作業系統設為深色模式或使用深色主題，則 CanvasText (或 text) 會有條件地設為白色，而 Canvas (或 -apple-system-control-background) 則會設為黑色。接著，通用 Analytics (分析) 樣式表只會指派下列 CSS 一次，並涵蓋淺色和深色模式。
/**
Not actual UA stylesheet code.
For illustrative purposes only.
*/
body {
color: CanvasText;
background-color: Canvas
}
color-scheme CSS 屬性
CSS 色彩調整項模組層級 1 規格導入了使用者代理程式所自動調整色彩的模型和控制項，目標為處理使用者偏好設定 (例如深色模式、對比調整或特定想要的色彩配置)。
當中定義的 color-scheme 屬性可讓元素指出適合以哪種色彩配置方式轉譯。這些值會與使用者的偏好設定交涉，進而選擇會影響使用者介面 (UI) 的色彩配置，例如表單控制項和捲軸的預設顏色，以及 CSS 系統的顏色值。目前所支援的值如下：
normal表示該元素完全不知道色彩配置，因此元素應使用瀏覽器的預設色彩配置轉譯。[ light | dark ]+表示該元素知道並且能夠處理列出的色彩配置，並表示元素之間的偏好順序。
在清單中，light 代表淺色的色彩配置，採用淺色背景顏色和深色前景顏色，dark 則代表相反，其顏色是深色背景和淺色前景顏色。
對所有元素而言，如果算繪有色彩配置，則所有瀏覽器提供的 UI 中元素的顏色都應與色彩配置的意圖相符。例如捲軸、拼字檢查底線、表單控制項等。
在 :root 元素上，如果使用色彩配置進行算繪，也必須影響畫布的介面顏色 (也就是全域背景顏色)、color 屬性的初始值和系統顏色的使用值，以及可視區域的捲軸。
/*
The page supports both dark and light color schemes,
and the page author prefers dark.
*/
:root {
color-scheme: dark light;
}
color-scheme 中繼標記
顯示 color-scheme CSS 屬性時，必須先下載 CSS (如果透過 <link rel="stylesheet"> 參照) 並且剖析。
為了協助使用者代理程式立即以所需色彩配置轉譯網頁背景，也可以在 <meta name="color-scheme"> 元素中提供 color-scheme 值。
<!--
The page supports both dark and light color schemes,
and the page author prefers dark.
-->
<meta name="color-scheme" content="dark light">
合併 color-scheme 和 prefers-color-scheme
由於中繼標記和 CSS 屬性 (如果套用至 :root 元素) 最終會產生相同的行為，因此我一律建議使用中繼標記指定色彩配置，讓瀏覽器能更快採用偏好的配置。
雖然使用絕對基準網頁時並不需要額外的 CSS 規則，但在一般情況下，您應一律搭配使用 color-scheme 與 prefers-color-scheme。舉例來說，WebKit 和 Chrome 用於傳統連結藍色 rgb(0,0,238) 的專屬 WebKit CSS 顏色 -webkit-link，在黑色背景的對比度不足為 2.23:1，但由於 WCAG AA 和 WCAG AAA 規定都會失敗。
我為 Chrome、WebKit 和 Firefox 的錯誤，以及 HTML 標準中的中繼問題開啟了相關錯誤，藉此修正這項問題。
與「prefers-color-scheme」互動
color-scheme CSS 屬性，以及對應中繼標記與 prefers-color-scheme 使用者偏好設定媒體功能的交互作用，一開始可能會令人感到困惑。事實上，兩者一起玩得很好。
最重要的是，color-scheme 只會決定預設外觀，prefers-color-scheme 則會決定可觸控外觀。為了更清楚瞭解原因，請假設以下頁面：
<head>
<meta name="color-scheme" content="dark light">
<style>
fieldset {
background-color: gainsboro;
}
@media (prefers-color-scheme: dark) {
fieldset {
background-color: darkslategray;
}
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, legere ancillae ne vis.
</p>
<form>
<fieldset>
<legend>Lorem ipsum</legend>
<button type="button">Lorem ipsum</button>
</fieldset>
</form>
</body>
網頁內嵌 CSS 程式碼一般會將 <fieldset> 元素的 background-color 設為 gainsboro；如果使用者偏好根據 prefers-color-scheme 使用者偏好設定媒體功能選擇 dark 色彩配置，則設為 darkslategray。
透過 <meta name="color-scheme" content="dark light"> 元素，網頁會告知瀏覽器其支援深色和淺色主題，並偏好深色主題。
視作業系統的樣式表設定為深色或淺色模式而定，整個頁面會以淺色顯示，反之亦然。就不需其他開發人員提供的 CSS 變更段落文字或頁面的背景顏色。
請注意，<fieldset> 元素的 background-color 會如何依照網頁開發人員提供的內嵌樣式表中的規則，根據是否啟用深色模式而變更。可以是 gainsboro 或 darkslategray。
<fieldset> 元素的 background-color 為 gainsboro。
<fieldset> 元素的 background-color 為 darkslategray。<button> 元素的外觀是由使用者代理程式樣式表控制。其 color 設為 ButtonText 系統顏色，background-color，四個 border-color 則設為系統顏色 ButtonFace。
background-color 和各種 border-color 會設為 ButtonFace 系統顏色。現在，請留意 <button> 元素的 border-color 如何變更。由於使用者代理程式會根據色彩配置動態更新 ButtonFace，因此 border-top-color 的「computed」值和 border-bottom-color 會從 rgba(0, 0, 0, 0.847) (黑色) 切換為 rgba(255, 255, 255, 0.847) (瑞典文)。同樣適用於設為對應系統顏色 ButtonText 的 <button> 元素的 color。
ButtonFace 的 border-top-color 和 border-bottom-color 計算值現在為 rgba(0, 0, 0, 0.847)。
ButtonFace 的 border-top-color 和 border-bottom-color 計算值現在為 rgba(255, 255, 255, 0.847)。
示範
您可以參閱 Glitch 示範，瞭解 color-scheme 套用至大量 HTML 元素的效果。確實示範了 WCAG AA 和 WCAG AAA 違規，以及上方警告中所述的連結顏色。
color-scheme: light。
color-scheme: dark。請注意 WCAG AA 和 WCAG AAA
違規事項
並附上連結顏色。
特別銘謝
color-scheme CSS 屬性和對應的中繼標記是由 Rune Lillesveen 實作。Rune 也是 CSS 色彩調整模組層級 1 規格的共同編輯者。Philippe Leone 在 Unsplash 上提供的主頁橫幅。