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 表格仅在浏览器中加载

另请参见