Gradienter i mørk modus: dybde uten blending

Gradienter i mørk modus ser best ut med egne farger fremfor dem fra det lyse temaet. På mørk bakgrunn tilpasser øyet seg, og alle mettede farger virker lysere. En gradient som var rolig på hvitt, begynner dermed å blende. Demp kroma, begrens sterke farger til små områder, ton bakgrunnen fremfor å bruke rent svart, og bytt verdiene med prefers-color-scheme eller light-dark(). Dybden blir, blendingen forsvinner.

Hvorfor gradienter fra lyse temaer svikter i mørket

Tre ting endres når siden blir mørk. Store lyse områder blir det lyseste i rommet, og oppfattes som blending fremfor farge. Skygger slutter å virke, så gradienter som brukte mørkere kanter til å skape dybde, mister den. Og trinnene mellom mørke toner blir lettere å se, så diskrete gradienter får synlige bånd. Design for mørk modus dekker temaet mer generelt; denne siden handler om gradientene.

Fem regler for gradienter i mørk modus

1. 1

   Ton bakgrunnen

   Bruk nesten svart som heller mot fargetonen din, som #0b0a14 for fiolette merkevarer, fremfor #000000. Rent svart får fargen til å virke pålimt.

2. 2

   Demp kroma

   Senk metningen med omtrent en tredjedel i store områder. I OKLCH beholder du fargetonen og reduserer C-verdien.

3. 3

   Gjør den lyse delen mindre

   La sterke farger fylle et hjørne eller en lysning, og la mesteparten av flaten ligge nær bakgrunnsfargen.

4. 4

   Lysne fremfor å skyggelegge

   Vis høyde med litt lysere flater og gradienter som lysner mot toppen, siden skygger forsvinner på mørke bakgrunner.

5. 5

   Legg til korn

   Fin støy bryter opp synlige trinn i mørke overganger. Kornete gradienter har oppskriften.

Bytte gradienter med prefers-color-scheme

Lagre gradientfargene, ikke hele gradienter, i egendefinerte egenskaper. Da trenger det mørke temaet bare å definere fargene på nytt, og alle komponenter som bruker dem oppdateres. Dette er samme mønster som i CSS-variabler for temaer.

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

Legg merke til at de mørke lysningene er dypere, ikke lysere. På mørk bakgrunn trenger en farge bare å være litt lysere enn omgivelsene for å oppfattes som lys.

Bruke light-dark()

Funksjonen light-dark() returnerer den første fargen i et lyst fargeskjema og den andre i et mørkt. Den trenger color-scheme: light dark på elementet eller et overordnet element og støttes i dagens Chrome, Edge, Safari og Firefox. Begge verdier står på én linje, noe som gjør paletten lettere å gjennomgå.

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

Støtte manuelt temavalg

Mange nettsteder lar folk overstyre systeminnstillingen. Legg valget på rotelementet og knytt variablene til det. Mediespørringen håndterer standardvalget; attributtet bestemmer når noen gjør et eget valg.

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

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

Tilpasse en gradient til mørk modus

Her er den samme merkevaregradienten justert stopp for stopp. OKLCH gjør dette forutsigbart, fordi lyshet og kroma er separate tall; OKLCH forklart viser hvorfor.

Tekst på mørke gradienter

Lys tekst på en mørk gradient har vanligvis god kontrast, men kontroller den der gradienten er lysest, ikke mørkest. En overskrift i #e2e8f0 på #0b0a14 ligger langt over 4,5:1 som WCAG krever til brødtekst; samme overskrift over en lys fiolett glød gjør kanskje ikke det. Unngå også helt hvit brødtekst på nesten svart: svært høy kontrast får bokstavene til å gløde for enkelte lesere, så mykt, brukket hvitt er mer behagelig. Fargekontrast og tilgjengelighet har tallene.

Flere mørke paletter du kan kopiere finnes i mørke gradientbakgrunner. Til sosiale innlegg og lysbilder, der du ikke kan kontrollere hver linje manuelt, velger Auto-tekstfarge i Gradiently lys eller mørk skrift per linje fra Markens egen palett. Marken flytter sitt roligste område bak ordene, så et mørkt design aldri legger en overskrift på den sterkeste lysningen.