Tumman tilan liukuvärit: syvyyttä ilman häikäisyä

Tumman tilan liukuvärit näyttävät parhailta omilla väreillään vaalean teeman värien uudelleenkäytön sijaan. Silmä mukautuu tummaan pohjaan ja kylläiset värit tuntuvat kirkkaammilta. Valkoisella rauhallinen liukuväri alkaa siis häikäistä. Laske värikylläisyyttä, rajaa voimakkaat värit pieniin alueisiin ja sävytä pohjaa puhtaan mustan sijaan. Vaihda arvot prefers-color-scheme-kyselyllä tai light-dark()-funktiolla. Syvyys säilyy ja häikäisy poistuu.

Miksi vaalean teeman liukuvärit eivät toimi tummalla

Sivun tummuessa kolme asiaa muuttuu. Suuret kirkkaat alueet ovat huoneen kirkkaimpia kohteita ja tuntuvat häikäisyltä värin sijaan. Varjot lakkaavat toimimasta, joten reunoja tummentamalla syvyyttä luovat liukuvärit menettävät sen. Lisäksi tummien sävyjen väliset askeleet näkyvät helpommin, jolloin hienovaraiset liukuvärit raidoittuvat. Tumman tilan suunnittelu käsittelee laajempaa teemaa. Tämä sivu keskittyy liukuväreihin.

Viisi sääntöä tumman tilan liukuväreille

1. 1

   Sävytä pohja

   Käytä sävyysi taittuvaa lähes mustaa, kuten violetille brändille #0b0a14, värin #000000 sijaan. Puhdas musta saa värin näyttämään päälle liimatulta.

2. 2

   Laske värikylläisyyttä

   Vähennä suurten alueiden kylläisyyttä noin kolmanneksella. OKLCH:ssa säilytä sävy ja pienennä C-arvoa.

3. 3

   Pienennä kirkasta osaa

   Anna voimakkaan värin täyttää kulma tai hohdealue. Pidä suurin osa pinnasta lähellä pohjaväriä.

4. 4

   Vaalenna, älä varjosta

   Näytä kohotus hieman vaaleammilla pinnoilla ja yläreunaan kirkastuvilla liukuväreillä, sillä varjot katoavat tummalla.

5. 5

   Lisää rakeisuutta

   Hieno kohina rikkoo tummien sekoitusten näkyvät askeleet. Rakeiset liukuvärit antaa ohjeen.

Liukuvärien vaihtaminen prefers-color-scheme-kyselyllä

Tallenna mukautettuihin ominaisuuksiin liukuvärien värit, älä kokonaisia liukuvärejä. Tumman teeman tarvitsee silloin määritellä vain värit uudelleen, ja kaikki niitä käyttävät komponentit päivittyvät. Sama malli kuvataan CSS-muuttujissa teemoille.

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

Huomaa, että tummat hohteet ovat syvempiä, eivät kirkkaampia. Tummalla pohjalla väri tarvitsee vain hieman ympäristöään suuremman valoisuuden näyttääkseen valolta.

light-dark()-funktion käyttäminen

light-dark() palauttaa ensimmäisen värinsä vaaleassa teemassa ja toisen tummassa. Se tarvitsee elementille tai sen esivanhemmalle asetuksen color-scheme: light dark. Nykyiset Chrome, Edge, Safari ja Firefox tukevat sitä. Molemmat arvot pysyvät yhdellä rivillä, mikä helpottaa paletin tarkistamista.

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

Manuaalisen teemavalinnan tukeminen

Monet sivustot antavat ohittaa järjestelmäasetuksen. Aseta valinta juurielementtiin ja rajaa muuttujat siihen. Mediakysely hoitaa oletuksen, ja attribuutti voittaa käyttäjän valitessa.

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

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

Liukuvärin säätäminen tummaan tilaan

Tässä sama brändiliukuväri säädettynä piste kerrallaan. OKLCH tekee muutoksesta ennakoitavan, koska valoisuus ja värikylläisyys ovat eri lukuja. OKLCH selitettynä kertoo miksi.

Teksti tummien liukuvärien päällä

Vaalealla tekstillä on tummassa liukuvärissä yleensä paljon kontrastia. Tarkista se silti kirkkaimmassa, älä tummimmassa kohdassa. #e2e8f0-otsikko pohjalla #0b0a14 ylittää reilusti WCAG:n leipätekstiltä vaatiman suhteen 4,5:1. Sama otsikko kirkkaan violetin hohteen päällä ei ehkä ylitä. Vältä myös puhdasta valkoista leipätekstiä lähes mustalla. Hyvin suuri kontrasti aiheuttaa joillekin lukijoille valon leviämistä kirjainten ympärille, joten pehmeä luonnonvalkoinen on lempeämpi. Värikontrasti ja saavutettavuus kertoo luvut.

Lisää kopioitavia paletteja löytyy tummista liukuväritaustoista. Somejulkaisuissa ja dioissa joka riviä ei voi tarkistaa käsin. Gradientlyn Automaattinen muste valitsee riveittäin vaalean tai tumman tekstivärin Markin omasta paletista, ja Mark siirtää rauhallisimman alueensa sanojen taakse. Tumma suunnitelma ei siis jätä otsikkoa kirkkaimpaan hohteeseen.