Tmavý režim a zápatí
Stránka je hotová ve světlých barvách. Teď přijde na řadu její tmavá verze a nakonec zápatí.
Připomeňme si, jak tmavý režim na této stránce funguje: ve style.css je řádek @custom-variant dark (&:where(.dark, .dark *));, takže třídy s dark: platí, když má prvek html třídu dark. Tlačítko 🌙 v záhlaví ji přidává a odebírá díky krátkému skriptu na konci stránky. Klikněte na něj v náhledu a svou tmavou verzi průběžně kontrolujte.
- Dvojice barev. Každé světlé pozadí dostane tmavé a každý tmavý text světlý: třeba
bg-white dark:bg-stone-800pro boxy na stránce sdark:bg-stone-900atext-stone-600 dark:text-stone-300pro tlumené texty. - Stíny jsou na tmavém pozadí skoro neviditelné. Boxy se místo toho odliší světlejším pozadím.
- Světlejší odstíny hlavní barvy se na tmavém pozadí čtou lépe, třeba
dark:text-brand-400pro logo. Oranžová tlačítka s bílým textem mohou zůstat, jak jsou. - Poloprůhledné pozadí zůstane poloprůhledné:
dark:bg-stone-900/90.
Kontroly si stránku přepnou do tmavého režimu samy: na chvíli přidají prvku html třídu dark, porovnají barvy a pak ji zase odeberou.
Jak psát:
Pokyny
Dejte prvku body v tmavém režimu tmavé pozadí a světlou barvu textu, třeba dark:bg-stone-900 dark:text-stone-100.
Každému prvku se světlým pozadím dejte v tmavém režimu tmavé: záhlaví, úvodní sekci, kartám koček, krokům, oběma boxům v Kontaktu, tlačítku 🌙 a všemu dalšímu, čemu jste dali světlé pozadí. Formulářová pole přijdou na řadu vzápětí. Zesvětlete i tlumené texty.
Dejte v tmavém režimu tmavé pozadí i formulářovým polím, třeba dark:bg-stone-900, a tmavší rámeček, třeba dark:border-stone-600.
Nakonec zápatí: dejte mu polstrování a barvu pozadí nebo čáru nahoře (border-t), která ho oddělí od stránky, třeba bg-stone-800 px-4 py-10 text-center text-sm text-stone-300. Vyzkoušejte ho v obou režimech.
Začněte programovat zdarma
4/5