# Design for mørk modus: bakgrunner, farge og kontrast

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

Mørk modus er ikke lys modus med omvendte farger. Flater, tekst, aksenter og gradienter trenger egne verdier, og reglene er annerledes enn dem du kjenner.

## The short version

- Godt design for mørk modus bruker mørkegrått fremfor rent svart på hovedflatene, noe som myker opp kontrasten og gir rom for dybde.
- I mørke grensesnitt vises høyde med lyshet: flater nærmere betrakteren er litt lysere, fordi skygger knapt synes på mørke bakgrunner.
- Tekst på mørke bakgrunner er mer behagelig å lese i brukket hvitt enn i rent hvitt, mens sekundærtekst fortsatt har over 4.5:1 i kontrast.
- Mettede aksentfarger som fungerer på hvitt, virker ofte for tunge på mørkt, så mørke temaer bruker lysere, mykere nyanser av samme fargetoner.
- Gradienter gløder på mørk bunn, men får lett fargebånd der, så mørke gradienter har nytte av et svakt kornlag.

**Design for mørk modus** betyr å lage et eget sett med verdier for flater, tekst, aksenter og bilder, ikke å snu fargene fra lys modus. Mørke bunner endrer hvordan farger oppfører seg: mettede fargetoner virker tyngre, skygger forsvinner, skarp hvit tekst blender, og jevne gradienter får fargebånd. Heldigvis er det de samme egenskapene som gjør mørke temaer vakre når de håndteres godt: farger gløder, dybden bygges i lag, og innholdet ligger rolig i forgrunnen.

## Hvorfor du bør unngå helt svarte bakgrunner

Rent svart, `#000000`, med rent hvit tekst gir høyest mulig kontrast på 21:1. Det høres ideelt ut, men er ofte ubehagelig: mange lesere ser lys tekst gløde utover eller vibrere mot rent svart, særlig i lange tekster. Svart gir heller ikke rom for noe mørkere, så du kan ikke vise at én flate ligger under en annen. Og på enkelte OLED-telefoner kan innhold som rulles over helt svart, gi et kort etterslep når pikslene slås på. Googles Material Design bruker `#121212` som mørk grunnflate av disse grunnene.

- Bunn: #0e0f12
- Flate: #121417
- Hevet: #1a1d22
- Kort: #22262c
- Meny og sprettvindu: #2b3038
- Tekst: #e6e8ec
- Sekundærtekst: #9aa1ad

En nøytral mørk skala. Hver flate er litt lysere enn den under. Teksten måler 15:1 og sekundærteksten 7.1:1 på fargen Flate.

## Vis høyde med lyshet

I lys modus skiller skygger et kort fra siden. På mørk bakgrunn er en mørk skygge knapt synlig. Derfor snur mørke temaer logikken: jo nærmere en flate er betrakteren, desto lysere er den. Siden er mørkest, kort er ett trinn lysere, og menyer og dialogbokser enda lysere. Hold trinnene små og konsekvente, og legg til en hårfin kant i en litt lysere tone der to like flater møtes.

| Lag | Farge | Ekstra skille |
| --- | --- | --- |
| Sidebakgrunn | `#0e0f12` | Ingen |
| Hovedflate | `#121417` | Ingen |
| Kort | `#22262c` | 1px kant `rgb(255 255 255 / 0.06)` |
| Menyer og sprettvinduer | `#2b3038` | Kant og en myk, mørk skygge |
| Dialogbokser | `#2b3038` | Et mørkt slør over alt under |

Høyde vist med lyshet. Verdiene er et utgangspunkt; hold dine egne trinn jevne.

## Tekstfarge og kontrast i mørk modus

Bruk brukket hvitt som `#e6e8ec` til brødtekst i stedet for rent hvitt. Det gir fortsatt svært høy kontrast, 15:1 på `#121417`, og blender mindre. Sekundærtekst kan være mellomgrå, men mål den: `#9aa1ad` holder 7.1:1 på samme flate og 5.5:1 på et lysere kort. WCAG krever minst 4.5:1 for vanlig tekst, uansett tema; [fargekontrast](https://gradiently.design/nb/guide/color-contrast-accessibility) forklarer hvordan du kontrollerer det.

> **Skriften virker fetere på mørkt** Lys tekst på mørk bunn ser gjerne fetere ut enn samme skriftvekt i mørkt på lyst. Hvis brødteksten virker tung i mørk modus, prøv en litt lettere skriftvekt eller litt mer bokstavavstand.

## Demp metningen i aksentfarger

En sterk fiolett som `#7c3aed` fungerer som knapp på hvitt. På en mørk flate virker den tung og måler bare 3.2:1, for lavt for tekstlenker. Den lysere nyansen `#a78bfa` måler 6.8:1 på samme bakgrunn og oppfattes som samme merkevarefarge. Hovedregelen: gjør aksenter lysere og litt mindre mettede i mørke temaer, og behold fargetonen.

### Aksent fra lys modus på mørkt

- Fiolett `#7c3aed`: 3.2:1 på `#121417`
- Blått `#2563eb`: 3.6:1 på `#121417`
- Tunge, vibrerende kanter på store flater
- Oppfyller ikke kravet til lenketekst

### Samme fargetone tilpasset mørk modus

- Fiolett `#a78bfa`: 6.8:1 på `#121417`
- Blått `#93c5fd`: 10.2:1 på `#121417`
- Myk, lysende og tydelig i tråd med merkevaren
- Oppfyller kravet til lenketekst

## Gradienter i design for mørk modus

Mørke bunner får gradienter til å skinne. En dyp bakgrunn lar farge se ut som lys fremfor maling. Derfor vises glød, nordlys og neonoverganger så ofte på nesten svart. Hold det meste av flaten mørk og la farge dukke opp ett eller to steder: en glød bak et toppfelt, en gradientkant på et fremhevet kort, et mykt fargeslør øverst på siden.

- Glød øverst på en mørk flate: `radial-gradient(ellipse at 50% 0%, #3b2a7a, #121417 60%)`
- Hjørnelys: `radial-gradient(circle at 85% 15%, #0e7490, #121417 45%)`
- Mykt fiolett slør: `linear-gradient(180deg, #1a1033, #121417 70%)`
- Glør ved horisonten: `radial-gradient(ellipse at 50% 120%, #9d174d, #1a1033 45%, #121417 75%)`

Gradienter for mørk modus som gløder og likevel ender i flatens farge, slik at de hører hjemme inne i grensesnittet fremfor oppå det.

Ulempen er fargebånd. Mørke, langsomme overganger bruker bare noen få ulike nyanser på en 8-bitsskjerm, så trinnene blir synlige. Et svakt kornlag skjuler dem; se [fargebånd i gradienter](https://gradiently.design/nb/guide/gradient-banding) og, for nett, [støytekstur i CSS](https://gradiently.design/nb/guide/css-noise-texture). For bakgrunner bygget helt i mørke finner du paletter i [mørke gradientbakgrunner](https://gradiently.design/nb/guide/dark-gradient-backgrounds).

## Bygg mørk modus i CSS

Definer farger én gang som egendefinerte egenskaper og bytt verdiene per tema. `color-scheme` ber nettleseren tegne sine egne kontroller og rullefelt i riktig tema, og funksjonen `light-dark()` velger mellom to verdier ut fra det aktive fargevalget.

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

Ett sett med designverdier, to temaer. Litt demping av bilder i mørk modus hindrer at de blender mot den mørkere siden.

Gi folk en manuell bryter i tillegg til å følge systeminnstillingen, og husk alt utenfor grensesnittet: diagrammer, illustrasjoner, logoer og e-post må også kontrolleres i begge temaer. [Gradienter i e-post](https://gradiently.design/nb/guide/gradients-in-email) forklarer hvordan e-postapper håndterer mørk modus.

## En sjekkliste for mørk modus

- Mørkegrå flater, ikke rent svarte, med et tydelig lyshetstrinn for hvert høydenivå.
- Brukket hvit brødtekst med høy kontrast; sekundærtekst fortsatt over 4.5:1.
- Lysere og mykere aksenter som beholder merkevarens fargetone.
- Kanter fremfor skygger for å skille like flater.
- Farge brukt som lys noen få steder, ikke overalt.
- Korn på store mørke gradienter for å hindre fargebånd.
- En lys logoversjon for mørke bunner; se [logo på gradientbakgrunn](https://gradiently.design/nb/guide/logo-on-gradient-background).
- Begge temaer vurdert på en ekte telefon, i et dunkelt rom og i dagslys.

## FAQ

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

Vanligvis ikke på hovedflatene. Mørkegrått, som #121212 eller lignende, reduserer blending, gir rom for lysere hevede flater og unngår etterslep på enkelte OLED-skjermer.

### Hvilken tekstfarge er best i mørk modus?

Brukket hvitt som #e6e8ec fremfor rent hvitt. Det gir fortsatt svært høy kontrast, men blender mindre.

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

Gjør flater lysere jo nærmere de er betrakteren, og bruk diskrete kanter mellom like flater, siden skygger knapt synes på mørke bakgrunner.

### Hvorfor ser merkevarefargene mine feil ut i mørk modus?

Mettede farger valgt for hvite bakgrunner virker tunge på mørkt og kan ha for lav kontrast. Bruk lysere, mykere nyanser av samme fargetoner.

### Fungerer gradienter i mørk modus?

Svært godt: farger gløder på mørk bunn. Bruk dem noen få steder, la dem ende i flatens farge, og legg til svakt korn for å hindre fargebånd.