# Verlopen in dark mode: diepte behouden zonder verblinding

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

Een verloop dat netjes gloeit op wit kan op een donker scherm schroeien. Zo stem je verlopen af op dark mode, zodat ze hun diepte houden, met CSS voor prefers-color-scheme, light-dark() en een handmatige schakelaar.

## The short version

- Dark mode verlopen moet je opnieuw ontwerpen voor het donkere thema, want dezelfde verzadigde kleuren die op wit in balans zijn, ogen hard en verblindend op een donkere achtergrond.
- Verlaag op donkere ondergronden de chroma van verloopkleuren, houd felle kleur beperkt tot kleine vlakken en gebruik een bijna-zwart met een tint van je merkkleur in plaats van puur zwart.
- Wissel verlopen tussen thema’s door hun kleuren in CSS custom properties op te slaan en ze opnieuw te definiëren binnen een prefers-color-scheme: dark media query.
- De CSS-functie light-dark() kiest tussen twee kleuren op basis van het geldende color-scheme, zodat beide waarden naast elkaar blijven staan.
- Donkere verlopen vertonen zichtbaarder banding dan lichte, dus een lichte laag korrel is de moeite waard in dark mode.

**Dark mode verlopen** zien er het best uit als je ze eigen kleuren geeft in plaats van die van het lichte thema te hergebruiken. Op een donkere ondergrond past het oog zich aan en lijkt elke verzadigde kleur helderder, dus een verloop dat op wit rustig voelde, gaat verblinden. Verlaag de chroma, houd felle kleur beperkt tot kleine vlakken, tint de ondergrond in plaats van puur zwart te nemen en wissel de waarden met `prefers-color-scheme` of `light-dark()`. De diepte blijft; de verblinding verdwijnt.

## Waarom verlopen uit het lichte thema in het donker falen

Er veranderen drie dingen als de pagina donker wordt. Grote felle vlakken worden het helderste in de ruimte, wat als verblinding leest in plaats van als kleur. Schaduwen werken niet meer, dus verlopen die voor diepte op donkerder wordende randen leunden, verliezen die. En de stappen tussen donkere tinten worden beter zichtbaar, waardoor subtiele verlopen gaan banden. [Dark mode design](https://gradiently.design/nl/guide/dark-mode-design) behandelt het bredere thema; deze pagina gaat over de verlopen.

- Hero in lichte thema: `linear-gradient(135deg, #ede9fe 0%, #c4b5fd 50%, #f9a8d4 100%)`
- Naïef donker: volle verzadiging: `linear-gradient(135deg, #7c3aed 0%, #db2777 100%)`
- Afgestemd donker: licht vanuit één hoek: `radial-gradient(circle at 80% 15%, #4c1d95 0%, #1a1530 45%, #0b0a14 85%)`

Hetzelfde merkverloop op drie manieren. Het middelste is wat er gebeurt als je een licht ontwerp simpelweg donkerder maakt: luid, vlak, vermoeiend. Het laatste houdt het violet, maar laat het vanuit een hoek gloeien over een getinte ondergrond.

## Vijf regels voor dark mode verlopen

1. **Tint de ondergrond** Gebruik een bijna-zwart dat naar je tint neigt, zoals `#0b0a14` voor violette merken, in plaats van `#000000`. Bij puur zwart lijkt kleur erop geplakt.
2. **Verlaag de chroma** Haal de verzadiging voor grote vlakken ongeveer een derde omlaag. Behoud in OKLCH de tint en verlaag de C-waarde.
3. **Maak het felle deel kleiner** Laat felle kleur een hoek of een gloed beslaan en laat het grootste deel van het vlak dicht bij de ondergrond blijven.
4. **Til op, geef geen schaduw** Toon hoogte met iets lichtere vlakken en verlopen die naar boven toe oplichten, want schaduwen verdwijnen op donkere ondergronden.
5. **Voeg korrel toe** Fijne ruis breekt de zichtbare stappen in donkere overgangen op. [Korrelige verlopen](https://gradiently.design/nl/guide/grainy-gradients) heeft het recept.

- Ondergrond: #0b0a14
- Vlak: #1a1530
- Verhoogd: #2a2148
- Diep violet: #4c1d95
- Accent: #8b5cf6
- Tekstaccent: #c4b5fd

Een donkere verloopset voor een violet merk. Het grootste deel van het scherm gebruikt de eerste drie; het accent komt op kleine plekken voor en het bleke lila is gereserveerd voor tekst en iconen.

## Verlopen wisselen met prefers-color-scheme

Sla verloopkleuren op in custom properties, niet hele verlopen. Dan hoeft het donkere thema alleen de kleuren opnieuw te definiëren en wordt elk onderdeel dat ze gebruikt bijgewerkt. Dit is hetzelfde patroon als in [CSS-variabelen voor thema’s](https://gradiently.design/nl/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);
}
```

Doordat --hero en de kleuren op hetzelfde element staan, werkt het opnieuw definiëren van de kleuren in de media query het verloop bij overal waar het wordt gebruikt. color-scheme zegt de browser ook om scrollbalken en formulierelementen donkerder te maken.

Merk op dat de donkere gloeden dieper zijn, niet feller. Op een donkere ondergrond hoeft een kleur maar iets lichter te zijn dan zijn omgeving om als licht te lezen.

### light-dark() gebruiken

De functie `light-dark()` geeft in een licht schema haar eerste kleur terug en in een donker schema de tweede. Ze heeft `color-scheme: light dark` nodig op het element of een voorouder en wordt ondersteund in huidige versies van Chrome, Edge, Safari en Firefox. Ze houdt beide waarden op één regel, wat het nakijken van een palet makkelijker maakt.

```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 huidige browsers accepteert light-dark() kleuren, geen afbeeldingen, dus gebruik het per kleurstop in plaats van voor het hele verloop.

### Een handmatige themaschakelaar ondersteunen

Veel sites laten mensen de systeeminstelling overschrijven. Zet de keuze op het rootelement en koppel je variabelen eraan. De media query regelt de standaard; het attribuut wint zodra iemand kiest.

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

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

Als je color-scheme op één waarde zet, volgt light-dark() ook de schakelaar.

## Een verloop afstemmen op dark mode

Hier is hetzelfde merkverloop, stop voor stop aangepast. Werken in OKLCH maakt dat voorspelbaar, omdat helderheid en chroma aparte getallen zijn; [OKLCH uitgelegd](https://gradiently.design/nl/guide/oklch-explained) laat zien waarom.

| Stop | Licht thema | Donker thema | Wijziging |
| --- | --- | --- | --- |
| Ondergrond | `oklch(98% 0.01 295)` | `oklch(15% 0.03 295)` | Getint bijna-zwart, geen zwart |
| Hoofdkleur | `oklch(85% 0.09 295)` | `oklch(35% 0.15 295)` | Donkerder, chroma gematigd gehouden |
| Accent | `oklch(84% 0.10 350)` | `oklch(40% 0.12 265)` | Koeler verschoven om een hete roze gloed te vermijden |
| Tekstaccent | `oklch(45% 0.20 295)` | `oklch(82% 0.09 295)` | Lichter en zachter voor kleine tekst |

De tint blijft bij de hoofdkleuren op zijn plaats, zodat het merk in beide thema’s zichzelf blijft.

Hero in het donkere thema, 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))`

De donkere waarden uit de tabel, gelaagd. Kopieer het en pas de chroma aan tot de gloed warm aanvoelt in plaats van fel.

## Tekst op donkere verlopen

Lichte tekst op een donker verloop heeft meestal ruim genoeg contrast, maar controleer het waar het verloop het helderst is, niet waar het het donkerst is. Een kop in `#e2e8f0` op `#0b0a14` zit ver boven de 4,5:1 die WCAG voor lopende tekst vraagt; dezelfde kop over een felle violette gloed misschien niet. Vermijd ook puur witte lopende tekst op bijna-zwart: heel hoog contrast veroorzaakt bij sommige lezers halo’s, dus een zacht gebroken wit is vriendelijker. [Kleurcontrast en toegankelijkheid](https://gradiently.design/nl/guide/color-contrast-accessibility) heeft de cijfers.

### Vermijd in dark mode

- Puur zwarte ondergrond met verzadigde stops
- Het verloop uit het lichte thema, donkerder gemaakt
- Grote vlakken neonkleur
- Puur witte alinea’s
- Gladde donkere verlopen zonder korrel

### Doe dit

- Een getinte bijna-zwarte ondergrond
- Een aparte set donkere stops
- Kleur als licht vanuit één hoek
- Gebroken witte tekst, rond `#e9e5f5`
- Een fijne ruislaag om banding te verbergen

Voor meer donkere paletten heeft [donkere verloopachtergronden](https://gradiently.design/nl/guide/dark-gradient-backgrounds) een set om te kopiëren. En voor socialmediaposts en slides, waar je niet elke regel met de hand kunt testen, kiest Auto-inkt van Gradiently per regel lichte of donkere letters uit het eigen palet van de Mark, en verplaatst de Mark zijn rustigste gebied achter de woorden, zodat een donker ontwerp nooit een kop op zijn felste gloed zet.

## FAQ

### Hoe verander ik een verloop in dark mode?

Zet de kleuren van het verloop in CSS custom properties en definieer ze opnieuw binnen `@media (prefers-color-scheme: dark)`. Het verloop wordt bijgewerkt overal waar het die variabelen gebruikt.

### Kan ik light-dark() in een verloop gebruiken?

Ja, voor elke kleurstop, omdat light-dark() een kleur teruggeeft. Het heeft `color-scheme: light dark` nodig op het element of een voorouder.

### Waarom zien mijn verlopen er in dark mode te fel uit?

Ogen passen zich aan donkere schermen aan, dus verzadigde kleuren lijken sterker. Verlaag de chroma, maak de stops donkerder en houd felle kleur beperkt tot kleine vlakken.

### Moet dark mode puur zwart gebruiken?

Voor verlopen meestal niet. Een bijna-zwart met een tint van je merkkleur laat kleuren natuurlijk in elkaar overlopen en vermindert hard contrast.

### Waarom heeft mijn donkere verloop strepen?

Donkere tinten liggen in 8-bits kleur dicht bij elkaar, waardoor stappen zichtbaar worden. Voeg een lichte korrellaag toe en vermijd zware compressie.