color-scheme CSS 屬性和對應的中繼標記可讓開發人員為網頁採用使用者代理程式樣式表的主題專用預設值。
背景
prefers-color-scheme 使用者偏好設定媒體功能
prefers-color-scheme 使用者偏好設定媒體功能可讓開發人員完全掌控網頁外觀。如果您不熟悉，請閱讀我的文章「prefers-color-scheme：老朋友哈囉，我的老朋友」，在當中記錄我對於打造令人驚豔的深色模式體驗的所有瞭解。
本文中只是簡短提到的一個謎題，就是 color-scheme CSS 屬性及同名的對應中繼標記。這兩者都能讓您為網頁選用使用者代理程式樣式表的專屬預設選項，例如表單控制項、捲軸和 CSS 系統顏色，可讓您更輕鬆處理網頁。同時，這項功能可以防止瀏覽器自行套用任何轉換。
瀏覽器支援
prefers-color-scheme
color-scheme
使用者代理程式樣式表
在繼續下一步之前，先簡單介紹一下使用者代理程式樣式表。在大部分的情況下，您可以將「使用者代理程式」一詞視為「瀏覽器」這個詞不明顯的概念。通用 Analytics (分析) 樣式表會決定網頁的預設外觀和風格。顧名思義，通用 Analytics (分析) 樣式表會因相關的通用 Analytics (分析) 而異。 建議您查看 Chrome (以及 Chromium 的) 通用 Analytics (分析) 樣式表，並與 Firefox 或 Safari (及 WebKit) 比較。一般而言，通用 Analytics (分析) 樣式表對大部分的事項達成共識。舉例來說，這些屬性都會讓連結變成藍色、一般文字黑色和背景顏色白色，但也有重要的差異 (例如樣式表單控制項的樣式)，但有時也很惱人。
請參閱 WebKit 的 UA 樣式表，並瞭解深色模式的相關用途。(在樣式表中針對「dark」進行完整文字搜尋)。樣式表的預設預設會視深色模式開啟與關閉狀態而不同。為說明這一點，以下是使用 :matches 虛擬類別和 WebKit-internal 變數 (例如 -apple-system-control-background) 以及 WebKit-internal 預先處理器指令 #if defined 的 CSS 規則：
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 都無效。這些顏色是 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"> 參照該 CSS) 並進行剖析。為了協助使用者代理程式「立即」以所需色彩配置轉譯網頁背景，您也可以在 <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；如果使用者偏好 dark 的色彩配置，則根據 prefers-color-scheme 使用者偏好設定媒體功能設為 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 和 border-bottom-color 的 computed 值會從 rgba(0, 0, 0, 0.847) (黑字) 切換為 rgba(255, 255, 255, 0.847) (whitish)。如果 <button> 元素的 color 設定為對應的系統顏色 ButtonText，也會採用同樣的機制。
border-top-color 和 border-bottom-color 的計算值現在為 rgba(0, 0, 0, 0.847)。
ButtonFace
ButtonFace 的 border-top-color 和 border-bottom-color 計算值現在已 rgba(255, 255, 255, 0.847)。
操作示範
您可以在 Glitch 的示範中，查看對大量 HTML 元素套用 color-scheme 的效果。示範內容「刻意」顯示了 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 網站上。