Barvy pro tmu

Tmavá verze není jen převrácení barev. Ke každé barvě na stránce vyberete protějšek pro tmavý režim, takže vznikne dvojice tříd: jedna bez předpony a jedna s dark:. S barevnou paletou je to snadné, protože každá barva má odstíny od 50 (nejsvětlejší) po 950 (nejtmavší):

• Pozadí se přesunou ze světlého konce škály na tmavý: stránka z bg-stone-50 na dark:bg-stone-900.
• Text jde opačně: z text-stone-800 na dark:text-stone-100.
• Plochy, které vystupují ze stránky, třeba karty, jsou v obou režimech světlejší než stránka: bílá na stone-50 a stone-800 na stone-900. Co je světlejší, působí blíž, jako by na to dopadalo světlo.
• Tlumený text, třeba popisy koček, je středně šedý: na světlém pozadí stone-500, na tmavém o odstín světlejší stone-400, protože středně šedý text by se tam četl hůř.
• Rámečky se mají od pozadí lišit jen trochu: na světlém stone-200, na tmavém stone-700.
• Hlavní barva webu: oranžový text v odstínu orange-600 se na bílém pozadí čte dobře, na tmavém pozadí je ale moc tmavý. Lépe vynikne světlejší odstín orange-400. Naše oranžové tlačítko s bílým textem funguje v obou režimech a může zůstat, jak je.

Záhlaví má bg-white/90: bílou z 90 %, takže obsah, který se pod lepivým záhlavím posouvá, trochu prosvítá. Jeho tmavý protějšek si průhlednost ponechá: dark:bg-stone-900/90.

Karty jsou tři, takže některé třídy napíšete třikrát. U Tailwindu je to běžné; v příští lekci uvidíte, jak se opakování stejných tříd vyhnout.

Typickou chybou je zapomenutá předpona: s bg-stone-800 místo dark:bg-stone-800 by karty ztmavly i ve světlém režimu. Po každé změně se proto podívejte i na světlou verzi: na chvíli smažte u <html> třídu dark, spusťte kód a pak třídu zase vraťte.