# Design för mörkt läge: bakgrunder, färg och kontrast

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

Mörkt läge är inte ljust läge inverterat. Ytor, text, accenter och gradienter behöver egna värden, och reglerna skiljer sig från dem du känner.

## The short version

- Bra design för mörkt läge använder mörkgrått i stället för rent svart på huvudytorna, vilket mjukar upp kontrasten och lämnar plats att visa djup.
- I mörka gränssnitt visas höjd med ljushet: ytor närmare betraktaren är något ljusare, eftersom skuggor knappt syns på mörka bakgrunder.
- Text på mörk bakgrund läses bekvämare i off-white än i rent vitt, och sekundär text ska ändå ligga över 4,5:1 i kontrast.
- Mättade accentfärger som fungerar på vitt ser ofta för tunga ut på mörkt, så mörka teman använder ljusare, mjukare toner av samma nyanser.
- Gradienter glöder på mörk botten men får lätt band där, så mörka gradienter mår bra av ett svagt kornlager.

**Design för mörkt läge** innebär att bygga en separat uppsättning värden för ytor, text, accenter och bilder, inte att vända på det ljusa lägets färger. Mörk botten ändrar hur färg beter sig: mättade nyanser ser tyngre ut, skuggor försvinner, skarpvit text bländar och släta gradienter får band. Den goda nyheten är att samma egenskaper gör mörka teman vackra när de hanteras väl: färg glöder, djupet känns lagrat och innehållet sitter lugnt i förgrunden.

## Därför undviker du rent svarta bakgrunder

Rent svart, `#000000`, med rent vit text ger den största möjliga kontrasten, 21:1. Det låter idealiskt men är ofta obekvämt: många läsare upplever att ljus text blommar eller vibrerar mot rent svart, särskilt i långa stycken. Svart lämnar dessutom ingenstans mörkare att gå, så du kan inte visa att en yta ligger under en annan. Och på vissa OLED-telefoner kan innehåll som rullar över äkta svart lämna en kort släpeffekt när pixlarna tänds. Googles riktlinjer för Material Design använder `#121212` som mörk basyta av de här skälen.

- Bas: #0e0f12
- Yta: #121417
- Upphöjd: #1a1d22
- Kort: #22262c
- Meny och popover: #2b3038
- Text: #e6e8ec
- Sekundär text: #9aa1ad

En neutral mörk skala. Varje yta är lite ljusare än den under. Text mäter 15:1 och sekundär text 7,1:1 på ytfärgen.

## Visa höjd med ljushet

I ljust läge skiljer skuggor ett kort från sidan. På mörk bakgrund syns en mörk skugga knappt. Därför vänder mörka teman på logiken: ju närmare betraktaren en yta ligger, desto ljusare är den. Sidan är mörkast, korten ett steg ljusare, menyer och dialogrutor ljusare igen. Håll stegen små och jämna, och lägg till en hårfin kantlinje i en något ljusare ton där två liknande ytor möts.

| Lager | Färg | Extra avgränsning |
| --- | --- | --- |
| Sidbakgrund | `#0e0f12` | Ingen |
| Huvudyta | `#121417` | Ingen |
| Kort | `#22262c` | Kantlinje på 1 px `rgb(255 255 255 / 0.06)` |
| Menyer och popovers | `#2b3038` | Kantlinje, plus en mjuk mörk skugga |
| Dialogrutor | `#2b3038` | En nedtonad täckyta över allt under |

Höjd genom ljushet. Värdena är en startpunkt, håll dina egna steg jämna.

## Textfärg och kontrast i mörkt läge

Använd en off-white som `#e6e8ec` för brödtext i stället för rent vitt. Den ger fortfarande mycket hög kontrast, 15:1 på `#121417`, och bländar mindre. Sekundär text kan sjunka till ett mellangrått, men kontrollera den: `#9aa1ad` håller 7,1:1 på samma yta och 5,5:1 på ett ljusare kort. WCAG kräver minst 4,5:1 för normal text, oavsett tema. [Färgkontrast](https://gradiently.design/sv/guide/color-contrast-accessibility) förklarar hur du kontrollerar det.

> **Vikten ser tyngre ut på mörkt** Ljus text på mörk botten ser ofta fetare ut än samma vikt i mörkt på ljust. Om brödtexten känns tung i mörkt läge kan du prova en något lättare vikt eller lite mer bokstavsavstånd.

## Avmättade accentfärger

En stark violett som `#7c3aed` fungerar som knapp på vitt. På en mörk yta ser den tung ut och mäter bara 3,2:1, för lite för textlänkar. Den ljusare tonen `#a78bfa` mäter 6,8:1 på samma bakgrund och läses som samma varumärkesfärg. Den generella regeln: flytta accenter mot ljusare och något mindre mättade för mörka teman, och behåll nyansen.

### Ljusa lägets accent på mörkt

- Violett `#7c3aed`: 3,2:1 på `#121417`
- Blått `#2563eb`: 3,6:1 på `#121417`
- Tunga, vibrerande kanter på stora ytor
- Underkänd som länktext

### Mörka lägets ton av samma nyans

- Violett `#a78bfa`: 6,8:1 på `#121417`
- Blått `#93c5fd`: 10,2:1 på `#121417`
- Mjuk, lysande och tydligt i linje med varumärket
- Godkänd som länktext

## Gradienter i design för mörkt läge

Mörk botten är där gradienter lyser. En djup bakgrund låter färg se ut som ljus i stället för färg, vilket är därför sken, norrsken och neonövergångar så ofta visas på nästan svart. Håll det mesta av ytan mörkt och låt färg dyka upp på ett eller två ställen: ett sken bakom en hero, en gradientkant på ett utvalt kort, en mjuk toning högst upp på en sida.

- Toppsken på en mörk yta: `radial-gradient(ellipse at 50% 0%, #3b2a7a, #121417 60%)`
- Hörnljus: `radial-gradient(circle at 85% 15%, #0e7490, #121417 45%)`
- Mjuk violett toning: `linear-gradient(180deg, #1a1033, #121417 70%)`
- Horisontglöd: `radial-gradient(ellipse at 50% 120%, #9d174d, #1a1033 45%, #121417 75%)`

Gradienter för mörkt läge som glöder och ändå slutar i ytfärgen, så att de ligger inuti gränssnittet i stället för ovanpå det.

Haken är band. Mörka, långsamma toningar använder bara några få olika nyanser på en 8-bitarsskärm, så stegen blir synliga. Ett svagt kornlager döljer dem. Se [gradientband](https://gradiently.design/sv/guide/gradient-banding) och, för webben, [CSS-brustextur](https://gradiently.design/sv/guide/css-noise-texture). För bakgrunder som helt och hållet är byggda i mörker finns paletter i [mörka gradientbakgrunder](https://gradiently.design/sv/guide/dark-gradient-backgrounds).

## Bygga mörkt läge i CSS

Definiera färgerna en gång som anpassade egenskaper och byt deras värden per tema. `color-scheme` säger åt webbläsaren att rendera sina egna kontroller och rullningslister i motsvarande tema, och funktionen `light-dark()` väljer mellan två värden utifrån det aktiva schemat.

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

En uppsättning tokens, två teman. Att dämpa foton något i mörkt läge hindrar dem från att blända mot den mörkare sidan.

Ge folk en manuell växel utöver att följa systeminställningen, och tänk på allt utanför gränssnittet: diagram, illustrationer, logotyper och mejl behöver kontrolleras i båda teman. [Gradienter i mejl](https://gradiently.design/sv/guide/gradients-in-email) tar upp hur mejlappar hanterar mörkt läge.

## En checklista för mörkt läge

- Mörkgrå ytor, inte rent svart, med ett tydligt ljushetssteg per höjdnivå.
- Off-white brödtext med hög kontrast, och sekundär text som ändå ligger över 4,5:1.
- Accenter flyttade mot ljusare och mjukare, med varumärkets nyans intakt.
- Kantlinjer, inte skuggor, för att skilja liknande ytor åt.
- Färg som ljus på några få ställen, inte överallt.
- Korn på stora mörka gradienter för att förhindra band.
- Logotyper med en ljus version för mörk botten. Se [logotyp på gradientbakgrund](https://gradiently.design/sv/guide/logo-on-gradient-background).
- Båda teman granskade på en riktig telefon, i ett dunkelt rum och i dagsljus.

## FAQ

### Ska mörkt läge använda rent svart?

Oftast inte för huvudytorna. Mörkgrått, som #121212 eller liknande, minskar bländning, lämnar plats för ljusare upphöjda ytor och undviker släpeffekter på vissa OLED-skärmar.

### Vilken textfärg är bäst i mörkt läge?

En off-white som #e6e8ec i stället för rent vitt. Den ger fortfarande mycket hög kontrast men bländar mindre.

### Hur visar man djup i mörkt läge?

Gör ytor ljusare ju närmare betraktaren de kommer, och använd diskreta kantlinjer mellan liknande ytor, eftersom skuggor knappt syns på mörka bakgrunder.

### Varför ser mina varumärkesfärger fel ut i mörkt läge?

Mättade färger som valts för vita bakgrunder ser tunga ut på mörkt och kan misslyckas med kontrasten. Använd ljusare, mjukare toner av samma nyanser.

### Fungerar gradienter i mörkt läge?

Mycket bra: färg glöder på mörk botten. Använd dem på några få ställen, låt dem sluta i ytfärgen och lägg på svagt korn för att stoppa band.