V tomto krátkém blogovém návodu si ukážeme, jak přidat tmavý režim zobrazení na váš web během 5 minut - bez žádného zbytečného kódu, který by zpomaloval vaši stránku. Najdete zde varianty kódu pro použití s klasickým CSS, preprocesorem LESS a frameworkem TailwindCSS.
HTML
Nejdříve je potřeba vytvořit HTML tlačítko, které bude přepínat mezi tmavým a světlým režimem. V tomto příkladu máte tlačítko, které je i na našem webu. Samozřejmě můžete ale použít i libovolné tlačítko ve formátu SVG ikony nebo obrázku.
Naše tlačítko je potřeba také nastylovat pomocí CSS. V Senoweb používáme preprocesor LESS, v němž je možné použít tento kód. V kódu jsou zabudované i animace pro přecházení mezi světlým a tmavým režimem.
Musíme vytvořit také krátký JavaScript kód, kterým zajistíme, že při kliknutí na tlačítko se přidá class "dark" k elementu <html> a nadefinujeme veškerou logiku tmavého režimu.
script.js
const html = document.documentElementconst darkmodeSwitch = document.querySelector("#darkmode-switch")
// pomocné funkce k přepnutí tmavého režimufunctionenableDarkMode() {
html.classList.add('dark');
localStorage.setItem('theme', 'dark');
}
functiondisableDarkMode() {
html.classList.remove('dark');
localStorage.setItem('theme', 'light');
}
// zjistí předvolbu tmavého režimu uživatelefunctiondetectColourScheme() {
// defaultní režim je světlýlet theme = 'light';
// zkontroluj localStorage zda-li je v něm uložená proměnná 'theme', pokud ano, uživatel už navštívil web a nastav adekvátní režimif (localStorage.getItem('theme')) {
theme = localStorage.getItem('theme');
}
// pokud proměnná neexistuje, zkontroluj, jestli si uživatel nastavil barevné předvolby sám v prohlížečielseif (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
theme = 'dark';
}
// pokud žádné předvolby nebyly nastaveny, světlý režim bude nastaven, jinak nastav podle předvoleb
theme === 'dark' ? enableDarkMode() : disableDarkMode();
}
// spustí se při načtení stránkydetectColourScheme();
// přidá eventListener, který bude snímat kliknutí na tlačítko pro přepnutí barevného režimu
darkmodeSwitch.addEventListener("change", (event) => {
// on click, check localstorage for the dark mode value, use to apply the opposite of what's savedlocalStorage.getItem('theme') === 'light' ? enableDarkMode(event) : disableDarkMode(event);
});
Nyní máme vše potřebné připraveno, jak nastavit tmavý vzhled na jednotlivých elementech webu?
Pro nastylování tmavého vzhledu jednotlivých elementů můžeme použít buď klasické CSS nebo framework TailwindCSS, který má zabudovaný dark mode systém.
Když všechno spojíme dohromady, vznikne nám funkční dark mode.
Výhody tmavého režimu webu a proč ho implementovat?
Možná by se zdálo, že tmavý režim je hloupost, která nemá žádné reálné využití a slouží pouze jako zajímavá funkce, kterou web trochu oživíte. Není tomu tak! V dnešní době už je velmi zásadní zpřístupnit webové stránky všem a to i těm, kteří mají určité zrakové nebo jiné znevýhodnění.
Tmavý režim je šetrnější pro oči a může pomoct i s množstvím vyzařovaného modrého světla, které negativně ovlivňuje kvalitu spánku
Berete ohled na znevýhodněné lidi trpící světloplachostí a zvýšenou citlivostí vůči světlu
Tmavý režim šetří baterii na mobilních zařízeních, které mají OLED displej
Zaujmete návštěvníky webu funkcí, kterou nemá každý web.
