Pokud trávíte mnoho hodin před obrazovkou, jistě jste ocenili možnost aktivovat tmavý režim v aplikaci nebo na webových stránkách vícekrát. Nejde jen o estetiku: dobrý Tmavý režim může snížit namáhání očí, pomáhají s koncentrací a v některých zařízeních dokonce šetří baterii.
Dobrou zprávou je, že nastavení tmavého režimu na vašem webu není žádný velký problém. Díky kombinaci Proměnné CSS, mediální dotazy a trochu volitelného JavaScriptu Můžete vytvářet flexibilní, přístupná a snadno udržovatelná světlá a tmavá témata, aniž byste museli přepisovat stylový list odshora dolů.
Co přesně je tmavý režim a proč ho používat?
Když mluvíme o tmavém režimu nebo tmavý režim Máme na mysli barevné schéma, ve kterém Pozadí se ztmaví a hlavní obsah se zobrazí ve světlých tónech.Je to opak klasického designu tmavého textu na bílém pozadí, který je na webu normou už léta.
Moderní operační systémy (Windows, macOS, iOS, Android…) umožňují Nakonfigurujte globální preferenci pro světlý nebo tmavý motiv.Mnoho uživatelů aktivuje tmavý režim v prostředí se slabým osvětlením, pro pohodlí nebo jednoduše z estetických důvodů. Pokud váš web tuto volbu respektuje, dáváte mu značnou výhodu. uživatelská zkušenost a přístupnost.
Navíc u OLED a AMOLED displejů spotřebovávají černé nebo téměř černé pixely méně energie, takže Dobře navržený tmavý režim může pomoci šetřit bateriizejména na mobilních zařízeních.
Základní principy návrhu tmavého režimu
Nejde jen o invertování barev. Aby tmavé téma fungovalo, je třeba zvážit několik detailů designu a přístupnosti, protože špatně implementovaný kontrast může být stejně otravný jako příliš světlé rozhraní.
Kontrast a čitelnost
Prvním kritickým bodem je kontrast mezi pozadím a textem. Obsah musí být snadno čitelné na tmavém pozadí bez odleskůPokyny WCAG doporučují minimální poměr stran 4.5:1 pro normální text, ačkoli v tmavém režimu je velmi běžné usilovat o hodnoty kolem 7:1 pro zlepšení komfortu.
Typickým příkladem by bylo použití téměř černého pozadí a světle šedého textu, nikoli čistě bílé. Například něco jako barva pozadí: #121212 a barva: #E0E0E0 Obvykle poskytuje hladký a čitelný výsledek, bez efektu čistě bílé na úplné černé.
Výběr palety a akcentních barev
V temných záležitostech je vhodné Vyhněte se velmi sytým a křiklavým barvámProtože na tmavém pozadí bývají příliš světlé a rychle namáhají oči. Pro tlačítka, odkazy a zvýrazněné prvky je lepší zvolit jemnější, mírně desaturované tóny.
Je také vhodné vyhnout se absolutní černé (#000000) a čistě bílé (#FFFFFF). mírně vyvýšená černá a poněkud tlumená bílá Díky nim je kontrast příjemnější. Například místo použití čistě bílé jako akcentu můžete zvolit něco jako #BB86FC nebo měkké zlato který vyniká, aniž by byl křiklavý.
Přístupnost a uživatelské preference
Navrhování tmavého režimu znamená brát v úvahu uživatele s různými vizuálními schopnostmi. Nestačí, aby „vypadal hezky“, musí být Vhodné i pro osoby se slabým zrakem nebo citlivostí na jasTo zahrnuje kontrolu kontrastů, stavů zaostření, chybových stavů a interaktivních prvků.
Kromě barvy je důležité respektovat i další preference, jako například omezit pohybPokud uživatel upřednostnil menší počet animací, měly by být přechody mezi tématy upraveny například pomocí mediálního dotazu. preferuje-redukovaný-pohyb v těchto případech omezit nebo zcela eliminovat animace.
Proč jsou proměnné CSS klíčem k tmavému režimu
Proměnné CSS (vlastní vlastnosti) jsou ideální pro správu systému šablon, protože umožňují Centralizujte všechny barvy a styly závislé na tématu na jednom místěMísto opakování hodnot v celém stylovém listu definujete několik proměnných a ty pak znovu použijete s funkcí. var().
Tyto proměnné se obvykle deklarují v pseudotřídě :root, který ukazuje na prvek <html>Můžete například definovat základní barvy pro světlé téma tím pádem:
:root {
--color-fondo: #ffffff;
--color-texto: #333333;
--color-acento: #007BFF;
}Odtud zbytek stylového listu používá tyto vlastní vlastnosti místo pevných hodnot:
body {
background-color: var(--color-fondo);
color: var(--color-texto);
}
a,
button {
color: var(--color-acento);
}Pokud se rozhodnete změnit paletu nebo přidat tmavý motiv, budete muset znovu přiřadit hodnoty těchto proměnných v jiném kontextu (třídy, atributy, mediální dotazy…) namísto kontroly každého pravidla jedno po druhém.
Implementace tmavého režimu pomocí mediálních dotazů (prefers-color-scheme)
Nejvíce uživatelsky přívětivý přístup je nechat systém diktovat podmínky. Mediální dotaz prefers-color-scheme umožňuje vám to Automaticky přizpůsobit téma globálním preferencím zařízení..
Existují dva běžně používané přístupy: definování samostatných verzí pro světlo a tmu nebo považovat světlý režim za výchozí a přepsat ho pouze tehdy, když systém požaduje tmu.
Definování proměnných podle režimu pomocí mediálních dotazů
Velmi přímočarý vzorec je deklarovat základní proměnné a poté je změnit v rámci konkrétních mediálních dotazů:
/* Tema claro por defecto */
:root {
--body-bg: #FFFFFF;
--body-color: #000000;
}
/* Tema oscuro cuando el usuario lo prefiere */
@media (prefers-color-scheme: dark) {
:root {
--body-bg: #000000;
--body-color: #FFFFFF;
}
}V tomto příkladu bude tělo vždy používat pozadí: var(–body-bg) a barva: var(–body-color)Jediné, co se mění, je hodnota proměnných podle preferencí systému. Pokud by v budoucnu do systému byly přidány další hodnoty... prefers-color-schemeStále byste měli správně definovaný výchozí režim mazání.
Můžete být také ještě explicitnější a specifikovat oba režimy:
@media (prefers-color-scheme: light) {
:root {
--body-bg: #FFFFFF;
--body-color: #000000;
}
}
@media (prefers-color-scheme: dark) {
:root {
--body-bg: #000000;
--body-color: #FFFFFF;
}
}Díky tomu bude váš web Automaticky se přizpůsobí světlému nebo tmavému režimu zvolenému v operačním systému., aniž by se uživatel musel dotýkat jakýchkoli nastavení na webových stránkách.
Tmavý režim bez JavaScriptu s použitím :has() a zaškrtávacího políčka
Pokud chcete nabídnout přepínání tématu na stránce, ale nechce se vám používat JavaScript, můžete použít relační selektor. :has()Tento selektor umožňuje aplikovat styly na nadřazený element, když Obsahuje dítě, které splňuje určitou podmínku., v tomto případě zaškrtnuté políčko.
Myšlenkou je nejprve definovat světlé barvy jako základ:
:root {
--bg-color: #ffffff;
--text-color: #222222;
}
body {
background: var(--bg-color);
color: var(--text-color);
transition: background 0.3s, color 0.3s;
}A pak toho využijte :has() Chcete-li změnit proměnné, když je zaškrtávací políčko tmavého režimu zaškrtnuto:
body:has(#darkmode-toggle:checked) {
--bg-color: #1e1e1e;
--text-color: #f5f5f5;
}V HTML potřebujete pouze jeden zaškrtávací políčko, které slouží jako přepínač:
<input type="checkbox" id="darkmode-toggle" />
<label for="darkmode-toggle">Modo oscuro</label>Když uživatel zaškrtne políčko, selektor body:has(#darkmode-toggle:checked) vstupuje do hry a proměnné se změní na tmavé hodnoty. Velkým „ale“ tohoto přístupu je, že preference se nezachovává napříč stránkami nebo návštěvami, protože se nepoužívá žádné úložiště ani dodatečná logika.
Přepínač motivů s třídami, JavaScriptem a localStorage
Pokud hledáte kompletnější systém, obvyklým přístupem je přidat nebo odebrat třídu (nebo atribut dat) v kořenovém elementu a spravovat změnu pomocí JavaScriptu, přičemž se také uloží volba uživatele.
Definujte proměnné podle tematické třídy
Nejprve definujete výchozí barvy světla v :root a pak nejasná varianta, kdy kořenový element má konkrétní třídu, například tema-oscuro:
:root {
--color-fondo: #ffffff;
--color-texto: #000000;
--color-principal: #007bff;
}
:root.tema-oscuro {
--color-fondo: #333333;
--color-texto: #ffffff;
--color-principal: #BB86FC;
}Ostatní styly se nadále používají var(-background-color), var(-text-color) a další proměnnétakže změna předmětu je ekvivalentní změně třídy tema-oscuro en <html> o <body>.
Vytvořte přepínač v HTML a oživte ho pomocí JavaScriptu.
V kódu můžete použít jednoduché zaškrtávací políčko, tlačítko nebo propracovanější přepínač. Jednoduchý příklad by byl:
<input type="checkbox" id="interruptor-tema" />
<label for="interruptor-tema">Tema oscuro</label>V JavaScriptu posloucháte změnu přepínače a přidáváte nebo odebíráte třídu na kořenovém elementu, kromě uložit preferenci do localStorage abyste se vyhnuli jeho ztrátě při prohlížení nebo opětovném načítání:
// Al cargar la página, aplicamos el tema guardado
if (localStorage.getItem('tema') === 'oscuro') {
document.documentElement.classList.add('tema-oscuro');
document.getElementById('interruptor-tema').checked = true;
}
// Actualizamos cuando el usuario cambia el toggle
document.getElementById('interruptor-tema').addEventListener('change', function () {
if (this.checked) {
document.documentElement.classList.add('tema-oscuro');
localStorage.setItem('tema', 'oscuro');
} else {
document.documentElement.classList.remove('tema-oscuro');
localStorage.setItem('tema', 'claro');
}
});S tímto přístupem dosáhnete trvalý, uživatelem ovládaný tmavý režim, a přitom stále využívat proměnné CSS k udržení čistoty kódu.
Použijte atributy dat nebo téma dat jako selektor
Místo třídy můžete také použít atribut jako data-themeTo je obzvláště výhodné, pokud pracujete s frameworky nebo utilitami, jako je Tailwind CSS, které vám umožňují konfigurovat danou variantu. tmavý takže se aktivuje, když existuje selektor typu místo mediálního dotazu.
V nativním CSS by vzor vypadal velmi podobně:
:root {
--color-fondo: #FFFFFF;
--color-texto: #333333;
--color-acento: #007BFF;
}
{
--color-fondo: #121212;
--color-texto: #E0E0E0;
--color-acento: #BB86FC;
}Použití atributu na kořenový element:
<html lang="es" data-theme="dark">Celý web přejde na používání tmavých hodnot. Pokud změníte atribut na light Nebo ho odstraníte a vrátíte se k jasnému tématu. JavaScript pro přepínání mezi jedním a druhým se ve srovnání s třídami moc nemění: jednoduše zavoláte setAttribute('datové téma', 'tmavý') o 'světlo' v závislosti na volbě uživatele.
Kombinace systémového motivu a ručního výběru
Velmi častým scénářem je snaha o podporu tří států: světlý motiv, tmavý motiv a „použít systémový motiv“K tomu můžete kombinovat prefers-color-scheme s třídami nebo atributy a použijte window.matchMedia() detekovat systémový režim, když se uživatel rozhodne tuto možnost použít.
Obecná myšlenka je:
- Pokud uživatel explicitně vybere světlou nebo tmavou variantu, uložíte tuto předvolbu a použijete ji s třídou nebo atributem (například data-theme="tmavý").
- Pokud zvolíte „systém“, nevynucujete žádné konkrétní téma a necháte mediální dotazy převzít kontrolu. schéma preferovaných barev ti, kteří rozhodují o výchozích hodnotách.
- Volitelně můžete poslouchat změny v matchMedia('(preferuje-barevné-schéma: tmavé)') reagovat, pokud uživatel za běhu změní systémové téma.
Tento vzor se velmi dobře hodí k nástrojům jako Tailwind, kde si můžete vybrat, zda varianta tmavý je založeno na prefers-color-scheme nebo ve třídě/atributu, a dokonce jej synchronizovat s preferencí uloženou na klientovi nebo serveru.
Za hranicemi barev: typografie a prvky rozhraní
Aktivace tmavého režimu by se neměla omezovat pouze na změnu čtyř barev. Existují i další detaily, které stojí za to upravit, aby byl zážitek skutečně pohodlný a konzistentní.
V první řadě se to doporučuje mírně zvětšit velikost písma a řádkování v tmavých motivech, protože text na tmavém pozadí má tendenci vypadat hustší. Malé zvětšení základní velikosti nebo linka-height může něco změnit.
Je také dobrý nápad zkontrolovat tlačítka, odkazy, karty a další komponenty uživatelského rozhraní. V tmavém režimu můžete použít měkké stíny, jemné okraje nebo velmi světlé přechody dodat pocit hloubky, aniž by se muselo uchylovat k plochému pozadí, díky kterému vše vypadá zaseknuté na stejné úrovni.
Nezapomeňte na vizuální zpětnou vazbu: uvádí vznášet se, zaostřit a být aktivní Musí zůstat jasné. V tmavém motivu obvykle funguje změna barvy nebo mírné zvýšení jasu akcentové barvy lépe než příliš agresivní odstín.
Nástroje pro testování, přístupnost a validaci
Jakmile máte systém šablon nastavený, je čas ho pořádně otestovat. Nestačí ho jen vidět v hlavním prohlížeči; je to důležité. Ověřte, zda tmavý režim funguje správně na různých zařízeních, v různých prohlížečích a nastaveních..
Mezi užitečné nástroje pro tuto fázi patří Chrome DevTools (vyzkoušejte, jak vynutit tmavý režim v Google Chrome)Firefox nebo Safari, které obsahují možnosti simulace schéma preferovaných barev aniž byste museli měnit systémové téma. Můžete také použít Maják pro kontrolu přístupnosti a kontrastů nebo pro křížové testování služeb, jako je CrossBrowserTesting, pro ověření, zda styly nejsou v méně běžných prohlížečích poškozené.
Kromě technických testů se vyplatí shromáždit zpětná vazba od skutečných uživatelůMalé průzkumy, formuláře na samotném webu nebo testování uživateli mohou odhalit problémy s čitelností, nedostatečný kontrast nebo prvky, které v tmavém režimu zůstanou nepovšimnuty.
Implementace moderního tmavého režimu s proměnnými CSS vám umožňuje respektovat systémové preference, nabídnout flexibilní výběr motivů, udržovat kód čistý a zajistit přístupnost – což si uživatelé i vyhledávače stále více cení. Díky solidnímu základu proměnných, dobře navrženým mediálním dotazům a v případě potřeby i špetce JavaScriptu pro zachování perzistence může váš web plynule přecházet mezi světlými a tmavými motivy, aniž by se stal chaotickým zmateným souborem neudržovatelných stylů.