Verlopen in dark mode: diepte behouden zonder verblinding

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 behandelt het bredere thema; deze pagina gaat over de verlopen.

Vijf regels voor dark mode verlopen

1. 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. 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. 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. 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. 5

   Voeg korrel toe

   Fijne ruis breekt de zichtbare stappen in donkere overgangen op. Korrelige verlopen heeft het recept.

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.

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

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.

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

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.

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

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

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 laat zien waarom.

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 heeft de cijfers.

Voor meer donkere paletten heeft donkere verloopachtergronden 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.