Sec-CH-Prefers-Color-Scheme 標頭

可用性有限

此特性不是基線特性,因為它在一些最廣泛使用的瀏覽器中不起作用。

實驗性: 這是一項實驗性技術
在生產中使用此技術之前,請仔細檢查瀏覽器相容性表格

安全上下文: 此功能僅在安全上下文(HTTPS)中可用,且支援此功能的瀏覽器數量有限。

HTTP Sec-CH-Prefers-Color-Scheme 請求標頭是一個媒體特性客戶端提示,它提供使用者對淺色或深色主題的偏好。使用者透過作業系統設定(例如,淺色或深色模式)或使用者代理設定來表明他們的偏好。

如果伺服器透過 Accept-CH 標頭向客戶端發出訊號,表明它接受 Sec-CH-Prefers-Color-Scheme,則客戶端可以隨後透過此標頭響應,以表明使用者對特定顏色方案的偏好。伺服器可以傳送經過適當調整的內容(包括影像或 CSS)給客戶端,以便為後續渲染的內容顯示淺色或深色模式。

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

頭型別 請求標頭客戶端提示
禁止請求頭 是 (Sec- 字首)

用法說明

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"”。該值可能源自底層作業系統中的相應設定。

示例

使用 Sec-CH-Prefers-Color-Scheme

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

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-CHVary 標頭中。

客戶端自動重試請求(由於上面指定了 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

瀏覽器相容性

另見