# Design til mørk tilstand: baggrunde, farve og kontrast

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

Mørk tilstand er ikke lys tilstand vendt på hovedet. Flader, tekst, accenter og gradienter skal have egne værdier, og reglerne er anderledes end dem, du kender.

## The short version

- Godt design til mørk tilstand bruger mørkegrå frem for rent sort til de vigtigste flader. Det blødgør kontrasten og giver plads til dybde.
- I mørke grænseflader vises hævede lag med lyshed: flader tættere på betragteren er lidt lysere, fordi skygger knap kan ses på mørke baggrunde.
- Tekst på mørke baggrunde er mere behagelig at læse i knækket hvid end i rent hvid, mens sekundær tekst stadig skal have en kontrast over 4.5:1.
- Mættede accentfarver, der fungerer på hvidt, virker ofte for tunge på mørkt. Derfor bruger mørke temaer lysere, blødere toner af de samme kulører.
- Gradienter gløder på mørke flader, men får let farvebånd. Derfor har mørke gradienter gavn af et svagt lag korn.

**Design til mørk tilstand** kræver et særskilt sæt værdier til flader, tekst, accenter og billeder frem for at vende farverne fra lys tilstand om. Mørke flader ændrer, hvordan farver opfører sig: mættede kulører virker tungere, skygger forsvinder, kridhvid tekst blænder, og glatte gradienter får farvebånd. De samme egenskaber gør heldigvis mørke temaer smukke, når du bruger dem rigtigt: farver gløder, dybden får flere lag, og indholdet står roligt i forgrunden.

## Derfor bør du undgå helt sorte baggrunde

Rent sort, `#000000`, med helt hvid tekst giver den højest mulige kontrast på 21:1. Det lyder ideelt, men er ofte ubehageligt: mange læsere ser lys tekst flyde ud eller flimre mod rent sort, især i lange afsnit. Sort giver heller ikke plads til mørkere nuancer, så du kan ikke vise, at én flade ligger under en anden. Og på nogle OLED-telefoner kan indhold, der ruller over helt sort, kortvarigt trække spor, når pixels tændes. Googles Material Design-vejledning bruger derfor `#121212` som mørk grundflade.

- Bund: #0e0f12
- Flade: #121417
- Hævet: #1a1d22
- Kort: #22262c
- Menu og popover: #2b3038
- Tekst: #e6e8ec
- Sekundær tekst: #9aa1ad

En neutral mørk skala. Hver flade er lidt lysere end den nedenunder. Tekst måler 15:1 og sekundær tekst 7.1:1 på farven Flade.

## Vis hævede lag med lyshed

I lys tilstand adskiller skygger et kort fra siden. På en mørk baggrund er en mørk skygge knap synlig. Derfor vender mørke temaer logikken om: jo tættere en flade er på betragteren, desto lysere er den. Siden er mørkest, kort er et trin lysere, og menuer og dialoger er endnu lysere. Hold trinene små og ensartede, og tilføj en hårfin kant i en lidt lysere tone, hvor to lignende flader mødes.

| Lag | Farve | Ekstra adskillelse |
| --- | --- | --- |
| Sidebaggrund | `#0e0f12` | Ingen |
| Hovedflade | `#121417` | Ingen |
| Kort | `#22262c` | 1px kant `rgb(255 255 255 / 0.06)` |
| Menuer og popovers | `#2b3038` | Kant og en blød, mørk skygge |
| Dialoger | `#2b3038` | Et dæmpende slør over alt nedenunder |

Hævede lag vist med lyshed. Værdierne er et udgangspunkt. Hold dine egne trin jævne.

## Tekstfarve og kontrast i mørk tilstand

Brug en knækket hvid som `#e6e8ec` til brødtekst frem for rent hvid. Den giver stadig meget høj kontrast, 15:1 på `#121417`, og blænder mindre. Sekundær tekst kan gå ned til mellemgrå, men kontrollér den: `#9aa1ad` holder sig på 7.1:1 på samme flade og 5.5:1 på et lysere kort. WCAG kræver mindst 4.5:1 til almindelig tekst uanset tema. [Farvekontrast](https://gradiently.design/da/guide/color-contrast-accessibility) forklarer, hvordan du tjekker det.

> **Skrift virker federe på mørkt** Lys tekst på en mørk flade virker ofte federe end samme skriftvægt i mørkt på lyst. Hvis brødteksten føles tung i mørk tilstand, så prøv en lidt lettere vægt eller en smule større bogstavafstand.

## Dæmp accentfarvernes mætning

En kraftig violet som `#7c3aed` fungerer som knap på hvidt. På en mørk flade virker den tung og måler kun 3.2:1, hvilket er for lavt til tekstlinks. Den lysere tone `#a78bfa` måler 6.8:1 på samme baggrund og opleves som den samme brandfarve. Hovedreglen er at gøre accenter lysere og lidt mindre mættede i mørke temaer og bevare kuløren.

### Accent fra lys tilstand på mørkt

- Violet `#7c3aed`: 3.2:1 på `#121417`
- Blå `#2563eb`: 3.6:1 på `#121417`
- Tunge, flimrende kanter på store områder
- Består ikke som linktekst

### Lysere tone af samme kulør til mørkt

- Violet `#a78bfa`: 6.8:1 på `#121417`
- Blå `#93c5fd`: 10.2:1 på `#121417`
- Blød, lysende og tydeligt i brandets stil
- Består som linktekst

## Gradienter i design til mørk tilstand

Gradienter kommer til deres ret på mørke flader. En dyb baggrund får farve til at ligne lys frem for maling. Derfor vises glød, nordlys og neonblandinger så ofte på næsten sort. Hold det meste af fladen mørk, og lad farven dukke op ét eller to steder: en glød bag et heroafsnit, en gradientkant på et fremhævet kort eller et blødt farveslør øverst på siden.

- Glød øverst på en mørk flade: `radial-gradient(ellipse at 50% 0%, #3b2a7a, #121417 60%)`
- Lys i hjørnet: `radial-gradient(circle at 85% 15%, #0e7490, #121417 45%)`
- Blødt violet slør: `linear-gradient(180deg, #1a1033, #121417 70%)`
- Glød ved horisonten: `radial-gradient(ellipse at 50% 120%, #9d174d, #1a1033 45%, #121417 75%)`

Gradienter til mørk tilstand, der gløder og stadig ender i fladens farve, så de bliver en del af grænsefladen frem for at ligge ovenpå.

Ulempen er farvebånd. Mørke, gradvise overgange bruger kun få forskellige nuancer på en 8-bit-skærm, så trinene bliver synlige. Et svagt kornlag skjuler dem. Se [farvebånd i gradienter](https://gradiently.design/da/guide/gradient-banding) og til web [støjtekstur i CSS](https://gradiently.design/da/guide/css-noise-texture). [Mørke gradientbaggrunde](https://gradiently.design/da/guide/dark-gradient-backgrounds) har paletter til baggrunde, der er mørke hele vejen igennem.

## Byg mørk tilstand med CSS

Definér farverne én gang som brugerdefinerede egenskaber, og skift deres værdier efter tema. `color-scheme` fortæller browseren, at dens egne kontroller og rullebjælker skal følge temaet, og funktionen `light-dark()` vælger mellem to værdier ud fra det aktive farveskema.

```css
:root {
  color-scheme: light dark;
  --surface: light-dark(#ffffff, #121417);
  --card: light-dark(#f6f7f9, #22262c);
  --text: light-dark(#16181d, #e6e8ec);
  --text-muted: light-dark(#5b6270, #9aa1ad);
  --accent: light-dark(#7c3aed, #a78bfa);
}

body {
  background: var(--surface);
  color: var(--text);
}

@media (prefers-color-scheme: dark) {
  img:not([src$=".svg"]) {
    filter: brightness(0.9);
  }
}
```

Ét sæt tokens, to temaer. En let dæmpning af fotos i mørk tilstand forhindrer, at de blænder mod den mørkere side.

Giv folk en manuel omskifter ud over at følge systemindstillingen, og husk alt uden for grænsefladen: diagrammer, illustrationer, logoer og e-mails skal også tjekkes i begge temaer. [Gradienter i e-mails](https://gradiently.design/da/guide/gradients-in-email) gennemgår, hvordan mailapps håndterer mørk tilstand.

## Tjekliste til mørk tilstand

- Mørkegrå flader frem for rent sort med et tydeligt trin i lyshed for hvert hævet lag.
- Brødtekst i knækket hvid med høj kontrast. Sekundær tekst stadig over 4.5:1.
- Lysere og blødere accenter, der bevarer brandets kulør.
- Kanter frem for skygger til at adskille lignende flader.
- Farve brugt som lys enkelte steder frem for overalt.
- Korn på store mørke gradienter for at undgå farvebånd.
- Logoer med en lys version til mørke flader. Se [logo på en gradientbaggrund](https://gradiently.design/da/guide/logo-on-gradient-background).
- Begge temaer gennemgået på en rigtig telefon i et dæmpet rum og i dagslys.

## FAQ

### Skal mørk tilstand bruge rent sort?

Som regel ikke til de vigtigste flader. Mørkegrå som #121212 eller lignende dæmper blænding, giver plads til lysere, hævede flader og undgår efterslæb på nogle OLED-skærme.

### Hvilken tekstfarve er bedst til mørk tilstand?

En knækket hvid som #e6e8ec frem for rent hvid. Den giver stadig meget høj kontrast, men blænder mindre.

### Hvordan viser du dybde i mørk tilstand?

Gør flader lysere, jo tættere de er på betragteren, og brug diskrete kanter mellem lignende flader, fordi skygger knap kan ses på mørke baggrunde.

### Hvorfor ser mine brandfarver forkerte ud i mørk tilstand?

Mættede farver valgt til hvide baggrunde virker tunge på mørkt og har måske for lav kontrast. Brug lysere, blødere toner af de samme kulører.

### Fungerer gradienter i mørk tilstand?

Ja, rigtig godt: farver gløder på mørke flader. Brug dem enkelte steder, lad dem ende i fladens farve, og tilføj svagt korn for at undgå farvebånd.