Sec-CH-Prefers-Color-Scheme

實驗性： 這是一個 實驗性技術
在生產環境中使用之前，請仔細檢視 瀏覽器相容性表格。

安全上下文： 此功能僅在 安全上下文（HTTPS）中可用，在一些或所有 支援的瀏覽器 中可用。

Sec-CH-Prefers-Color-Scheme 使用者偏好媒體功能客戶端提示 請求頭提供使用者對淺色或深色主題的偏好。使用者透過作業系統設定（例如，淺色或深色模式）或使用者代理設定來指示其偏好。

如果伺服器透過 Accept-CH 頭告訴客戶端它接受 Sec-CH-Prefers-Color-Scheme，則客戶端可以響應此頭來指示使用者對特定顏色方案的偏好。伺服器可以向客戶端傳送適當的適應內容，包括影像或 CSS，以顯示後續呈現內容的淺色或深色模式。

此頭是根據 prefers-color-scheme 媒體查詢模型化的。

頭型別 請求頭，客戶端提示
禁止的頭名稱 是

使用說明

Sec-CH-Prefers-Color-Scheme 頭允許網站在請求時獲取使用者的顏色方案偏好；然後，它們可以選擇出於效能原因提供與使用者偏好相關的 CSS 內聯。如果伺服器內聯了 CSS，它可能希望包含一個 Vary 響應頭，指定 Sec-CH-Prefers-Color-Scheme，以指示響應是為特定顏色方案定製的。

如果效能不是此上下文中的關鍵考慮因素，則可以改為使用 prefers-color-scheme 媒體查詢和/或 Window.matchMedia() API 處理使用者的顏色方案偏好。

Sec-CH-Prefers-Color-Scheme 是一個高熵提示，因此網站需要透過傳送適當的 Accept-CH 響應頭來選擇接收它。使用者代理可能會故意省略 Sec-CH-Prefers-Color-Scheme 頭以保護使用者隱私，因為理論上使用者的偏好可用於指紋識別。

語法

http
Sec-CH-Prefers-Color-Scheme: <preference>

指令

<preference>

一個字串，指示使用者代理對深色或淺色內容的偏好："light" 或 "dark"。該值可能來自底層作業系統的相應設定。

示例

客戶端向伺服器發出初始請求

http
GET / HTTP/1.1
Host: example.com

伺服器響應，透過 Accept-CH 告訴客戶端它接受 Sec-CH-Prefers-Color-Scheme。在此示例中，還使用了 Critical-CH，表示 Sec-CH-Prefers-Color-Scheme 被視為 關鍵客戶端提示。

http
HTTP/1.1 200 OK
Content-Type: text/html
Accept-CH: Sec-CH-Prefers-Color-Scheme
Vary: Sec-CH-Prefers-Color-Scheme
Critical-CH: Sec-CH-Prefers-Color-Scheme

注意： 我們還在 Vary 頭中指定了 Sec-CH-Prefers-Color-Scheme，以指示應根據此頭的值（即使 URL 保持不變）分別快取響應。Critical-CH 頭中列出的每個頭也應該出現在 Accept-CH 和 Vary 頭中。

客戶端自動重試請求（由於上面指定了 Critical-CH），透過 Sec-CH-Prefers-Color-Scheme 告訴伺服器它對深色內容有使用者偏好

http
GET / HTTP/1.1
Host: example.com
Sec-CH-Prefers-Color-Scheme: "dark"

客戶端將在當前會話中的後續請求中包含此頭，除非 Accept-CH 在響應中發生變化，以指示伺服器不再支援它。

規範

規範
使用者偏好媒體功能客戶端提示頭
# sec-ch-prefers-color-scheme

瀏覽器相容性

BCD 表格僅在瀏覽器中載入

另請參見