# Gradienter i mørk tilstand: bevar dybden uden blænding

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

En gradient, der gløder høfligt på hvid, kan blænde på en mørk skærm. Her er, hvordan du justerer gradienter til dark mode, så de bevarer deres dybde, med CSS til prefers-color-scheme, light-dark() og en manuel omskifter.

## The short version

- Gradienter i dark mode bør designes om til det mørke tema, fordi de samme mættede farver, der ser afbalancerede ud på hvid, ser hårde og blændende ud på en mørk baggrund.
- På mørke bunde sænker du kromaen i gradientfarverne, holder klar farve til små områder og bruger et næsten sort, tonet mod dit brands farvetone, i stedet for ren sort.
- Skift gradienter mellem temaer ved at gemme deres farver i brugerdefinerede CSS-egenskaber og definere dem om i en prefers-color-scheme: dark media query.
- CSS-funktionen light-dark() vælger mellem to farver ud fra det color-scheme, der gælder, hvilket holder begge værdier side om side.
- Mørke gradienter får mere synlige striber end lyse, så et let lag korn er værd at tilføje i dark mode.

**Gradienter i dark mode** ser bedst ud, når du giver dem deres egne farver frem for at genbruge det lyse temas. På en mørk bund tilpasser øjet sig, og hver mættet farve virker klarere, så en gradient, der føltes rolig på hvid, begynder at blænde. Sænk kromaen, hold klar farve til små områder, tone bunden i stedet for at bruge ren sort, og skift værdierne med `prefers-color-scheme` eller `light-dark()`. Dybden bliver; blændingen forsvinder.

## Hvorfor gradienter fra det lyse tema svigter i mørket

Tre ting ændrer sig, når siden bliver mørk. Store lyse områder bliver det klareste i rummet, hvilket læses som blænding frem for farve. Skygger holder op med at virke, så gradienter, der brugte mørkere kanter til dybde, mister den. Og trinnene mellem mørke toner bliver lettere at se, så subtile gradienter begynder at få striber. [Mørk tilstand i design](https://gradiently.design/da/guide/dark-mode-design) dækker det bredere tema; denne side handler om gradienterne.

- Hero i lyst tema: `linear-gradient(135deg, #ede9fe 0%, #c4b5fd 50%, #f9a8d4 100%)`
- Naiv mørk: fuld mætning: `linear-gradient(135deg, #7c3aed 0%, #db2777 100%)`
- Justeret mørk: lys fra ét hjørne: `radial-gradient(circle at 80% 15%, #4c1d95 0%, #1a1530 45%, #0b0a14 85%)`

Den samme brandgradient på tre måder. Den midterste er, hvad der sker, når et lyst design simpelthen mørknes: højlydt, fladt, trættende. Den sidste beholder violetten, men lader den gløde fra et hjørne over en tonet bund.

## Fem regler for gradienter i dark mode

1. **Tone bunden** Brug et næsten sort, der læner sig mod din farvetone, som `#0b0a14` til violette brands, i stedet for `#000000`. Ren sort får farven til at se limet på.
2. **Sænk kromaen** Træk mætningen ned med omtrent en tredjedel til store områder. I OKLCH beholder du farvetonen og reducerer C-værdien.
3. **Gør den lyse del mindre** Lad klar farve fylde et hjørne eller en glød, og lad det meste af fladen ligge tæt på bunden.
4. **Løft, skygge ikke** Vis højde med lidt lysere flader og gradienter, der lysner mod toppen, da skygger forsvinder på mørke bunde.
5. **Tilføj korn** Fint korn bryder de synlige trin i mørke overgange. [Kornede gradienter](https://gradiently.design/da/guide/grainy-gradients) har opskriften.

- Bund: #0b0a14
- Flade: #1a1530
- Hævet: #2a2148
- Dyb violet: #4c1d95
- Accent: #8b5cf6
- Tekstaccent: #c4b5fd

Et mørkt gradientsæt til et violet brand. Det meste af skærmen bruger de første tre; accenten optræder på små steder, og den bleglilla er forbeholdt tekst og ikoner.

## Skift gradienter med prefers-color-scheme

Gem gradientfarver, ikke hele gradienter, i brugerdefinerede egenskaber. Så skal det mørke tema kun definere farverne om, og hver komponent, der bruger dem, opdateres. Det er det samme mønster, som er beskrevet i [CSS-variabler til temaer](https://gradiently.design/da/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 dens farver ligger på samme element, opdaterer en ny definition af farverne i media queryen gradienten overalt, hvor den bruges. color-scheme fortæller også browseren, at den skal mørkne rullebjælker og formularfelter.

Læg mærke til, at de mørke glød er dybere, ikke klarere. På en mørk bund behøver en farve kun at være lidt lysere end omgivelserne for at læses som lys.

### Sådan bruger du light-dark()

Funktionen `light-dark()` returnerer sin første farve i et lyst skema og sin anden i et mørkt. Den kræver `color-scheme: light dark` på elementet eller en forfader, og den understøttes i nuværende Chrome, Edge, Safari og Firefox. Den holder begge værdier på én linje, hvilket gør det lettere at gennemgå en palet.

```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 nuværende browsere tager light-dark() farver, ikke billeder, så brug den til hvert stop frem for til hele gradienten.

### Understøt en manuel temaomskifter

Mange websites lader folk tilsidesætte systemindstillingen. Læg valget på rodelementet og afgræns dine variabler til det. Media queryen håndterer standarden; attributten vinder, når nogen vælger.

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

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

Når color-scheme sættes til én værdi, følger light-dark() også omskifteren.

## Sådan justerer du en gradient til dark mode

Her er den samme brandgradient justeret stop for stop. At arbejde i OKLCH gør det forudsigeligt, fordi lyshed og kroma er to adskilte tal; [OKLCH forklaret](https://gradiently.design/da/guide/oklch-explained) viser hvorfor.

| Stop | Lyst tema | Mørkt tema | Ændring |
| --- | --- | --- | --- |
| Bund | `oklch(98% 0.01 295)` | `oklch(15% 0.03 295)` | Tonet næsten sort, ikke sort |
| Hoved | `oklch(85% 0.09 295)` | `oklch(35% 0.15 295)` | Mørkere, kroma holdt moderat |
| Accent | `oklch(84% 0.10 350)` | `oklch(40% 0.12 265)` | Skiftet køligere for at undgå et varmt pink-skær |
| Tekstaccent | `oklch(45% 0.20 295)` | `oklch(82% 0.09 295)` | Lysere og blødere til lille tekst |

Farvetonen bliver, hvor den er, for hovedfarverne, så brandet stadig læses som sig selv i begge temaer.

Hero i mørkt tema, i 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 værdier fra tabellen, lagt i lag. Kopiér den og justér så kromaen, til gløden føles varm frem for klar.

## Tekst på mørke gradienter

Lys tekst på en mørk gradient har som regel masser af kontrast, men tjek den, hvor gradienten er klarest, ikke hvor den er mørkest. En overskrift i `#e2e8f0` på `#0b0a14` ligger langt over de 4,5:1, som WCAG kræver til brødtekst; den samme overskrift over en klar violet glød gør det måske ikke. Undgå også ren hvid brødtekst på næsten sort: meget høj kontrast giver halation hos nogle læsere, så et blødt råhvidt er venligere. [Farvekontrast og tilgængelighed](https://gradiently.design/da/guide/color-contrast-accessibility) har tallene.

### Undgå i dark mode

- Ren sort bund med mættede stop
- Det lyse temas gradient, mørknet
- Store områder af neonfarve
- Afsnit i ren hvid
- Glatte mørke gradienter uden korn

### Gør

- En tonet næsten sort bund
- Et særskilt sæt mørke stop
- Farve som lys fra ét hjørne
- Råhvid tekst, omkring `#e9e5f5`
- Et fint støjlag til at skjule striber

For flere mørke paletter har [mørke gradientbaggrunde](https://gradiently.design/da/guide/dark-gradient-backgrounds) et sæt til at kopiere. Og til opslag på sociale medier og slides, hvor du ikke kan teste hver linje i hånden, vælger Gradiently Automatisk farve lys eller mørk skrift pr. linje ud fra Markens egen palet, og Marken flytter sit roligste område bag ordene, så et mørkt design aldrig sætter en overskrift på sin klareste glød.

## FAQ

### Hvordan ændrer jeg en gradient i dark mode?

Læg gradientens farver i brugerdefinerede CSS-egenskaber og definér dem om i `@media (prefers-color-scheme: dark)`. Gradienten opdateres overalt, hvor den bruger de variabler.

### Kan jeg bruge light-dark() inde i en gradient?

Ja, til hvert farvestop, da light-dark() returnerer en farve. Den kræver `color-scheme: light dark` på elementet eller en forfader.

### Hvorfor ser mine gradienter for klare ud i dark mode?

Øjnene tilpasser sig mørke skærme, så mættede farver virker stærkere. Sænk kromaen, mørkn stoppene og hold klar farve til små områder.

### Skal dark mode bruge ren sort?

Som regel ikke til gradienter. Et næsten sort, tonet mod dit brands farvetone, får farverne til at blande naturligt og reducerer hård kontrast.

### Hvorfor viser min mørke gradient striber?

Mørke toner ligger tæt sammen i 8-bit farve, så trinnene bliver synlige. Tilføj et let kornlag og undgå kraftig komprimering.