Gradienter i mörkt läge: behåll djupet utan bländning

Gradienter i mörkt läge ser bäst ut när du ger dem egna färger i stället för att återanvända det ljusa temats. På en mörk botten anpassar sig ögat och varje mättad färg verkar ljusare, så en gradient som kändes lugn på vitt börjar blända. Sänk kromat, håll levande färg till små ytor, färga botten i stället för att använda rent svart, och byt värdena med prefers-color-scheme eller light-dark(). Djupet finns kvar; bländningen försvinner.

Varför gradienter för ljust tema fallerar i mörker

Tre saker ändras när sidan blir mörk. Stora ljusa ytor blir det ljusaste i rummet, vilket läses som bländning snarare än färg. Skuggor slutar fungera, så gradienter som förlitade sig på mörknande kanter för djup förlorar det. Och stegen mellan mörka toner blir lättare att se, så subtila gradienter börjar banda. Design för mörkt läge går igenom det bredare temat; den här sidan handlar om gradienterna.

Fem regler för gradienter i mörkt läge

1. 1

   Färga botten

   Använd ett nästan svart som lutar mot din färgton, som #0b0a14 för violetta varumärken, i stället för #000000. Rent svart får färg att se påklistrad ut.

2. 2

   Sänk kromat

   Dra ner mättnaden med ungefär en tredjedel för stora ytor. I OKLCH behåller du färgtonen och minskar C-värdet.

3. 3

   Krymp den ljusa delen

   Låt levande färg ta ett hörn eller ett sken, och låt större delen av ytan ligga nära botten.

4. 4

   Lyft, skugga inte

   Visa höjd med något ljusare ytor och gradienter som ljusnar mot toppen, eftersom skuggor försvinner på mörka bottnar.

5. 5

   Lägg till korn

   Fint brus bryter upp de synliga stegen i mörka övergångar. Korniga gradienter har receptet.

Byta gradienter med prefers-color-scheme

Lagra gradientfärger, inte hela gradienter, i anpassade egenskaper. Då behöver det mörka temat bara omdefiniera färgerna, och varje komponent som använder dem uppdateras. Det är samma mönster som beskrivs i CSS-variabler för teman.

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

Lägg märke till att de mörka skenen är djupare, inte ljusare. På en mörk botten behöver en färg bara vara lite ljusare än omgivningen för att läsas som ljus.

Använd light-dark()

Funktionen light-dark() returnerar sin första färg i ett ljust schema och sin andra i ett mörkt. Den kräver color-scheme: light dark på elementet eller en förfader, och stöds i aktuella Chrome, Edge, Safari och Firefox. Den håller båda värdena på en rad, vilket gör det lättare att granska en palett.

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

Stöd en manuell temaväxlare

Många webbplatser låter folk åsidosätta systeminställningen. Lägg valet på rotelementet och begränsa dina variabler till det. Mediafrågan hanterar standardvärdet; attributet vinner när någon väljer.

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

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

Trimma om en gradient för mörkt läge

Här är samma varumärkesgradient justerad stopp för stopp. Att arbeta i OKLCH gör det förutsägbart, eftersom ljushet och kroma är separata tal; OKLCH förklarat visar varför.

Text på mörka gradienter

Ljus text på en mörk gradient har oftast gott om kontrast, men kontrollera den där gradienten är som ljusast, inte där den är som mörkast. En rubrik i #e2e8f0 på #0b0a14 ligger långt över de 4,5:1 som WCAG kräver för brödtext; samma rubrik över ett ljust violett sken kanske inte gör det. Undvik också rent vit brödtext på nästan svart: mycket hög kontrast ger halation för vissa läsare, så en mjuk off-white är snällare. Färgkontrast och tillgänglighet har siffrorna.

För fler mörka paletter har mörka gradientbakgrunder en uppsättning att kopiera. Och för sociala inlägg och bildspel, där du inte kan testa varje rad för hand, väljer Gradiently Auto-bläck ljus eller mörk text per rad utifrån Markens egen palett, och Marken flyttar sitt lugnaste område bakom orden, så en mörk design lägger aldrig en rubrik på sitt ljusaste sken.