Verläufe im Dark Mode: Tiefe behalten, Blendung vermeiden

Verläufe im Dark Mode sehen am besten aus, wenn du ihnen eigene Farben gibst, statt die des hellen Themes wiederzuverwenden. Auf dunklem Grund passt sich das Auge an, und jede gesättigte Farbe wirkt heller, sodass ein Verlauf, der auf Weiß ruhig war, zu blenden beginnt. Senke das Chroma, halte kräftige Farbe auf kleine Flächen begrenzt, töne den Grund, statt reines Schwarz zu nutzen, und wechsle die Werte mit prefers-color-scheme oder light-dark(). Die Tiefe bleibt, die Blendung geht.

Warum Verläufe aus dem hellen Theme im Dunkeln scheitern

Drei Dinge ändern sich, wenn die Seite dunkel wird. Große helle Flächen werden zum Hellsten im Raum und wirken als Blendung statt als Farbe. Schatten funktionieren nicht mehr, sodass Verläufe, die für Tiefe auf dunkle Ränder setzten, diese verlieren. Und die Stufen zwischen dunklen Tönen werden leichter sichtbar, sodass dezente Verläufe Streifen zeigen. Dark-Mode-Design behandelt das ganze Theme; hier geht es um die Verläufe.

Fünf Regeln für Verläufe im Dark Mode

1. 1

   Den Grund tönen

   Nutze ein Fast-Schwarz, das zu deinem Farbton neigt, etwa #0b0a14 für violette Marken, statt #000000. Reines Schwarz lässt Farbe aufgeklebt wirken.

2. 2

   Chroma senken

   Nimm die Sättigung für große Flächen um etwa ein Drittel zurück. In OKLCH behältst du den Farbton und verringerst den C-Wert.

3. 3

   Den hellen Teil verkleinern

   Lass kräftige Farbe eine Ecke oder ein Leuchten einnehmen, und lass den Großteil der Fläche nah am Grund bleiben.

4. 4

   Anheben statt beschatten

   Zeige Ebenen mit etwas helleren Flächen und Verläufen, die nach oben heller werden, denn Schatten verschwinden auf dunklem Grund.

5. 5

   Körnung hinzufügen

   Feines Rauschen bricht die sichtbaren Stufen in dunklen Übergängen auf. Körnige Verläufe hat das Rezept.

Verläufe mit prefers-color-scheme wechseln

Speichere Verlaufsfarben in Custom Properties, nicht ganze Verläufe. Dann muss das dunkle Theme nur die Farben neu definieren, und jede Komponente, die sie nutzt, aktualisiert sich. Es ist dasselbe Muster wie in CSS-Variablen für Themes.

:root {
  color-scheme: light dark;
  --ground: #faf8ff;
  --glow: #c4b5fd;
  --glow-2: #f9a8d4;
  --hero: radial-gradient(circle at 80% 15%, var(--glow) 0%, transparent 45%),
          radial-gradient(circle at 10% 90%, var(--glow-2) 0%, transparent 50%),
          var(--ground);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0b0a14;
    --glow: #4c1d95;
    --glow-2: #1e3a8a;
  }
}

.hero {
  background: var(--hero);
}

Beachte, dass die dunklen Leuchtpunkte tiefer sind, nicht heller. Auf dunklem Grund muss eine Farbe nur etwas heller als ihre Umgebung sein, um als Licht zu wirken.

light-dark() verwenden

Die Funktion light-dark() gibt in einem hellen Schema ihre erste Farbe zurück und in einem dunklen ihre zweite. Sie braucht color-scheme: light dark auf dem Element oder einem Vorfahren und wird in aktuellen Versionen von Chrome, Edge, Safari und Firefox unterstützt. Sie hält beide Werte in einer Zeile, was das Prüfen einer Palette leichter macht.

:root {
  color-scheme: light dark;
}

.card {
  background: linear-gradient(
    180deg,
    light-dark(#ffffff, #1a1530) 0%,
    light-dark(#f5f3ff, #0b0a14) 100%
  );
  color: light-dark(#1e1b2e, #e9e5f5);
}

Einen manuellen Theme-Umschalter unterstützen

Viele Websites lassen Menschen die Systemeinstellung überschreiben. Lege die Wahl auf das Root-Element und binde deine Variablen daran. Die Media Query regelt den Standard; das Attribut gewinnt, wenn jemand wählt.

:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0b0a14;
  --glow: #4c1d95;
  --glow-2: #1e3a8a;
}

:root[data-theme="light"] {
  color-scheme: light;
}

Einen Verlauf für den Dark Mode neu abstimmen

Hier ist derselbe Markenverlauf, Stopp für Stopp angepasst. In OKLCH zu arbeiten macht das vorhersehbar, weil Helligkeit und Chroma getrennte Zahlen sind; OKLCH erklärt zeigt, warum.

Text auf dunklen Verläufen

Heller Text auf einem dunklen Verlauf hat meist reichlich Kontrast, aber prüfe ihn dort, wo der Verlauf am hellsten ist, nicht wo er am dunkelsten ist. Eine Überschrift in #e2e8f0 auf #0b0a14 liegt weit über den 4,5:1, die WCAG für Fließtext verlangt; dieselbe Überschrift über einem hellen violetten Leuchten vielleicht nicht. Vermeide auch reinweißen Fließtext auf Fast-Schwarz: Sehr hoher Kontrast verursacht bei manchen Lesenden Überstrahlung, ein weiches gebrochenes Weiß ist freundlicher. Farbkontrast und Barrierefreiheit hat die Zahlen.

Weitere dunkle Paletten findest du in dunkle Verlaufshintergründe zum Kopieren. Und für Social-Media-Beiträge und Folien, wo du nicht jede Zeile von Hand testen kannst, wählt die automatische Schriftfarbe von Gradiently für jede Zeile helle oder dunkle Schrift aus der eigenen Palette des Marks, und der Mark legt seine ruhigste Fläche hinter die Wörter, sodass ein dunkles Design eine Überschrift nie auf sein hellstes Leuchten setzt.