Varianta dark:

Spousta lidí si v telefonu nebo v počítači zapíná tmavý režim: všude tmavé pozadí a světlý text. V tmavé místnosti je šetrnější k očím a mnoha lidem se prostě líbí víc. Tmavou verzi má čím dál víc webů a v této lekci ji dostane i web našeho útulku.

Připravili jsme menší verzi domovské stránky: záhlaví, hlavní nadpis, tři kočky a zápatí. Je upravená třídami z předchozích lekcí a zatím je jen světlá. Na konci lekce bude mít i tmavou verzi a tlačítko, které mezi nimi přepíná.

Pro tmavý režim má Tailwind variantu dark:. Funguje stejně jako hover: nebo md:. Třída s touto předponou platí jen v tmavém režimu. Dvojice tříd tak prvku dá pro každý režim jednu barvu:

<body class="bg-stone-50 dark:bg-stone-900">

Ve světlém režimu je stránka skoro bílá (bg-stone-50). V tmavém platí obě třídy a vyhraje dark:bg-stone-900: Tailwind řadí pravidla variant až za pravidla obyčejných tříd a ze dvou stejně specifických pravidel vyhraje to pozdější (to znáte z kaskády v kurzu CSS).

Jak prohlížeč pozná, který režim je zapnutý? Návštěvník si ho vybere v nastavení svého operačního systému a stránka se na něj může zeptat pravidlem @media. Tailwind ve výchozím stavu zabalí CSS tříd s dark: právě do takového pravidla, stejně jako u md:. Toto pravidlo se ale neptá na šířku, nýbrž na nastavení systému:

@media (prefers-color-scheme: dark) {
	.dark\:bg-stone-900 {
		background-color: oklch(21.6% 0.006 56.043);
	}
}

(Zpětné lomítko před dvojtečkou už znáte: dvojtečka patří k názvu třídy.)

To často stačí. Spousta webů ale návštěvníkům dovolí vybrat si režim tlačítkem, ať je systém nastavený jakkoli, a nastavení systému stránka změnit nemůže. Proto weby s přepínačem zapínají tmavý režim třídou: tmavý režim platí, když má prvek <html> třídu dark. Skript pak jen tuto třídu přidá nebo odebere. My to uděláme stejně. Až budete na stránce pracovat, tmavý režim zapnete a vypnete tak, že napíšete nebo smažete jedinou třídu, a nastavení počítače měnit nemusíte.

Tailwindu to řeknete tímto řádkem v style.css, hned za importem:

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

@custom-variant (vlastní varianta) definuje variantu, tady novou podobu varianty dark. V závorce je selektor, který varianta přidá: & zastupuje prvek, kterému dáte třídu s dark:, a :where(.dark, .dark *) znamená „který má třídu dark sám, nebo je uvnitř prvku, který ji má“ (.dark * je selektor potomků, jak ho znáte z kurzu CSS). Z třídy dark:bg-stone-900 pak vznikne toto pravidlo:

.dark\:bg-stone-900:where(.dark, .dark *) {
	background-color: oklch(21.6% 0.006 56.043);
}

Všechny prvky stránky jsou uvnitř <html>, takže class="dark" na něm zapne tmavý režim pro celou stránku. Řádek se nemusíte učit nazpaměť: najdete ho v dokumentaci Tailwindu (hledejte „dark mode“).

Samotná třída dark vzhled nijak nemění: je to jen signál pro třídy s dark:. A pozor na překlepy: s class="drak" se nestane nic a žádná chyba se neobjeví.