# Gradienter i mørk modus: dybde uten blending

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

En gradient som gløder forsiktig på hvitt, kan blende på en mørk skjerm. Slik tilpasser du gradienter til mørk modus og bevarer dybden, med CSS for prefers-color-scheme, light-dark() og manuelt temavalg.

## The short version

- Gradienter i mørk modus bør tilpasses det mørke temaet, fordi de samme mettede fargene som virker balanserte på hvitt, blir harde og blendende på mørk bakgrunn.
- På mørke bakgrunner bør du dempe fargenes kroma, holde sterke farger til små områder og bruke nesten svart tonet mot merkevarens fargetone fremfor rent svart.
- Bytt gradienter mellom temaer ved å lagre fargene i egendefinerte CSS-egenskaper og definere dem på nytt i en mediespørring med prefers-color-scheme: dark.
- CSS-funksjonen light-dark() velger mellom to farger ut fra aktivt color-scheme, slik at begge verdier kan stå ved siden av hverandre.
- Fargebånd synes tydeligere i mørke gradienter enn i lyse, så et lett lag med korn er verdt å legge til i mørk modus.

**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](https://gradiently.design/nb/guide/dark-mode-design) dekker temaet mer generelt; denne siden handler om gradientene.

- Toppfelt i lyst tema: `linear-gradient(135deg, #ede9fe 0%, #c4b5fd 50%, #f9a8d4 100%)`
- Ujustert mørkt: full metning: `linear-gradient(135deg, #7c3aed 0%, #db2777 100%)`
- Tilpasset mørkt: lys fra ett hjørne: `radial-gradient(circle at 80% 15%, #4c1d95 0%, #1a1530 45%, #0b0a14 85%)`

Samme merkevaregradient på tre måter. Den i midten viser hva som skjer når et lyst design bare mørknes: støyende, flatt og slitsomt. Den siste beholder fiolett, men lar fargen gløde fra et hjørne over en tonet bakgrunn.

## Fem regler for gradienter i mørk modus

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. **Demp kroma** Senk metningen med omtrent en tredjedel i store områder. I OKLCH beholder du fargetonen og reduserer C-verdien.
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. **Lysne fremfor å skyggelegge** Vis høyde med litt lysere flater og gradienter som lysner mot toppen, siden skygger forsvinner på mørke bakgrunner.
5. **Legg til korn** Fin støy bryter opp synlige trinn i mørke overganger. [Kornete gradienter](https://gradiently.design/nb/guide/grainy-gradients) har oppskriften.

- Bakgrunn: #0b0a14
- Flate: #1a1530
- Hevet: #2a2148
- Dyp fiolett: #4c1d95
- Aksent: #8b5cf6
- Tekstaksent: #c4b5fd

Et mørkt gradientsett til en fiolett merkevare. Mesteparten av skjermen bruker de tre første; aksenten vises i små områder, og lys lilla er forbeholdt tekst og ikoner.

## 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](https://gradiently.design/nb/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);
}
```

Fordi --hero og fargene er definert på samme element, oppdateres gradienten overalt når mediespørringen definerer fargene på nytt. color-scheme ber også nettleseren gjøre rullefelt og skjemakontroller mørke.

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

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

I dagens nettlesere tar light-dark() farger, ikke bilder. Bruk den derfor for hvert fargestopp fremfor for hele gradienten.

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

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

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

Å sette color-scheme til én enkelt verdi får også light-dark() til å følge temavalget.

## 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](https://gradiently.design/nb/guide/oklch-explained) viser hvorfor.

| Stopp | Lyst tema | Mørkt tema | Endring |
| --- | --- | --- | --- |
| Bakgrunn | `oklch(98% 0.01 295)` | `oklch(15% 0.03 295)` | Tonet, nesten svart fremfor svart |
| Hovedfarge | `oklch(85% 0.09 295)` | `oklch(35% 0.15 295)` | Mørkere, med moderat kroma |
| Aksent | `oklch(84% 0.10 350)` | `oklch(40% 0.12 265)` | Kjøligere for å unngå skarp rosa glød |
| Tekstaksent | `oklch(45% 0.20 295)` | `oklch(82% 0.09 295)` | Lysere og mykere til liten tekst |

Hovedfargene beholder fargetonen, så merkevaren fortsatt er gjenkjennelig i begge temaer.

Toppfelt i mørkt tema, med 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 mørke verdiene fra tabellen, lagt i lag. Kopier dem, og juster så kroma til lysningen føles varm fremfor skarp.

## 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](https://gradiently.design/nb/guide/color-contrast-accessibility) har tallene.

### Unngå i mørk modus

- Helt svart bakgrunn med mettede stopp
- En mørknet variant av gradienten fra lyst tema
- Store områder med neonfarger
- Helt hvite avsnitt
- Jevne mørke gradienter uten korn

### Gjør heller

- En tonet, nesten svart bakgrunn
- Et eget sett med mørke stopp
- Farge som lys fra ett hjørne
- Brukket hvit tekst, rundt `#e9e5f5`
- Et fint støylag som skjuler fargebånd

Flere mørke paletter du kan kopiere finnes i [mørke gradientbakgrunner](https://gradiently.design/nb/guide/dark-gradient-backgrounds). 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.

## FAQ

### Hvordan endrer jeg en gradient i mørk modus?

Legg gradientens farger i egendefinerte CSS-egenskaper og definer dem på nytt i `@media (prefers-color-scheme: dark)`. Gradienten oppdateres overalt der den bruker disse variablene.

### Kan jeg bruke light-dark() inne i en gradient?

Ja, til hvert fargestopp, siden light-dark() returnerer en farge. Den trenger `color-scheme: light dark` på elementet eller et overordnet element.

### Hvorfor virker gradientene mine for lyse i mørk modus?

Øynene tilpasser seg mørke skjermer, så mettede farger virker sterkere. Demp kroma, mørkne stoppene og begrens sterke farger til små områder.

### Bør mørk modus bruke helt svart?

Vanligvis ikke til gradienter. Nesten svart tonet mot merkevarens fargetone får fargene til å gli naturlig sammen og reduserer hard kontrast.

### Hvorfor viser den mørke gradienten striper?

Mørke toner ligger tett i 8-bits farge, så trinnene blir synlige. Legg til et lett kornlag og unngå hard komprimering.