Eine Farbpalette für den Dark Mode legt eigene Farben für die dunkle Ansicht fest. Laut Apple sind dunkle Farben nicht einfach die Umkehrung der hellen. Flächen werden fast schwarz, Text hell, und Akzentfarben werden heller und ruhiger, damit sie auf dunklem Grund nicht flimmern.
- Farbpalette für Dark Mode
Die eigens abgestimmten Farben für die dunkle Ansicht einer Website, mit fast schwarzen Flächen, hellem Text und aufgehellten, weniger gesättigten Akzenten.
Beispiel: „In der Farbpalette für den Dark Mode wird das Markenblau zwei Stufen heller, damit es auf Anthrazit nicht grell wirkt.“Auch: Dark Theme, dunkles Farbschema.
Teil der Farbrollen: Die Rollen bleiben, nur die Werte wechseln.
Flächen und Text in der Farbpalette für Dark Mode
Material Design empfahl in seiner zweiten Fassung ein Dunkelgrau von #121212 statt reinem Schwarz; weißer Text erreicht darauf mindestens 15,8 zu 1. Höher liegende Flächen wie Karten und Dialoge wurden mit hellen Überlagerungen etwas aufgehellt, damit Ebenen ohne Schatten erkennbar bleiben. Material Design 3 rechnet die Flächen inzwischen über eigene Tonstufen der Neutralpalette. Apple verlangt mindestens 4,5 zu 1 und rät zu 7 zu 1 für kleinen Text.
Akzentfarben im Dark Mode
Kräftige, gesättigte Farben flimmern auf dunklem Grund und wirken grell. Material Design riet deshalb zu helleren, weniger gesättigten Stufen der Palette, etwa der Stufe 200 statt der kräftigen Grundstufe. Die Rollen der Farben bleiben gleich: Ein Button trägt im Dark Mode weiterhin die Akzentfarbe, nur in einer anderen Stufe.
Die Farbpalette für Dark Mode in CSS
Die Media Query prefers-color-scheme fragt ab, ob jemand das dunkle Systemdesign nutzt. Kürzer geht es mit light-dark(): Die Funktion nimmt eine helle und eine dunkle Farbe und wählt je nach color-scheme die passende. Sie ist seit Mai 2024 in allen großen Browsern verfügbar.
:root {
color-scheme: light dark;
--flaeche: light-dark(#ffffff, #121212);
--text: light-dark(#001c44, #e6eaf0);
--akzent: light-dark(#0062d1, #8ab4ff);
}