HTTP Sec-CH-Prefers-Color-Scheme Header

Der HTTP-Header Sec-CH-Prefers-Color-Scheme ist ein Request-Header aus den User Agent Client Hints, der die Farbschema-Präferenz des Nutzers (hell oder dunkel) übermittelt. Server können damit Theme-Anpassungen serverseitig vornehmen, bevor das Initial Rendering erfolgt.

Typ

Request-Header

Syntax

Der Header gibt die Farbschema-Präferenz als einfachen String-Wert an.

http 
Sec-CH-Prefers-Color-Scheme: dark
Sec-CH-Prefers-Color-Scheme: light

Direktiven

Die Direktiven definieren die bevorzugte Farbschema-Einstellung des Nutzers.

light
Nutzer bevorzugt helles Farbschema mit dunklem Text auf hellem Hintergrund. Standard-Präferenz wenn keine explizite Einstellung vorhanden.
dark
Nutzer bevorzugt dunkles Farbschema mit hellem Text auf dunklem Hintergrund. Entspricht dem Dark Mode der Betriebssystem-Einstellungen.

Beispiele

Nachfolgend finden Sie praktische Anwendungsbeispiele für den Sec-CH-Prefers-Color-Scheme-Header.

Beispiel 1 Dark Mode Anfrage

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

Browser sendet Dark Mode Präferenz, Server kann sofort dunkles Theme ausliefern ohne Flash of Incorrect Theme (FOIT).

Beispiel 2 Light Mode mit Opt-In

http 
GET /profile HTTP/1.1
Host: app.example.com
Sec-CH-Prefers-Color-Scheme: light

Nutzer mit hellem Theme erhält direkt optimierte CSS-Variablen für helles Design im initialen HTML-Response.

Beispiel 3 Accept-CH Header Response

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

<!DOCTYPE html>
<html data-theme="dark">

Server fordert Client Hint an via Accept-CH und nutzt Vary-Header für korrektes Caching unterschiedlicher Theme-Versionen.

Client Hints Request Flow

User Preference Client Hints Ablauf

Vorteile für die Systemarchitektur

  • Serverseitiges Initial Rendering: Theme-Anpassung vor erstem Paint verhindert visuelles Flackern beim Themenwechsel nach JavaScript-Ausführung
  • Verbesserte Core Web Vitals: Reduzierter Cumulative Layout Shift durch theme-spezifische Ressourcen bereits im Initial Response
  • Intelligentes Caching: Vary-Header ermöglicht separate Cache-Einträge für Light und Dark Mode, optimiert CDN-Performance

Spezifikation

User Preference Media Features Client Hints Headers https://wicg.github.io/user-preference-media-features-headers/

Weitere Spezifikationen

Accept-CH Header, Sec-CH-Prefers-Reduced-Motion Header