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.documentElement
const darkmodeSwitch = document.querySelector("#darkmode-switch")
// pomocné funkce k přepnutí tmavého režimu
function enableDarkMode() {
html.classList.add('dark');
localStorage.setItem('theme', 'dark');
}
function disableDarkMode() {
html.classList.remove('dark');
localStorage.setItem('theme', 'light');
}
// zjistí předvolbu tmavého režimu uživatele
function detectColourScheme() {
// 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žim
if (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či
else if (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ánky
detectColourScheme();
// 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 saved
localStorage.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.
Nastavení tmavého režimu elementů pomocí CSS
main.css
html.dark body .cilovyElement {
background-color: #000000;
color: #ffffff;
}
Konfigurace tmavého režimu v TailwindCSS
Pro zprovoznění tmavého režimu v TailwindCSS je potřeba upravit konfigurační soubor tailwind.config.js
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.
