Přepínač tmavého režimu

Stránka už tmavou verzi má, přepnout ji ale umíme jen my, a to úpravou kódu. Návštěvníci potřebují tlačítko. Přidali jsme ho do záhlaví (tlačítko „Tmavý režim“ s id="motiv") a na konec body jsme přidali krátký skript:

<script>
	document.querySelector("#motiv").addEventListener("click", function () {
		document.documentElement.classList.toggle("dark");
	});
</script>

Když někdo na tlačítko klikne, skript přidá prvku <html> třídu dark, nebo ji odebere, pokud ji už má. Nic víc nedělá. Rozumět tomu, jak je napsaný, nemusíte: to se naučíte v kurzu JavaScriptu. Díky řádku s @custom-variant se všechny vaše třídy s dark: řídí touto jedinou třídou.

Přepínač na skutečném webu obvykle umí ještě o něco víc: na začátku se řídí nastavením systému návštěvníka a jeho volbu si zapamatuje pro příští návštěvu. Na to stačí pár dalších řádků JavaScriptu, princip ale zůstává stejný: třída dark na prvku <html>.

Samotné tlačítko potřebuje barvy pro oba režimy a popisek, který říká, co tlačítko udělá. Popisek se může měnit podle režimu i bez skriptu: do tlačítka dejte oba texty, každý do vlastního prvku span, a ten, který se nehodí, skryjte třídou hidden (display: none):

<span class="dark:hidden">Tmavý režim</span>
<span class="hidden dark:inline">Světlý režim</span>

Ve světlém režimu je vidět první a druhý je skrytý. V tmavém je to naopak: dark:hidden skryje první a dark:inline ukáže druhý (display: inline, takže zůstane v řádku jako obyčejný text).