Temni način (Dark Mode) ni več le modna muha, ampak standard za boljšo uporabniško izkušnjo, sploh ponoči. Poglejmo, kako s preprostim JavaScriptom omogočimo uporabniku, da sam izbira svojo temo.
1. HTML Gumb
Najprej potrebujemo gumb v našem navbaru, ki bo sprožil zamenjavo teme.
<button id="theme-toggle" onclick="toggleTheme()">
🌓
</button>2. CSS in Atributi
Namesto da menjamo barvo vsakemu elementu posebej, v CSS-u določimo barve glede na data-theme atribut na <html> elementu.
:root { --bg: #ffffff; --fg: #000000; }
[data-theme="dark"] { --bg: #121212; --fg: #ffffff; }
body { background: var(--bg); color: var(--fg); }3. JavaScript Logika
Glavni del naloge opravi JavaScript. Funkcija preklopi atribut in izbiro shrani v localStorage, da si brskalnik zapomni nastavitev tudi ob naslednjem obisku.
function toggleTheme() {
const root = document.documentElement;
const trenutna = root.getAttribute("data-theme");
const nova = (trenutna === "dark") ? "light" : "dark";
root.setAttribute("data-theme", nova);
localStorage.setItem("theme", nova);
}S tem preprostim trikom bo vaša stran moderna in prijazna do oči vaših obiskovalcev!