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

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.

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.

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 förklarar hur du kontrollerar det.

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.

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.

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 och, för webben, CSS-brustextur. För bakgrunder som helt och hållet är byggda i mörker finns paletter i mörka gradientbakgrunder.

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.

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

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 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.
• Båda teman granskade på en riktig telefon, i ett dunkelt rum och i dagsljus.