Sec-CH-Prefers-Color-Scheme

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig, bevor Sie diese produktiv verwenden.

Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.

Der Sec-CH-Prefers-Color-Scheme Benutzervorliebe-Medienfeature-Client-Hinweis Request-Header bietet die Präferenz des Benutzers für helle oder dunkle Farbschemas an. Ein Benutzer gibt seine Präferenz durch eine Einstellung im Betriebssystem (zum Beispiel, heller oder dunkler Modus) oder eine Benutzereinstellungs-Agent an.

Wenn ein Server einem Client über den Accept-CH Header signalisiert, dass er Sec-CH-Prefers-Color-Scheme akzeptiert, kann der Client darauf mit diesem Header antworten, um die Präferenz des Benutzers für ein bestimmtes Farbschema anzuzeigen. Der Server kann dem Client entsprechend angepasste Inhalte senden, einschließlich Bildern oder CSS, um einen hellen oder dunklen Modus für nachfolgend darzustellende Inhalte zu präsentieren.

Dieser Header ist nach dem prefers-color-scheme Medien-Abfrage modelliert.

Header-Typ Anfrage-Header, Client-Hinweis
Verbotener Header-Name ja

Verwendungshinweise

Der Sec-CH-Prefers-Color-Scheme Header erlaubt es Websites, die Farbschema-Präferenz des Benutzers zur Anfragezeit zu erhalten; sie könnten dann wählen, relevante CSS für die Präferenz des Benutzers inline bereitzustellen, aus Leistungsgründen. Wenn der Server das CSS miteinander verbindet, möchte er möglicherweise einen Vary Antwort-Header einschließen, der Sec-CH-Prefers-Color-Scheme angibt, um zu signalisieren, dass die Antwort für ein bestimmtes Farbschema maßgeschneidert ist.

Wenn die Leistung in diesem Kontext nicht entscheidend ist, könnten Sie stattdessen die Farbschema-Präferenz des Benutzers mit der prefers-color-scheme Medien-Abfrage und/oder der Window.matchMedia() API behandeln.

Sec-CH-Prefers-Color-Scheme ist ein High-Entropy-Hinweis, daher muss die Seite dazu optieren, ihn zu empfangen, indem ein entsprechender Accept-CH Antwort-Header gesendet wird. Ein Benutzeragent kann den Sec-CH-Prefers-Color-Scheme Header absichtlich weglassen, um die Privatsphäre des Benutzers zu schützen, da die Präferenz des Benutzers theoretisch zur Fingerabdruckerstellung verwendet werden könnte.

Syntax

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

Direktiven

<preference>

Ein String, der die Präferenz des Benutzeragents für dunkle oder helle Inhalte angibt: "light" oder "dark". Der Wert kann aus einer entsprechenden Einstellung im zugrunde liegenden Betriebssystem stammen.

Beispiele

Der Client sendet eine initiale Anfrage an den Server:

http
GET / HTTP/1.1
Host: example.com

Der Server antwortet und teilt dem Client über Accept-CH mit, dass er Sec-CH-Prefers-Color-Scheme akzeptiert. In diesem Beispiel wird auch Critical-CH verwendet, was darauf hinweist, dass Sec-CH-Prefers-Color-Scheme als kritischer Client-Hinweis betrachtet wird.

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

Hinweis: Wir haben auch Sec-CH-Prefers-Color-Scheme im Vary-Header spezifiziert, um anzuzeigen, dass Antworten getrennt basierend auf dem Wert dieses Headers zwischengespeichert werden sollten (auch wenn die URL gleich bleibt). Jeder in dem Critical-CH Header angegebene Header sollte auch in den Accept-CH und Vary Headers vorhanden sein.

Der Client wiederholt automatisch die Anfrage (da Critical-CH wie oben angegeben spezifiziert wurde), und teilt dem Server über Sec-CH-Prefers-Color-Scheme mit, dass er eine Benutzerpräferenz für dunkle Inhalte hat:

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

Der Client wird den Header in nachfolgenden Anfragen in der aktuellen Sitzung einbeziehen, es sei denn, das Accept-CH ändert sich in den Antworten, um anzuzeigen, dass es nicht mehr vom Server unterstützt wird.

Spezifikationen

Specification
User Preference Media Features Client Hints Headers
# sec-ch-prefers-color-scheme

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch