Ráno u okna a večer v posteli nejsou stejné podmínky. Co je v jednu chvíli příjemně kontrastní, je v druhou oslnivé. Tenhle článek ukazuje, jak si na webu se šablonou Mundana Reworked nastavit vzhled podle sebe, a zároveň slouží jako místo, kde se ten vzhled dá pořádně posoudit.
Je v něm schválně kus od každého: odstavce, odkazy, citace, oba druhy seznamů, tabulka, kus zdrojového kódu i obrázek s popiskem. Přepněte si režim a projděte stránku ještě jednou. Co bylo čitelné ve světlém, má být čitelné i v tmavém.
Obsah
Proč vůbec dvě varianty
Tmavý režim není móda ani úspora baterie, i když na displejích typu OLED trochu šetří. Jde hlavně o to, že správný jas textu proti pozadí závisí na okolním světle.
V rozsvícené místnosti je černý text na bílé nejlepší, co může být. V šeru je ale bílá plocha jako svítilna namířená do očí a text na ní se čte hůř, ne líp. Proto má smysl nabídnout obojí a nechat rozhodnutí na čtenáři.
Web se nejdřív zeptá vašeho zařízení
Ve výchozím stavu se web řídí tím, co máte nastavené v systému. Máte-li v telefonu nebo v počítači zapnutý tmavý vzhled, otevře se vám tmavý i tenhle web, a nemusíte pro to nic udělat.
To je úmysl. Kdo si jednou v systému nastavil, jak chce mít věci, nemá to opakovat na každém webu zvlášť.
Přepínač
Pokud vám systémové nastavení v tuhle chvíli nevyhovuje, můžete ho přebít. Úplně vpravo v horní liště, za vyhledávacím polem, je malé tlačítko s měsícem nebo sluncem. Měsíc znamená “přepnout na tmavý”, slunce “přepnout na světlý”.
Zkuste na něj kliknout. Stránka se překreslí okamžitě, bez načítání a bez poskakování obsahu.
Volba se pamatuje
Od chvíle, kdy přepínač poprvé použijete, platí vaše volba a systémové nastavení už ji nepřebije. Platí i na ostatních stránkách tohoto webu a zůstane i po zavření prohlížeče.
Vyzkoušejte si to takto:
- Klikněte na přepínač a změňte vzhled.
- Obnovte stránku klávesou F5.
- Stránka se načte rovnou ve vzhledu, který jste si vybrali, a ani na okamžik neproblikne tím druhým.
To poslední je důležitější, než se zdá. Kdyby se stránka nejdřív nakreslila bíle a teprve pak ztmavla, bylo by to v šeru nepříjemné bliknutí do očí při každém kliknutí na odkaz.
Jak vypadají jednotlivé prvky
Tady začíná ta část, kterou má smysl projít v obou režimech. Každý následující kus obsahu je běžná součást článků, nic tu není přidané jen kvůli téhle stránce.
Text a odkazy
Běžný odstavec vypadá takto. Může v něm být tučné zvýraznění, kurzíva i kousek kódu v řádku. A samozřejmě odkaz, třeba na Ukázku práce s obrázky nebo na Co všechno se dá udělat v editoru Markdownu.
Odkazy jsou zelené a v tmavém režimu zesvětlají, aby na tmavém pozadí měly dost kontrastu. Barva se tedy nemění jen kosmeticky, mění se proto, aby byl text pořád dobře čitelný.
Citace
Když na to přijde, čitelnost není o barvách, ale o rozdílu mezi nimi. Černá na bílé a bílá na černé jsou z tohohle pohledu totéž. Problém dělají až všechny ty odstíny mezi tím.
Seznamy
Nečíslovaný seznam:
- Pozadí stránky a pozadí vyzdvižených bloků jsou dva různé odstíny.
- Linky a rámečky mají svůj vlastní odstín, aby nebyly ani neviditelné, ani křiklavé.
- Tlumený text, třeba datum nebo popisek, je světlejší než běžný text, ale ne o tolik, aby se ztratil.
Číslovaný seznam:
- Nejdřív se spočítá, kterou variantu zobrazit.
- Teprve pak se stránka vykreslí.
- Čtenář tedy nikdy nevidí tu druhou.
Tabulka
| Prvek | Světlý režim | Tmavý režim |
|---|---|---|
| Pozadí stránky | bílá | velmi tmavá šedá |
| Běžný text | tmavě šedá | světle šedá |
| Nadpisy | téměř černá | téměř bílá |
| Odkazy | zelená | světlejší zelená |
| Kategorie nad článkem | růžová | světlejší růžová |
Zdrojový kód
Responsive: obrázků 23, nově vygenerovaných variant 0
Obrázek s popiskem
Obrázky se v tmavém režimu nijak neupravují. Ztmavit fotku, aby lépe zapadla do tmavé stránky, by znamenalo ukázat čtenáři něco jiného, než autor nafotil.
Na telefonu
Na úzké obrazovce se horní lišta sbalí pod tlačítko s třemi čárkami, ale přepínač vzhledu se do ní neschová. Zůstává vedle toho tlačítka, pořád viditelný. Přepínač schovaný pod menu by nikdo nenašel.
Pozor na jednu věc: systémové nastavení telefonu bývá jiné než na počítači. Řada telefonů navíc umí přepínat vzhled automaticky podle času. Může se vám tedy stát, že tentýž web máte na počítači světlý a na telefonu tmavý. Není to chyba, je to přesně to, co jste si v obou zařízeních nastavili.
Když prohlížeč nemá JavaScript
Rozhodnutí, kterou variantu nakreslit, dělá krátký skript ještě před vykreslením stránky. Bez něj by nešlo zabránit tomu probliknutí. Má to jeden důsledek: s vypnutým JavaScriptem dostanete světlou variantu bez ohledu na nastavení systému. Je to ta varianta, kterou šablona měla odjakživa, takže se nic nerozbije, jen si nevyberete.
Co si z toho odnést
Nemusíte dělat nic a dostanete vzhled podle svého zařízení. Když vám nesedí, jedno kliknutí ho změní a web si to zapamatuje.
A jestli vás zajímá, co šablona umí dál, podívejte se na Jak se pohodlně čtou dlouhé články nebo na Jak najít to, co vás zajímá.
