Theme Switch
Slouží k přepínání mezi light a dark módem.
Použití
Slouží k umožnění uživatelům přepínat mezi světelným light a tmavým dark režimem webové aplikace. Tato komponenta je navržena tak, aby zlepšila přístupnost a uživatelský komfort, zejména při různých světelných podmínkách nebo individuálních preferencích uživatelů.
Jelikož se z pohledu designu jedná o variantu komponenty Switch, ve Figma je dostupná ve View u komponenty Switch.
Pro vývojáře
Je důležité se zaměřit na správnou implementaci a zachování uživatelských preferencí. Komponenta gov-theme-switch využívá atribut data-theme, který je aplikován přímo na HTML tag. Tento atribut může mít následující hodnoty:
light– světlý režimdark– tmavý režimauto– režim závislý na nastavení systému
Implementační detaily
Definování atributu data-theme
Preference uživatele je dána hodnotou atributu data-theme v HTML tagu. Pokud tento atribut není nastaven, nebo je jeho hodnota prázdná, použije se systémové nastavení pomocí CSS media queries (prefers-color-scheme: dark).
Ukládání preferencí do cookie
Po výběru preferovaného režimu se hodnota ukládá do cookie, což umožňuje serverové části aplikace (backend) předgenerovat správný režim ještě před načtením stránky. Tímto způsobem lze předejít problému s blikáním, kdy se stránka krátce načte v jednom režimu a následně se přepne do jiného na základě uživatelských preferencí.
Doporučení pro backend implementaci
Doporučujeme tedy zajistit, aby byl atribut data-theme nastaven již při generování HTML na straně serveru, pokud je preference uživatele dostupná v cookie. Tím je zajistíte, že stránka bude mít správný vzhled hned po načtení, a to bez nutnosti čekat na vykreslení JavaScriptu na klientské straně.