Shrnutí

V této lekci jsme stránce útulku dali tmavou verzi a dozvěděli jsme se, že:

• Varianta dark: použije třídu jen v tmavém režimu: bg-stone-50 dark:bg-stone-900.
• Ve výchozím stavu se dark: řídí nastavením operačního systému (pravidlem @media (prefers-color-scheme: dark)).
• S řádkem @custom-variant dark (&:where(.dark, .dark *)); za importem v style.css je tmavý režim zapnutý, když má <html> třídu dark. Tak fungují weby s přepínačem tmavého režimu: skript tuto třídu přidá nebo odebere.
• Každá barva dostane protějšek pro tmavý režim: pozadí se přesunou ze světlých odstínů na tmavé a text naopak, karty jsou o odstín světlejší než stránka, tlumený text je stone-400, rámečky stone-700 a hlavní barva webu dostane světlejší odstín (orange-400).
• Průhlednost za lomítkem funguje i s dark:: bg-white/90 dark:bg-stone-900/90. Štítkům na tmavém pozadí sluší průhledný nádech barvy, třeba dark:bg-emerald-500/20.
• Stíny jsou na tmavém pozadí skoro neviditelné; lépe poslouží světlejší pozadí a tenký rámeček (dark:border dark:border-stone-700).
• I dark: se dá řetězit s dalšími variantami: dark:hover:text-orange-400.
• Díky dark:hidden a hidden dark:inline se v každém režimu ukáže jiný obsah.

V příští lekci, Přizpůsobení Tailwindu, přidáte do Tailwindu vlastní barvy a písma a naučíte se, jak neopakovat pořád stejné třídy.

Procvičení: tady je kontaktní karta útulku, zatím jen ve světlé verzi. Dejte jí tmavou verzi.