Přepínač vzhledu
Třístavový výběr světlého, tmavého nebo systémového vzhledu jako nativní skupina přepínačů, s uloženou volbou a oznámením změny.
Ukázka
Přepínač v hlavičce této stránky je živá ukázka. Vyzkoušejte ho klávesnicí: Tab na něj, šipky vybírají.
Proč je to přístupné
Tmavý režim není jen estetika: pro lidi s citlivostí na světlo nebo s migrénami je to přístupnost. Tento přepínač má tři stavy, a proto nejde o tlačítko, které by si musilo vymýšlet vlastní sémantiku, ale o obyčejnou skupinu přepínačů (fieldset, legend a tři input type="radio"). Prohlížeč sám zajistí seskupení, pohyb šipkami a stav „vybráno“.
Volba se ukládá v prohlížeči bez cookies a použije se ještě před prvním vykreslením stránky, takže nic nebliká. Změnu oznámí stavová zpráva „Vzhled: tmavý“. Všechny barvy webu jsou definované jednou pro oba režimy a v obou splňují kontrast 4,5 : 1 pro text a 3 : 1 pro ovládací prvky.
Vyzkoušejte si sami
Klávesnice
- Tab na přepínač v záhlaví (zaměřená je aktuální volba), ← a → mění vzhled okamžitě.
Odečítač obrazovky
- Skupina se oznámí jako „Vzhled“, každá volba jako přepínač s názvem Světlý, Tmavý nebo Podle systému, a po změně uslyšíte stavovou zprávu.
Zvětšení a přizpůsobení obsahu
- Přepínač má tři cíle velikosti 44 × 44 px a při 400% zvětšení se přesune do vlastního řádku záhlaví.
Bez JavaScriptu
Přepínač se nezobrazí a platí nastavení operačního systému přes prefers-color-scheme. Oba vzhledy tedy zůstávají dostupné.
Kód
<ad-theme-toggle data-label="Vzhled" data-light="Světlý" data-dark="Tmavý" data-system="Podle systému" data-announce="Vzhled: {mode}"></ad-theme-toggle>
<script src="/assets/js/theme-init.js"></script>
<link rel="stylesheet" href="/assets/js/components/ad-theme-toggle/ad-theme-toggle.css">
<script type="module" src="/assets/js/components/ad-theme-toggle/ad-theme-toggle.js"></script>