Gradienter i mørk tilstand: bevar dybden uden blænding

Gradienter i dark mode ser bedst ud, når du giver dem deres egne farver frem for at genbruge det lyse temas. På en mørk bund tilpasser øjet sig, og hver mættet farve virker klarere, så en gradient, der føltes rolig på hvid, begynder at blænde. Sænk kromaen, hold klar farve til små områder, tone bunden i stedet for at bruge ren sort, og skift værdierne med prefers-color-scheme eller light-dark(). Dybden bliver; blændingen forsvinder.

Hvorfor gradienter fra det lyse tema svigter i mørket

Tre ting ændrer sig, når siden bliver mørk. Store lyse områder bliver det klareste i rummet, hvilket læses som blænding frem for farve. Skygger holder op med at virke, så gradienter, der brugte mørkere kanter til dybde, mister den. Og trinnene mellem mørke toner bliver lettere at se, så subtile gradienter begynder at få striber. Mørk tilstand i design dækker det bredere tema; denne side handler om gradienterne.

Fem regler for gradienter i dark mode

1. 1

   Tone bunden

   Brug et næsten sort, der læner sig mod din farvetone, som #0b0a14 til violette brands, i stedet for #000000. Ren sort får farven til at se limet på.

2. 2

   Sænk kromaen

   Træk mætningen ned med omtrent en tredjedel til store områder. I OKLCH beholder du farvetonen og reducerer C-værdien.

3. 3

   Gør den lyse del mindre

   Lad klar farve fylde et hjørne eller en glød, og lad det meste af fladen ligge tæt på bunden.

4. 4

   Løft, skygge ikke

   Vis højde med lidt lysere flader og gradienter, der lysner mod toppen, da skygger forsvinder på mørke bunde.

5. 5

   Tilføj korn

   Fint korn bryder de synlige trin i mørke overgange. Kornede gradienter har opskriften.

Skift gradienter med prefers-color-scheme

Gem gradientfarver, ikke hele gradienter, i brugerdefinerede egenskaber. Så skal det mørke tema kun definere farverne om, og hver komponent, der bruger dem, opdateres. Det er det samme mønster, som er beskrevet i CSS-variabler til temaer.

: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æg mærke til, at de mørke glød er dybere, ikke klarere. På en mørk bund behøver en farve kun at være lidt lysere end omgivelserne for at læses som lys.

Sådan bruger du light-dark()

Funktionen light-dark() returnerer sin første farve i et lyst skema og sin anden i et mørkt. Den kræver color-scheme: light dark på elementet eller en forfader, og den understøttes i nuværende Chrome, Edge, Safari og Firefox. Den holder begge værdier på én linje, hvilket gør det lettere at gennemgå en palet.

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

Understøt en manuel temaomskifter

Mange websites lader folk tilsidesætte systemindstillingen. Læg valget på rodelementet og afgræns dine variabler til det. Media queryen håndterer standarden; attributten vinder, når nogen vælger.

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

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

Sådan justerer du en gradient til dark mode

Her er den samme brandgradient justeret stop for stop. At arbejde i OKLCH gør det forudsigeligt, fordi lyshed og kroma er to adskilte tal; OKLCH forklaret viser hvorfor.

Tekst på mørke gradienter

Lys tekst på en mørk gradient har som regel masser af kontrast, men tjek den, hvor gradienten er klarest, ikke hvor den er mørkest. En overskrift i #e2e8f0 på #0b0a14 ligger langt over de 4,5:1, som WCAG kræver til brødtekst; den samme overskrift over en klar violet glød gør det måske ikke. Undgå også ren hvid brødtekst på næsten sort: meget høj kontrast giver halation hos nogle læsere, så et blødt råhvidt er venligere. Farvekontrast og tilgængelighed har tallene.

For flere mørke paletter har mørke gradientbaggrunde et sæt til at kopiere. Og til opslag på sociale medier og slides, hvor du ikke kan teste hver linje i hånden, vælger Gradiently Automatisk farve lys eller mørk skrift pr. linje ud fra Markens egen palet, og Marken flytter sit roligste område bag ordene, så et mørkt design aldrig sætter en overskrift på sin klareste glød.