Jak vytvořit tmavý režim: Nastavení dark modu v CSS v 6 krocích!

Tmavý režim se v poslední době stal hodně oblíbenou funkcí, která nejen přidává na uživatelském zážitku, ale je také méně namáhavá pro oči. Přestože se na první pohled může zdát složité ho naprogramovat, splním vám, že je to velmi jednoduché a rychle vám přidá hodnotu, za kterou vás zákazníci budou jen chválit.

V tomto návodu se postarám o vše podstatné – od samotného nastavení základních tříd a proměnných, přes programování interaktivního tlačítka až po ukládání nastavení či optimalizaci pro různá zařízení. Vše bude krok za krokem popsáno srozumitelně a navíc s řadou užitečných tipů pro každou fázi implementace.

1. Nastavení třídy pro tmavý režim

Nejprve je třeba v CSS souboru nastavit základní styly pro tmavý režim. Vytvořte novou třídu .dark-mode a nastavte zde proměnné barvy, které budou sloužit pro text a pozadí:

cssCopy

:root {
  --text-color: #fff; 
  --bg-color: #333;
}

.dark-mode {
  color: var(--text-color);
  background-color: var(--bg-color); 
}

Nastavte bílý text a tmavě šedé pozadí. Proměnné barvy pak snadno změníte v jednom místě.

Použití proměnných pro ostatní styly

Pro ostatní stylovací prvky jako odstavce, odkazy apod. použijte také proměnné barvy:

cssCopy

p {
  color: var(--text-color);
}

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

2. Implementace tlačítka pro přepínání tmavého režimu

Pro přepínání režimů vytvořte tlačítko s textem „Změnit režim“:

htmlCopy

<button id="theme">Změnit režim</button>  

Pomocí JavaScriptu přidejte k tomuto tlačítku událost kliknutí:

jsCopy

const button = document.getElementById('theme');

button.addEventListener('click', changeTheme);

Funkce changeTheme by pak měla pomocí .classList.toggle() přidávat a ubírat třídu .dark-mode obsahu dokumentu.

Díky tomu se při každém kliknutí vytvoří nebo odstraní tmavý režim.

3. Změna stylů podle režimu

Pro každý stylovací element je potřeba nastavit varianty pro světlý i tmavý režim. Použijeme k tomu atributy třídy:

cssCopy

p {
  color: var(--text-color); 
}

p.dark-mode {
  color: var(--text-color-dark);
}

Definujeme dvě varianty textové barvy a podle přítomnosti třídy .dark-mode zvolíme správnou.

Použití pro ostatní prvky

Totéž uděláme pro pozadí, odkazy, tlačítka apod.:

cssCopy

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

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

4. Pravidla pro konkrétní prvky

Text, pozadí, odkazy:

cssCopy

p, a {
  color: var(--text);
}

p.dark-mode, 
a.dark-mode {
  color: var(--text-dark);
}

Tlačítka, nav:

cssCopy

button, nav {
  background: var(--bg);
  color: var(--text);
}

button.dark-mode,
nav.dark-mode {
  background: var(--bg-dark);
  color: var(--text-dark);
}

Vyzkoušejte iterativně upravovat styly podle potřeby.

5. Uživatelské nastavení dark modu

Je vhodné umožnit uživateli nastavit si preferovaný režim. Použijeme k tomu Local Storage:

jsCopy

// Uložíme si stav do LS
function saveTheme() {
  localStorage.setItem('theme', darkModeOn ? 'dark' : 'light');
}

// Načteme při načtení stránky
function applyTheme() {
  const theme = localStorage.getItem('theme');
  if(theme === 'dark') enableDarkMode();
}

Volat funkci při aktivaci a deaktivaci dark módu.

6. Přizpůsobení různým zařízením

Na různých zařízeních optimalizujte barvy:

cssCopy

@media (prefers-color-scheme: dark) {
  /* Tmavé barvy pro mobily */
}

@media (prefers-color-scheme: light) {
  /* Světlé barvy pro počítače */ 
}

Použijte i responsive design:

• Zmenšené fontáčky, odstavce
• Minimalizace prvků
• Větší tlačítka

Testujte funkčnost na všech zařízeních.

A tím máme hotovo – zkompletovaný návod na dark mode v CSS!

Doporučujeme: Jak udělat černý Instagram

Závěr

Na závěr mi dovolte shrnout 3 hlavní věci, které se z tohoto návodu dozvíte:

1. Jak jednoduše vytvořit plnohodnotný tmavý režim pomocí CSS a JavaScriptu.
2. Jak optimalizovat nastavení pro různá zařízení jako mobily, tablety či počítače.
3. Jak zachytit uživatelské preference a uchovat je pro další nasazení.

Doufám, že se vám tento komplexní postup setmění stránek bude hodit. Pokud budete mít ještě nějaké další dotazy, neváhejte se zeptat. Nyní vám přeji hezké pročtení a implementaci!