Prepínač vzhľadu
Trojstavový výber svetlého, tmavého alebo systémového vzhľadu ako natívna skupina prepínačov, s uloženou voľbou a oznámením zmeny.
Ukážka
Prepínač v hlavičke tejto stránky je živá ukážka. Vyskúšajte ho klávesnicou: Tab naň, šípky vyberajú.
Prečo je to prístupné
Tmavý režim nie je len estetika: pre ľudí s citlivosťou na svetlo alebo s migrénami je to prístupnosť. Tento prepínač má tri stavy a preto nie je tlačidlom, ktoré by muselo vymýšľať vlastnú sémantiku, ale obyčajnou skupinou prepínačov (fieldset, legend a tri input type="radio"). Prehliadač sám zabezpečí zoskupenie, pohyb šípkami a stav „vybrané“.
Voľba sa ukladá v prehliadači bez cookies a aplikuje sa ešte pred prvým vykreslením stránky, takže nič nebliká. Zmenu oznámi stavová správa „Vzhľad: tmavý“. Všetky farby webového sídla sú definované raz pre oba režimy a v oboch spĺňajú kontrast 4,5 : 1 pre text a 3 : 1 pre ovládacie prvky.
Vyskúšajte si sami
Klávesnica
- Tab na prepínač v hlavičke (zameraná je aktuálna voľba), ← a → menia vzhľad okamžite.
Čítač obrazovky
- Skupina sa oznámi ako „Vzhľad“, každá voľba ako prepínač s názvom Svetlý, Tmavý alebo Podľa systému, a po zmene počujete stavovú správu.
Priblíženie a reflow
- Prepínač má tri ciele veľkosti 44 × 44 px a pri 400 % priblížení sa presunie do vlastného riadka hlavičky.
Bez JavaScriptu
Prepínač sa nezobrazí a platí nastavenie operačného systému cez prefers-color-scheme. Oba vzhľady teda zostávajú dostupné.
Kód
<ad-theme-toggle data-label="Vzhľad" data-light="Svetlý" data-dark="Tmavý" data-system="Podľa systému" data-announce="Vzhľad: {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>