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

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

Valkoisella hillitysti hohtava liukuväri voi loistaa liikaa tummalla näytöllä. Näin säädät liukuvärit tummaan tilaan syvyyttä säilyttäen. Mukana CSS prefers-color-scheme-, light-dark()- ja käsivalintaan.

## The short version

- Tumman tilan liukuvärit kannattaa suunnitella erikseen. Valkoisella tasapainoiset kylläiset värit näyttävät tummalla pohjalla kovilta ja häikäiseviltä.
- Vähennä tummalla liukuvärien värikylläisyyttä, rajaa kirkkaat värit pienille alueille ja käytä brändisävyyn taitettua lähes mustaa puhtaan mustan sijaan.
- Vaihda liukuvärejä teemojen välillä tallentamalla niiden värit CSS:n mukautettuihin ominaisuuksiin ja määrittelemällä ne uudelleen prefers-color-scheme: dark -mediakyselyssä.
- CSS:n light-dark()-funktio valitsee kahdesta väristä käytössä olevan color-scheme-arvon mukaan ja pitää molemmat arvot vierekkäin.
- Tummien liukuvärien raidoittuminen näkyy vaaleita selvemmin, joten tummaan tilaan kannattaa lisätä kevyt rakeisuuskerros.

**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](https://gradiently.design/fi/guide/dark-mode-design) käsittelee laajempaa teemaa. Tämä sivu keskittyy liukuväreihin.

- Vaalean teeman pääosio: `linear-gradient(135deg, #ede9fe 0%, #c4b5fd 50%, #f9a8d4 100%)`
- Suora tumma: täysi kylläisyys: `linear-gradient(135deg, #7c3aed 0%, #db2777 100%)`
- Säädetty tumma: valo kulmasta: `radial-gradient(circle at 80% 15%, #4c1d95 0%, #1a1530 45%, #0b0a14 85%)`

Sama brändiliukuväri kolmella tavalla. Keskimmäinen syntyy vaalean suunnitelman pelkällä tummentamisella: voimakas, litteä ja väsyttävä. Viimeinen säilyttää violetin mutta antaa sen hohtaa kulmasta sävytetyllä pohjalla.

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

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. **Laske värikylläisyyttä** Vähennä suurten alueiden kylläisyyttä noin kolmanneksella. OKLCH:ssa säilytä sävy ja pienennä C-arvoa.
3. **Pienennä kirkasta osaa** Anna voimakkaan värin täyttää kulma tai hohdealue. Pidä suurin osa pinnasta lähellä pohjaväriä.
4. **Vaalenna, älä varjosta** Näytä kohotus hieman vaaleammilla pinnoilla ja yläreunaan kirkastuvilla liukuväreillä, sillä varjot katoavat tummalla.
5. **Lisää rakeisuutta** Hieno kohina rikkoo tummien sekoitusten näkyvät askeleet. [Rakeiset liukuvärit](https://gradiently.design/fi/guide/grainy-gradients) antaa ohjeen.

- Pohja: #0b0a14
- Pinta: #1a1530
- Kohotettu: #2a2148
- Syvä violetti: #4c1d95
- Korostus: #8b5cf6
- Tekstikorostus: #c4b5fd

Tumma liukuvärisarja violetille brändille. Suurin osa näytöstä käyttää kolmea ensimmäistä. Korostus näkyy pienissä kohdissa ja vaalea liila on varattu tekstille ja kuvakkeille.

## 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](https://gradiently.design/fi/guide/css-custom-properties-theming).

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

Koska --hero ja sen värit ovat samassa elementissä, mediakyselyn värimääritykset päivittävät liukuvärin kaikkialla, missä sitä käytetään. color-scheme käskee selainta tummentamaan myös vierityspalkit ja lomakeohjaimet.

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.

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

Nykyisissä selaimissa light-dark() hyväksyy värejä, ei kuvia. Käytä sitä siis kussakin väripisteessä, älä koko liukuvärissä.

### 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.

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

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

Kun color-scheme asetetaan yhteen arvoon, myös light-dark() seuraa valintaa.

## 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ä](https://gradiently.design/fi/guide/oklch-explained) kertoo miksi.

| Piste | Vaalea teema | Tumma teema | Muutos |
| --- | --- | --- | --- |
| Pohja | `oklch(98% 0.01 295)` | `oklch(15% 0.03 295)` | Sävytetty lähes musta, ei musta |
| Pääväri | `oklch(85% 0.09 295)` | `oklch(35% 0.15 295)` | Tummempi, kylläisyys maltillinen |
| Korostus | `oklch(84% 0.10 350)` | `oklch(40% 0.12 265)` | Viileämpi kuuman pinkin loisteen välttämiseksi |
| Tekstikorostus | `oklch(45% 0.20 295)` | `oklch(82% 0.09 295)` | Vaaleampi ja pehmeämpi pienelle tekstille |

Päävärien sävy pysyy samana, joten brändi tunnistetaan molemmissa teemoissa.

Tumman teeman pääosio OKLCH:lla: `radial-gradient(circle at 80% 15%, oklch(35% 0.15 295) 0%, transparent 45%), radial-gradient(circle at 10% 90%, oklch(40% 0.12 265) 0%, transparent 50%), linear-gradient(oklch(15% 0.03 295), oklch(15% 0.03 295))`

Taulukon tummat arvot kerrostettuina. Kopioi ja säädä kylläisyyttä, kunnes hohde tuntuu lämpimältä eikä kirkkaalta.

## 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](https://gradiently.design/fi/guide/color-contrast-accessibility) kertoo luvut.

### Vältä tummassa tilassa

- Puhdas musta pohja ja kylläiset väripisteet
- Vaalean teeman liukuväri tummennettuna
- Suuret neonvärialueet
- Puhtaan valkoiset kappaleet
- Tasaiset tummat liukuvärit ilman rakeisuutta

### Tee näin

- Sävytetty lähes musta pohja
- Erillinen tumma väripistesarja
- Väri valona yhdestä kulmasta
- Luonnonvalkoinen teksti, noin `#e9e5f5`
- Hieno kohinakerros peittää raidoittumista

Lisää kopioitavia paletteja löytyy [tummista liukuväritaustoista](https://gradiently.design/fi/guide/dark-gradient-backgrounds). 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.

## FAQ

### Miten vaihdan liukuvärin tummassa tilassa?

Aseta liukuvärin värit CSS:n mukautettuihin ominaisuuksiin ja määrittele ne uudelleen kyselyssä `@media (prefers-color-scheme: dark)`. Liukuväri päivittyy kaikkialla, missä se käyttää muuttujia.

### Voinko käyttää light-dark()-funktiota liukuvärissä?

Kyllä, jokaisessa väripisteessä, sillä light-dark() palauttaa värin. Se tarvitsee elementille tai esivanhemmalle asetuksen `color-scheme: light dark`.

### Miksi liukuvärini näyttää liian kirkkaalta tummassa tilassa?

Silmä mukautuu tummaan näyttöön, joten kylläiset värit tuntuvat vahvemmilta. Laske kylläisyyttä, tummenna väripisteitä ja rajaa kirkkaat värit pienille alueille.

### Pitäisikö tumman tilan käyttää puhdasta mustaa?

Liukuväreissä yleensä ei. Brändisävyyn taitettu lähes musta sekoittaa värit luonnollisesti ja vähentää kovaa kontrastia.

### Miksi tumma liukuvärini näyttää raitoja?

Tummat sävyt ovat 8-bittisessä värissä lähellä toisiaan, joten askeleet näkyvät. Lisää kevyt rakeisuuskerros ja vältä voimakasta pakkausta.