Detaily ve tmě

Barvy máme, ale pár detailů ještě prozrazuje, že stránka vznikla pro světlý režim. Podívejme se na ně.

Stíny. Stín je tmavší plocha kolem boxu a díky němu se zdá, že se karty vznášejí nad stránkou. Na tmavé stránce ale skoro není nic tmavšího než pozadí, takže stín téměř není vidět. Tady je stejná karta se stejným stínem na světlém a na tmavém pozadí a vpravo místo stínu s rámečkem:

V tmavém režimu karty vyniknou díky světlejšímu pozadí, které už naše karty mají, a často i díky tenkému rámečku:

<div class="rounded-2xl bg-white shadow-md dark:bg-stone-800 dark:border dark:border-stone-700">

dark:border přidá rámeček široký 1 px, a to jen v tmavém režimu. Nezapomeňte na jeho barvu: rámeček bez třídy s barvou má barvu textu (currentColor), tady velmi světlou stone-100, a ta by byla až moc výrazná. Stín může zůstat: ve světlém režimu dělá svou práci a v tmavém nepřekáží.

Štítky. Oskar má zelený štítek „Nový“ (bg-emerald-100 text-emerald-700). Na tmavé kartě taková světlá skvrna až oslňuje. V tmavém režimu proto štítky obvykle dostanou průhledný nádech své barvy: dark:bg-emerald-500/20 je barva emerald-500 jen z 20 % a zbytkem prosvítá tmavá karta, takže štítek je tmavě zelený. Se světlým textem (dark:text-emerald-300) se dobře čte:

Řetězení variant. Odkazy v záhlaví se při najetí myší zbarví oranžově (hover:text-orange-600). V tmavém režimu je ale odstín orange-600 zase moc tmavý. Jak víte z lekce o stavech, varianty můžete řetězit: dark:hover:text-orange-400 platí, jen když je zapnutý tmavý režim a zároveň je nad odkazem ukazatel myši. Varianta dark: se obvykle píše jako první.