Chytrá komponenta

Dark mode

Stránka, která se sama přepne do tmavých barev, když je tak nastavený systém. A přepínač, kterým si vzhled vybere každý sám.

Jen CSS. Tlačítkem Dark mode nad náhledem si vyzkoušíte, jak stránka vypadá v telefonu nastaveném na dark mode.

Výchozí stav

Barvy rozeseté po celém CSS

Jednoduchá stránka s kartou. Barvy jsou zapsané přímo v pravidlech: barva textu v body, border v header, další border v .card…

Pro dark mode bychom museli najít a přepsat každou barvu zvlášť. Na velkém webu jsou jich stovky.

Proměnné

Všechny barvy na jednom místě

Barvy uložíme do proměnných (custom properties) v pravidle :root, tedy pro celou stránku. Jméno proměnné začíná dvěma pomlčkami a použije se funkcí var().

V náhledu se nic nezměnilo. Barvy jsou stejné, jen je teď měníme na jediném místě.

Automatika

Tmavé barvy pro dark mode systému

Media query prefers-color-scheme: dark platí, když má uživatel v telefonu nebo počítači nastavený dark mode. V ní proměnným dáme tmavé hodnoty a celá stránka se přebarví.

Náhled teď předstírá dark mode systému. Vypněte tlačítko Dark mode nad náhledem (nebo klávesu D) a stránka zesvětlá.

Kratší zápis

Světlá i tmavá barva vedle sebe

Funkce light-dark() vezme dvě barvy, světlou a tmavou, a sama vybere tu správnou. Media query už nepotřebujeme. Stačí stránce říct, že umí oba vzhledy: color-scheme: light dark.

color-scheme navíc přebarví i věci, které nestylujeme sami: scrollbary a formulářová pole.

Přepínač

Ať si vybere každý sám

Do hlavičky přidáme tři radio buttony: Auto, Světlý a Tmavý. Když je vybraný Světlý nebo Tmavý, :has() přepíše color-scheme stránky a light-dark() se podle něj přebarví.

Klikněte v náhledu na Tmavý. Auto se řídí systémem: vyzkoušejte ho s tlačítkem Dark mode zapnutým i vypnutým.

Styl

Přepínač jako jeden ovladač

Kolečka schováme (průhledností, aby fungovala klávesnice) a tři volby spojíme do jednoho zaobleného ovladače. Vybraná volba vystoupí jako tlačítko.

Nadpis skupiny legend je schovaný jen pro oko. Screen reader ho přečte, takže ví, co radio buttony nastavují.

Recept

Dark mode v kostce

barvy v proměnných na jednom místě
prefers-color-scheme nebo light-dark() podle systému
color-scheme přebarví i scrollbary a formuláře
ruční přepínač přes :has()

Po obnovení stránky se ruční volba zapomene. Aby si ji prohlížeč pamatoval, je potřeba JavaScript, ukážeme ho v části JavaScript.

Další: Tooltip →