Light Mode ist die Darstellung einer Oberfläche mit hellem Hintergrund und dunkler Schrift. Sie ist der Ausgangszustand fast aller Websites und in Betriebssystemen die Voreinstellung, solange der Nutzer nichts anderes wählt.
- Light Mode
Darstellung einer Oberfläche mit hellem Hintergrund und dunklem Text.
Beispiel: „Im Light Mode stimmen die Kontraste, im Dark Mode müssen wir nachjustieren.“Auch: Light Theme, Hellmodus, heller Modus, Tagmodus oder Day Mode. Im Fachgespräch überwiegt die englische Form.
Gegenbegriff: Dark Mode, die Darstellung mit dunklem Hintergrund und heller Schrift.
Warum der Light Mode der Ausgangspunkt bleibt
Gedruckte Schrift ist seit jeher dunkel auf hellem Grund, und Bildschirme haben diese Gewohnheit übernommen. Für längere Texte ist die Anordnung außerdem messbar im Vorteil: Bei hellem Hintergrund verengt sich die Pupille, das Auge stellt schärfer, und die Buchstabenkanten wirken klarer. Wer an einer Sehschwäche wie einem Astigmatismus leidet, sieht helle Schrift auf dunklem Grund dagegen leicht verschwimmen.
Dazu kommt der praktische Grund: Bei Tageslicht und erst recht draußen setzt sich ein heller Bildschirm besser gegen die Umgebung durch. Deshalb ist der Light Mode für die meisten Anwendungen der Zustand, für den zuerst gestaltet wird, und der Dark Mode die zweite Fassung.
Was beim Gestalten zu beachten ist
Reines Weiß als Hintergrund ist selten die beste Wahl. Ein sehr helles Grau nimmt der Fläche die Härte, ohne dass der Kontrast leidet. Beim Text gilt das Umgekehrte: Ein zu helles Grau auf weißem Grund unterschreitet schnell die Kontrastanforderungen, die für Fließtext bei 4,5 zu 1 liegen.
Wer beide Modi anbietet, legt die Werte am besten als Design Tokens an. Dann existiert je Rolle ein Wert für hell und einer für dunkel, und eine Anpassung wirkt in beiden Fassungen. Ohne diese Trennung entstehen Farben, die in einem der beiden Modi nicht funktionieren, und niemand merkt es, bis sich jemand beschwert.
Wie die Umschaltung funktioniert
Der Browser gibt die Systemeinstellung über die Medienabfrage prefers-color-scheme weiter. Ohne Angabe des Nutzers meldet sie light, weshalb der Light Mode auch technisch der Ausgangszustand ist.
:root { --grund: #ffffff; --text: #1a1a1a; }
@media (prefers-color-scheme: dark){
:root { --grund: #0e1012; --text: #e2e8f0; }
}Bietet eine Website zusätzlich einen eigenen Umschalter an, überschreibt dessen Auswahl die Systemeinstellung. Die Entscheidung gehört dann gespeichert, damit sie beim nächsten Besuch noch gilt.