Jak implementovat tmavý režim na webu pomocí CSS proměnných

V posledních letech se tmavý režim stal módním prakticky v každém digitálním rozhraní: operačních systémech, aplikacích, administrátorských panelech a samozřejmě i na webových stránkách. Kromě toho, že je estetickým trendem, je úzce spjat s vizuálním komfortem, používáním v noci a v některých případech i s úsporou baterie u OLED obrazovek. Pokud uvažujete o jeho přidání do svého projektu, zjistíte, že to není tak složité, jak se zdá.

V tomto článku uvidíme Jak implementovat tmavý režim na webu použití CSS proměnných, mediálních dotazů a selektoru :has() a přepínače s JavaScriptem. Probereme vše od ultra jednoduché verze s použitím pouze HTML a CSS (bez perzistence) až po komplexnější řešení s lokálním úložištěm a automatickou detekcí systémových motivů. Vše krok za krokem, s komentovaným kódem a praktickými tipy, abyste jej mohli integrovat do téměř jakéhokoli webu.

Proč se vyplatí nabídnout na vašem webu tmavý režim?

Než se pustíme do detailů, je dobré pochopit, jaké skutečné výhody tmavý režim nabízí kromě své vizuální přitažlivosti. Stále více uživatelů si ho aktivuje na svých zařízeních a očekává, že se webové stránky této preferenci přizpůsobí.

Na jedné straně to snižuje namáhání očí ve špatně osvětleném prostředí, protože tmavé povrchy vyzařují méně světla než čistě bílé pozadí. To je obzvláště patrné, pokud vaše publikum tráví hodně času čtením dlouhých textů nebo prací v noci. Na druhou stranu, u OLED obrazovek spotřebovávají černé pixely velmi málo energie , takže tmavý design může pomoci prodloužit výdrž baterie.

Existuje také čistě estetický faktor a faktor uživatelské zkušenosti . Mnoho uživatelů má pocit, že tmavá rozhraní jsou elegantnější a modernější. Možnost přepínání mezi světlými a tmavými motivy vyjadřuje důraz na detail a určitou míru empatie k různým preferencím, což může zlepšit celkové vnímání vašeho projektu a dokonce i jako bonus relevantní SEO metriky.

Související článek:

Jak pomocí těchto kroků aktivovat tmavý režim v Microsoft Edge

Proměnné CSS: klíč ke změně témat

Prvním konceptem, který si musíte osvojit, jsou vlastní vlastnosti CSS , běžně nazývané proměnné CSS. Fungují jako kontejnery pro hodnoty, které můžete znovu použít v celém CSS, a jsou ideální pro práci s více barevnými schématy, aniž byste museli přehánět.

Myšlenka je velmi jednoduchá: definujete to v centrálním bodě proměnné se základními barvami vašeho rozhraní (pozadí, text, hlavní barva atd.) a zbytek pravidel CSS je omezen na použití var() místo pevných hodnot. Změnou proměnných změníte celý vzhled, aniž byste se museli dotýkat každého selektoru jeden po druhém.

Nejběžnější praxí je deklarovat tyto proměnné v :root, který ukazuje na prvek <html>Například pro výchozí světlý motiv můžete začít s něčím takovým:

:root {
  --color-fondo: #ffffff;
  --color-texto: #000000;
  --color-principal: #007bff;
}

Od tohoto okamžiku by se veškeré vaše CSS mělo spoléhat na tyto proměnné. Například:

body {
  background: var(--color-fondo);
  color: var(--color-texto);
}

a {
  color: var(--color-principal);
}

Všimněte si, že Ve zbytku kódu nejsou žádné „tvrdé“ barvy., pouze odkazy na var(--...)To vám umožní později aktivovat tmavý režim nebo dokonce více dalších témat jednoduše předefinováním stejných proměnných s jinými hodnotami.

Tmavý režim pouze s použitím CSS a selektoru :has()

Pokud chcete velmi rychlé řešení a nevadí vám tmavý režim Při změně stránek se to nezapamatuje.Tmavé téma si můžete nastavit bez JavaScriptu pomocí relačního selektoru. :has() a zaškrtávací políčko.

Logika je následující: deklarujete proměnné výchozího světlého motivu v :rootTyto proměnné aplikujete na celý dokument skrz body a pak použijete body:has(#darkmode-toggle:checked) přepsat hodnoty, když je zaškrtávací políčko zaškrtnuto.

Velmi jednoduchý příklad by byl:

/* Colores por defecto (modo claro) */
:root {
  --bg-color: #ffffff;
  --text-color: #222222;
}

/* Aplicar variables al documento */
body {
  background: var(--bg-color);
  color: var(--text-color);
  transition: background 0.3s, color 0.3s;
}

/* “Magia” del modo oscuro sin JS */
body:has(#darkmode-toggle:checked) {
  --bg-color: #1e1e1e;
  --text-color: #f5f5f5;
}

V HTML potřebujete pouze jeden zaškrtávací políčko, které funguje jako přepínač a štítek <label> aby na něj bylo možné klikat a aby byl vizuálně přizpůsobitelný:

<input id="darkmode-toggle" type="checkbox" />
<label class="toggle" for="darkmode-toggle">Modo oscuro</label>

Když uživatel aktivuje zaškrtávací políčko, selektor body:has(#darkmode-toggle:checked) přichází do hryzměnou hodnot proměnných. Stejně jako zbytek webu používá var(--bg-color) y var(--text-color)Celý design se okamžitě přizpůsobí tmavému režimu.

Jedinou nevýhodou tohoto triku je nedostatečná perzistence : pokud uživatel stránku znovu načte nebo přejde na jinou cestu, volba se ztratí, protože se nepoužívají žádné skripty ani ukládání dat. Proto je ideální pro jednostránkové vstupní stránky nebo jednoduchá dema, kde si nemusíte pamatovat preferenci.

Vyměňujte si témata přidáním kurzů do buď

Pokud chcete jít o krok dál a mít solidní systém témat, nejběžnější věcí je ovládejte téma pomocí třídy v kořenovém elementu (<html>) nebo v <body>Tímto způsobem můžete definovat bloky proměnných pro každé téma a nechat malý úryvek JavaScriptu zvládnout výměnu tříd.

Základy CSS by mohly vypadat nějak takto:

/* Tema claro por defecto */
:root {
  --color-fondo: #ffffff;
  --color-texto: #000000;
  --color-principal: #007bff;
}

/* Tema oscuro */
:root.tema-oscuro {
  --color-fondo: #333333;
  --color-texto: #ffffff;
  --color-principal: #66b2ff;
}

Ostatní styly se na těchto proměnných spoléhají, jak jsme již viděli:

body {
  background: var(--color-fondo);
  color: var(--color-texto);
}

a {
  color: var(--color-principal);
}

Přepínač v HTML může být jednoduchý jako zaškrtávací políčko s jeho tagem :

<input type="checkbox" id="interruptor-tema" />
<label for="interruptor-tema">Tema oscuro</label>

A JavaScript stačí jen přepnout příslušnou třídu na elementu. documentElement (co je <html>):

const interruptor = document.getElementById('interruptor-tema');

interruptor.addEventListener('change', function () {
  document.documentElement.classList.toggle('tema-oscuro');
});

Zaškrtnutím políčka váš web Automaticky přepíná mezi světlým a tmavým režimem., a to díky tomu, že proměnné CSS jsou předefinovány ve třídě .tema-oscuroVýhoda oproti triku s :has() Jde o to, že zde můžete snadno přidat více logiky a především vytrvalosti.

Nezapomeňte na preferenci: localStorage k záchraně

Aby uživatel nemusel stále aktivovat tmavý režim pokaždé, když se vrátí na váš web, můžete své rozhodnutí uložit do lokálního úložiště prohlížeče (localStorageJedná se o velmi jednoduché API s klíčem a hodnotou, které přetrvává mezi návštěvami, dokud nejsou vymazána data prohlížeče.

Typický způsob, jak to vyřešit, je:

Když se stránka načte, čtete, zda existuje uložená hodnota (například tema = 'oscuro' o 'claro').
Pokud existuje a je tma, přidáte třídu tema-oscuro al <html> a zaškrtnete políčko.
Když uživatel změní přepínač, aktualizujete jak třídu, tak hodnotu v localStorage.

Kompletní kód by mohl vypadat takto:

// Al cargar la página, aplica el tema guardado
if (localStorage.getItem('tema') === 'oscuro') {
  document.documentElement.classList.add('tema-oscuro');
  document.getElementById('interruptor-tema').checked = true;
}

// Manejar cambios en el interruptor
const interruptor = document.getElementById('interruptor-tema');

interruptor.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');
  }
});

Díky tomuto přístupu si váš web zachová zvolený tmavý režim, i když uživatel zavře kartu nebo se vrátí o několik dní později. Toto je nejpraktičtější řešení pro vícestránkové weby nebo větší projekty, kde je zachování konzistence tématu klíčové pro uživatelský zážitek.

Automaticky detekovat systémové téma pomocí prefers-color-scheme

Dalším důležitým kouskem skládačky jsou konzultace s médii prefers-color-schemeDíky tomu váš CSS zjistí, zda si uživatel nastavil systém ve světlém nebo tmavém režimu. Tímto způsobem můžete přizpůsobit design, aniž by se uživatel musel čehokoli dotknouts ohledem na celkové preference vašeho zařízení.

Dotaz má primárně dvě hodnoty: light y darkVelmi běžným vzorem je nejprve definovat světlé téma jako výchozí a poté přepnout na tmavé, pokud uživatel preferuje tento režim ve svém prohlížeči:

/* Tema claro por defecto */
:root {
  --body-bg: #ffffff;
  --body-color: #000000;
}

/* Tema oscuro si el sistema está en oscuro */
@media (prefers-color-scheme: dark) {
  :root {
    --body-bg: #000000;
    --body-color: #ffffff;
  }
}

Pak jednoduše použijete tyto proměnné ve svých obecných stylech:

body {
  background: var(--body-bg);
  color: var(--body-color);
}

Tímto způsobem vaše stránky Automaticky se přizpůsobí tématu uživatele. bez nutnosti JavaScriptu. Specifikace navíc ponechává otevřené dveře pro možné budoucí hodnoty, takže mít jasné výchozí téma a upravovat pouze větev je výhodné. dark Je to poměrně robustní způsob, jak organizovat CSS.

Pokud tuto techniku zkombinujete s přepínáním témat a localStorage, můžete nastavit počáteční hodnota založená na prefers-color-scheme a pak nechat uživatele, aby ji přepsal svým tlačítkem. Stačí se ve své logice JavaScriptu rozhodnout, jakou prioritu dát: uložené hodnotě nebo samotné hodnotě. systémové preference.

Implementace vizuálního přepínače motivů pomocí HTML, CSS a JavaScriptu

Kromě typického nestylovaného zaškrtávacího políčka mnoho webů používá propracovanější přepínač zapnutí/vypnutí (někdy s ikonami slunce a měsíce). Můžete ho vytvořit pomocí velmi jednoduchého HTML a stylizovat přepínač pomocí CSS.

Běžným příkladem struktury HTML, inspirované rozvržením s frameworky jako Bootstrap, by mohl být:

<header class="container">
  <div class="row">
    <div class="col text-center">
      <label id="switch">
        <input type="checkbox">
        <span class="slider round"></span>
      </label>
      <h1>Mi sitio web</h1>
    </div>
  </div>
</header>

V tomto vzoru, Zaškrtávací políčko je vizuálně „skryté“ a vzhled přepínače je dosaženo <span class="slider"> pomocí CSS (zaoblené okraje, animace atd.). Poté můžete tento přepínač propojit se správou šablon pomocí malého skriptu.

Například nastavení atributu v <html> Prosím, uveďte aktuální téma:

<script>
  const colorSwitch = document.querySelector('#switch input');

  function cambiaTema(ev) {
    if (ev.target.checked) {
      document.documentElement.setAttribute('tema', 'dark');
    } else {
      document.documentElement.setAttribute('tema', 'light');
    }
  }

  colorSwitch.addEventListener('change', cambiaTema);
</script>

Ve vašem CSS stačí deklarovat proměnné na základě tohoto atributu. tema="light" o tema="dark", například:

:root {
  --bg-color: #ffffff;
  --text-color: #111111;
}

:root {
  --bg-color: #111111;
  --text-color: #f5f5f5;
}

body {
  background: var(--bg-color);
  color: var(--text-color);
}

Tento přístup založený na atributech je velmi snadno čitelný a Umožňuje vám přidat další státy v budoucnu (například téma „neon“, „sépie“ atd.) jednoduše rozšířením selektorů atributů :root.

Jděte ještě dál: více barevných motivů s

Tmavý režim je jen začátek: s proměnnými CSS je to relativně jednoduché definovat několik barevných schémat a nechat uživatele vybrat si mezi nimi. Mechanika je stejná, ale místo jednoduchého zaškrtávacího políčka můžete použít <select> s různými možnostmi.

Související článek:

Jak povolit tmavý režim v programu Malování ve Windows 11

V HTML kódu by mohlo být něco jako:

<label for="selector-tema">Elige un tema</label>
<select id="selector-tema">
  <option value="light">Claro</option>
  <option value="dark">Oscuro</option>
  <option value="neon">Neón 90s</option>
  <option value="sepia">Sepia</option>
</select>

V CSS definujete proměnné pro každé schéma pomocí tříd nebo atributů, například pomocí tříd v :root:

:root.light {
  --bg-color: #ffffff;
  --text-color: #000000;
  --font-family: "Open Sans", sans-serif;
}

:root.dark {
  --bg-color: #111111;
  --text-color: #f5f5f5;
  --font-family: "Open Sans", sans-serif;
}

:root.neon {
  --bg-color: #050816;
  --text-color: #39ff14;
  --font-family: "Open Sans", sans-serif;
}

:root.sepia {
  --bg-color: #f4ecd8;
  --text-color: #4b3b2a;
  --font-family: "Georgia", serif;
}

Tělo stránky znovu používá tyto vlastní vlastnosti:

body {
  background: var(--bg-color);
  color: var(--text-color);
  font-family: var(--font-family, "Open Sans", sans-serif);
}

A JavaScript jednoduše naslouchá změně v elementu select a aktualizuje třídu kořenového elementu:

const selector = document.getElementById('selector-tema');

function setTheme(theme) {
  document.documentElement.className = theme;
  localStorage.setItem('tema', theme);
}

selector.addEventListener('change', function () {
  setTheme(this.value);
});

// Al cargar, aplicamos el tema guardado o uno por defecto
const temaGuardado = localStorage.getItem('tema') || 'light';
setTheme(temaGuardado);
selector.value = temaGuardado;

Díky tomu může váš web zpracovat libovolný počet barevných schémat , přičemž kód zůstane velmi čistý a definice stylů se soustředí do několika bloků proměnných.

Použijte prefers-color-scheme jako počáteční hodnotu selektoru

Pokud chcete, aby se zohlednil i počáteční režim preference systému uživatele, můžeš se znovu opřít prefers-color-schemeMyšlenkou je například načíst téma ve výchozím nastavení. dark Pokud je zařízení nastaveno na tmavý režim, ale povolit uživateli jeho pozdější změnu.

Toho lze dosáhnout kombinací CSS a JS, nebo jednoduše pomocí JavaScriptu dotazováním window.matchMedia. Například:

const temaGuardado = localStorage.getItem('tema');

let temaInicial = 'light';

if (temaGuardado) {
  temaInicial = temaGuardado;
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  temaInicial = 'dark';
}

setTheme(temaInicial);
selector.value = temaInicial;

Tímto způsobem, když uživatel poprvé vstoupí na váš web a jeho systém je v tmavém režimu, bude mu přiřazena téma konzistentní s danou konfiguracíOd té doby se všechny provedené změny budou ukládat do localStorage a bude mít přednost před automatickou detekcí.

Přístupnost a kontrast v tmavém režimu

Implementace tmavého režimu nespočívá jen v invertování barev. Pro skutečně skvělý zážitek je třeba pečlivě spravovat kontrast mezi textem a pozadím a mezi různými interaktivními prvky.

Pokyny pro přístupnost webového obsahu (WCAG) doporučují minimální kontrastní poměr 4.5:1 pro běžný text a 3:1 pro velký text. V praxi to znamená, že pouhé použití světle šedé na tmavě šedé bez kontroly čitelnosti nestačí. Online nástroje vám umožňují zadat barvy a ověřit, zda splňují požadavky.

Kromě textu věnujte pozornost tlačítkům, odkazům, ikonám a stavům fokusu . V tmavém režimu mohou některé jasné barvy rušit nebo být nečitelné. V mnoha případech je nejlepší upravit také stíny, okraje a sekundární pozadí, aby vše vizuálně zapadlo do nového schématu.

Mějte na paměti, že některé obrázky mohou v nočním režimu vypadat zvláštně: můžete potřebovat alternativní verze pozadí nebo upravit neprůhlednost, aby nevynikaly na tmavém pozadí. Podobně, pokud používáte ilustrace s bílým pozadím, zvažte jejich oříznutí nebo použití průhledných formátů, aby nenarušovaly celkový vzhled.

Jaké vlastnosti lze ovládat pomocí proměnných CSS?

Ačkoliv si proměnné CSS obvykle představujeme pouze pro barvy, ve skutečnosti můžete pomocí vlastních vlastností modulovat prakticky jakýkoli vizuální aspekt : písma, velikosti, mezery, stíny, obrázky na pozadí atd.

Například můžete změnit globální velikost písma v závislosti na motivu:

:root.light {
  --font-size-base: 16px;
}

:root.dark {
  --font-size-base: 17px;
}

body {
  font-size: var(--font-size-base);
}

Nebo definujte různé obrázky na pozadí podle barevného schématu:

:root.light {
  --bg-image: url('fondo-dia.jpg');
}

:root.dark {
  --bg-image: url('fondo-noche.jpg');
}

.hero {
  background-image: var(--bg-image);
}

Můžete si dokonce hrát s různé typy písma nebo „zábavnější“ styly pro alternativní témata, vždy s ohledem na zachování čitelnosti. Díky var() Pokud již máte záložní hodnoty, můžete označit bezpečné alternativy:

body {
  font-family: var(--font-family, "Open Sans", sans-serif);
}

To vše vám umožňuje vytvářet velmi bohaté uživatelské prostředí, aniž byste museli zaplňovat CSS složitými podmíněnými výrazy, protože většina „inteligence“ je soustředěna ve vrstvě proměnných.

Související článek:

Jak aktivovat noční režim (modré světlo) v systému Windows 10

Nabídka dobře navrženého tmavého režimu, podporovaného proměnnými CSS, prefers-color-scheme a trochou JavaScriptu , je relativně jednoduchý způsob, jak zlepšit uživatelský zážitek, aniž byste museli web přepisovat od nuly.

Pokud uspořádáte CSS kolem vlastních vlastností a centralizujete logiku šablony do několika tříd nebo atributů v <html>Můžete přidat vizuální přepínače a zapamatovat si preference pomocí localStorage a dokonce nabízejí několik barevných schémat, aniž by to příliš komplikovalo údržbu nebo obětovalo přístupnost. Sdílejte tuto programovací příručku, aby ostatní uživatelé věděli, jak na to.