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

[Canonical HTML page](https://gradiently.design/de/guide/dark-mode-gradients)

Ein Verlauf, der auf Weiß höflich leuchtet, kann auf einem dunklen Bildschirm lodern. So stimmst du Verläufe für den Dark Mode neu ab, damit sie ihre Tiefe behalten, mit CSS für prefers-color-scheme, light-dark() und einen manuellen Umschalter.

## The short version

- Verläufe für den Dark Mode sollten für das dunkle Theme neu gestaltet werden, weil dieselben gesättigten Farben, die auf Weiß ausgewogen wirken, auf dunklem Hintergrund hart und grell aussehen.
- Auf dunklem Grund senkst du das Chroma der Verlaufsfarben, hältst helle Farbe auf kleine Flächen begrenzt und nutzt statt reinem Schwarz ein Fast-Schwarz, das zu deinem Markenfarbton hin getönt ist.
- Verläufe wechselst du zwischen Themes, indem du ihre Farben in CSS Custom Properties speicherst und sie in einer prefers-color-scheme: dark Media Query neu definierst.
- Die CSS-Funktion light-dark() wählt je nach aktivem color-scheme zwischen zwei Farben und hält beide Werte direkt nebeneinander.
- Dunkle Verläufe zeigen Streifenbildung deutlicher als helle, daher lohnt sich im Dark Mode eine leichte Körnungsebene.

**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](https://gradiently.design/de/guide/dark-mode-design) behandelt das ganze Theme; hier geht es um die Verläufe.

- Hero im hellen Theme: `linear-gradient(135deg, #ede9fe 0%, #c4b5fd 50%, #f9a8d4 100%)`
- Naiv dunkel: volle Sättigung: `linear-gradient(135deg, #7c3aed 0%, #db2777 100%)`
- Abgestimmt dunkel: Licht aus einer Ecke: `radial-gradient(circle at 80% 15%, #4c1d95 0%, #1a1530 45%, #0b0a14 85%)`

Derselbe Markenverlauf auf drei Arten. Der mittlere zeigt, was passiert, wenn man ein helles Design einfach abdunkelt: laut, flach, ermüdend. Der letzte behält das Violett, lässt es aber aus einer Ecke über einem getönten Grund leuchten.

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

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. **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. **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. **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. **Körnung hinzufügen** Feines Rauschen bricht die sichtbaren Stufen in dunklen Übergängen auf. [Körnige Verläufe](https://gradiently.design/de/guide/grainy-gradients) hat das Rezept.

- Grund: #0b0a14
- Fläche: #1a1530
- Erhöht: #2a2148
- Tiefviolett: #4c1d95
- Akzent: #8b5cf6
- Textakzent: #c4b5fd

Ein dunkles Verlaufsset für eine violette Marke. Der Großteil des Bildschirms nutzt die ersten drei; der Akzent taucht an kleinen Stellen auf, und das blasse Flieder ist Text und Icons vorbehalten.

## 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](https://gradiently.design/de/guide/css-custom-properties-theming).

```css
: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);
}
```

Weil --hero und seine Farben auf demselben Element liegen, aktualisiert das Neudefinieren der Farben in der Media Query den Verlauf überall, wo er genutzt wird. color-scheme sagt dem Browser außerdem, Scrollbalken und Formularelemente abzudunkeln.

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.

```css
: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);
}
```

In aktuellen Browsern nimmt light-dark() Farben an, keine Bilder, also nutze es für jeden Farbstopp statt für den ganzen Verlauf.

### 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.

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

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

Wenn color-scheme auf einen einzigen Wert gesetzt ist, folgt auch light-dark() dem Umschalter.

## 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](https://gradiently.design/de/guide/oklch-explained) zeigt, warum.

| Stopp | Helles Theme | Dunkles Theme | Änderung |
| --- | --- | --- | --- |
| Grund | `oklch(98% 0.01 295)` | `oklch(15% 0.03 295)` | Getöntes Fast-Schwarz, kein Schwarz |
| Hauptfarbe | `oklch(85% 0.09 295)` | `oklch(35% 0.15 295)` | Dunkler, Chroma moderat gehalten |
| Akzent | `oklch(84% 0.10 350)` | `oklch(40% 0.12 265)` | Kühler verschoben, um grelles Pink zu vermeiden |
| Textakzent | `oklch(45% 0.20 295)` | `oklch(82% 0.09 295)` | Heller und weicher für kleinen Text |

Der Farbton der Hauptfarben bleibt, wo er ist, sodass die Marke in beiden Themes sie selbst bleibt.

Hero im dunklen Theme, in OKLCH: `radial-gradient(circle at 80% 15%, oklch(35% 0.15 295) 0%, transparent 45%), radial-gradient(circle at 10% 90%, oklch(40% 0.12 265) 0%, transparent 50%), linear-gradient(oklch(15% 0.03 295), oklch(15% 0.03 295))`

Die dunklen Werte aus der Tabelle, übereinandergelegt. Kopiere sie und justiere das Chroma, bis das Leuchten warm statt grell wirkt.

## 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](https://gradiently.design/de/guide/color-contrast-accessibility) hat die Zahlen.

### Im Dark Mode vermeiden

- Reinschwarzer Grund mit gesättigten Stopps
- Der Verlauf des hellen Themes, abgedunkelt
- Große Flächen in Neonfarbe
- Reinweiße Absätze
- Glatte dunkle Verläufe ohne Körnung

### Machen

- Ein getönter, fast schwarzer Grund
- Ein eigenes Set dunkler Stopps
- Farbe als Licht aus einer Ecke
- Gebrochen weißer Text, etwa `#e9e5f5`
- Eine feine Rauschebene gegen Streifenbildung

Weitere dunkle Paletten findest du in [dunkle Verlaufshintergründe](https://gradiently.design/de/guide/dark-gradient-backgrounds) 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.

## FAQ

### Wie ändere ich einen Verlauf im Dark Mode?

Lege die Farben des Verlaufs in CSS Custom Properties ab und definiere sie in `@media (prefers-color-scheme: dark)` neu. Der Verlauf aktualisiert sich überall, wo er diese Variablen nutzt.

### Kann ich light-dark() in einem Verlauf verwenden?

Ja, für jeden Farbstopp, da light-dark() eine Farbe zurückgibt. Es braucht `color-scheme: light dark` auf dem Element oder einem Vorfahren.

### Warum sehen meine Verläufe im Dark Mode zu hell aus?

Augen passen sich an dunkle Bildschirme an, sodass gesättigte Farben stärker wirken. Senke das Chroma, dunkle die Stopps ab und halte helle Farbe auf kleine Flächen begrenzt.

### Sollte der Dark Mode reines Schwarz nutzen?

Für Verläufe meist nicht. Ein Fast-Schwarz, das zu deinem Markenfarbton hin getönt ist, lässt Farben natürlich ineinanderfließen und mildert harten Kontrast.

### Warum zeigt mein dunkler Verlauf Streifen?

Dunkle Töne liegen bei 8-Bit-Farbe eng beieinander, sodass Stufen sichtbar werden. Füge eine leichte Körnungsebene hinzu und vermeide starke Kompression.