HTTP 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 и/или API Window.matchMedia().

Sec-CH-Prefers-Color-Scheme — это подсказка с высокой энтропией, поэтому сайту необходимо явно запросить её получение, отправив соответствующий заголовок ответа Accept-CH. Пользовательский агент может намеренно не отправлять заголовок Sec-CH-Prefers-Color-Scheme для защиты конфиденциальности пользователя, поскольку его предпочтения теоретически могут использоваться для снятия цифрового отпечатка.

Синтаксис

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

Директивы

<preference>

Строка, указывающая предпочтение пользовательского агента относительно тёмного или светлого содержимого: "light" или "dark". Значение может быть получено из соответствующей настройки базовой операционной системы.

Примеры

Использование Sec-CH-Prefers-Color-Scheme

Клиент отправляет серверу первоначальный запрос:

GET / HTTP/1.1
Host: example.com

Сервер отвечает и сообщает клиенту с помощью Accept-CH, что принимает Sec-CH-Prefers-Color-Scheme. В этом примере также используется Critical-CH, указывающий, что Sec-CH-Prefers-Color-Scheme считается критической подсказкой клиента.

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

Клиент автоматически повторяет запрос (поскольку выше указано Critical-CH) и сообщает серверу с помощью Sec-CH-Prefers-Color-Scheme, что пользователь предпочитает тёмное содержимое:

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

Клиент будет включать этот заголовок в последующие запросы в текущем сеансе, пока Accept-CH не изменится в ответах, указывая, что сервер больше не поддерживает этот заголовок.

Спецификации

Совместимость с браузерами

См. также

• Подсказки клиента
• API подсказок клиента User-Agent
• Accept-CH
• Изменение ответов при кэшировании HTTP и заголовок Vary
• Медиазапрос CSS prefers-color-scheme
• Повышение конфиденциальности пользователей и удобства работы разработчиков с помощью подсказок клиента User-Agent (developer.chrome.com)