Tmavý režim sa stal populárnou preferenciou, preto by ste ho mali podporovať na svojich stránkach a vo webových aplikáciách.

V posledných rokoch si tmavý režim získal významnú popularitu ako možnosť používateľského rozhrania. Ponúka tmavšie pozadie doplnené svetlejším textom, čo nielen znižuje únavu očí, ale aj šetrí výdrž batérie, najmä na obrazovkách OLED.

Zistite, ako môžete pridať možnosť tmavého režimu na svoje webové stránky a webové aplikácie pomocou kombinácie CSS a JavaScriptu.

Pochopenie tmavého režimu

Tmavý režim je alternatívna farebná schéma pre váš web, ktorý vymení tradičné svetlé pozadie za tmavé. Uľahčuje to očiam vaše stránky, najmä pri slabom osvetlení. Tmavý režim sa stal štandardnou funkciou na mnohých webových stránkach a aplikáciách vďaka svojej užívateľsky prívetivej povahe.

Nastavenie vášho projektu

Pred implementáciou sa uistite, že máte projekt nastavený a pripravený na prácu. Súbory HTML, CSS a JavaScript by ste mali mať usporiadané štruktúrovaným spôsobom.

Kód HTML

instagram viewer

Začnite s nasledujúcim označením obsahu vašej stránky. Návštevník bude môcť využiť prepínač témy prvok na prepínanie medzi tmavým a svetlým režimom.

<body>
<navclass="navbar">
<spanclass="logo">Company Logospan>
<ulclass="nav__lists">
<li>Aboutli>
<li>Blogli>
<li>Contactli>
ul>


<divid="theme__switcher">
<imgid="theme__image"src="./toggle.svg"alt="" />
div>
nav>


<main>
 Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Odit deserunt sit neque in labore quis quisquam expedita minus
 perferendis.
main>
<scriptsrc="./script.js">script>
body>

Kód CSS

Ak chcete upraviť štýl príkladu, pridajte nasledujúci CSS. Bude to fungovať ako predvolený svetelný režim, ktorý neskôr rozšírite o nové štýly pre zobrazenie v tmavom režime.

@import url("https://fonts.googleapis.com/css2?family=Quicksand: wght@400;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}


html { font-size: 62.5%; }


body { font-family: "Quicksand", sans-serif; }


.navbar {
display: flex;
padding: 2rem;
font-size: 1.6rem;
align-items: center;
color: rgb(176, 58, 46);
background-color: #fdedec;
}


.navbarspan { margin-right: auto; }


.logo { font-weight: 700; }


.nav__lists {
display: flex;
list-style: none;
column-gap: 2rem;
margin: 0 2rem;
}


#theme__switcher { cursor: pointer; }


main {
width: 300px;
margin: 5remauto;
font-size: 2rem;
line-height: 2;
padding: 1rem 2rem;
border-radius: 10px;
box-shadow: 2px 3.5px 5pxrgba(242, 215, 213, 0.4);
}

V súčasnosti by vaše rozhranie malo vyzerať takto:

Implementácia tmavého režimu pomocou CSS a JavaScriptu

Ak chcete implementovať tmavý režim, definujte jeho vzhľad pomocou CSS. Potom použijete JavaScript na spracovanie prepínania medzi tmavým a svetlým režimom.

Vytváranie tematických tried

Pre každú tému použite jednu triedu, aby ste mohli ľahko prepínať medzi týmito dvoma režimami. Pre úplnejší projekt by ste mali zvážiť ako tmavý režim môže ovplyvniť každý aspekt vášho dizajnu.

.dark {
background: #1f1f1f;
color: #fff;
}
.light {
background: #fff;
color: #333;
}

Výber interaktívnych prvkov

Pridajte nasledujúci JavaScript do svojho script.js súbor. Prvý kúsok kódu jednoducho vyberie prvky, ktoré použijete na ovládanie prepínača.

// Get a reference to the theme switcher element and the document body
const themeToggle = document.getElementById("theme__switcher");
const bodyEl = document.body;

Pridanie funkcie prepínania

Potom použite nasledujúci JavaScript na prepínanie medzi svetelným režimom (svetlo) a tmavý režim (tmavé) triedy. Upozorňujeme, že je tiež dobré zmeniť prepínač tak, aby označoval aktuálny režim. Tento kód tak robí s CSS filter.

// Function to set the theme
functionsetTheme(theme) {
// If the theme is "dark," add the "dark" class, remove "light" class,
// and adjust filter style
 bodyEl.classList.toggle("dark", theme "dark");


// If the theme is "light," add the "light" class, remove "dark" class,
 bodyEl.classList.toggle("light", theme !== "dark");


// adjust filter of the toggle switch
 themeToggle.style.filter = theme "dark"? "invert(75%)": "none";
}


// Function to toggle the theme between light and dark


functiontoggleTheme() {
 setTheme(bodyEl.classList.contains("dark")? "light": "dark");
}


themeToggle.addEventListener("click", toggleTheme);

Vďaka tomu zmeníte motívy stránky kliknutím na prepínač kontajnera.

Vylepšenie tmavého režimu pomocou JavaScriptu

Zvážte nasledujúce dve vylepšenia, ktoré môžu vašim návštevníkom spríjemniť používanie vašich stránok v tmavom režime.

Zisťovanie používateľských preferencií

Zahŕňa to kontrolu systémovej témy používateľa pred načítaním webovej lokality a úpravu vašej lokality tak, aby sa zhodovala. Tu je návod, ako to môžete urobiť pomocou matchMedia funkcia:

// Function to detect user's preferred theme
functiondetectPreferredTheme() {
// Check if the user prefers a dark color scheme using media queries
const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
 setTheme(prefersDarkMode);
}


// Run the function to detect the user's preferred theme
detectPreferredTheme();

Teraz každý používateľ, ktorý navštívi vaše stránky, uvidí dizajn, ktorý zodpovedá aktuálnej téme jeho zariadenia.

Pretrvávajúce preferencie používateľa s lokálnym úložiskom

Na ďalšie zlepšenie používateľského zážitku, používať lokálne úložisko zapamätať si režim zvolený používateľom naprieč reláciami. Tým sa zabezpečí, že nebudú musieť opakovane vyberať preferovaný režim.

functionsetTheme(theme) {
 bodyEl.classList.toggle("dark", theme "dark");
 bodyEl.classList.toggle("light", theme !== "dark");
 themeToggle.style.filter = theme "dark"? "invert(75%)": "none";


// Setting the theme in local storage
 localStorage.setItem("theme", theme);
}


// Check if the theme is stored in local storage


const storedTheme = localStorage.getItem("theme");


if (storedTheme) {
 setTheme(storedTheme);
}


functiondetectPreferredTheme() {
const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;


// Getting the value from local storage
const storedTheme = localStorage.getItem("theme");
 setTheme(prefersDarkMode && storedTheme !== "light"? "dark": "light");
}

Zahŕňa užívateľsky orientovaný dizajn

Tmavý režim presahuje vzhľad; je to o uprednostnení používateľského komfortu a preferencií. Dodržiavaním tohto prístupu môžete vytvárať užívateľsky prívetivé rozhrania a podporovať opakované návštevy. Pri kódovaní a navrhovaní uprednostňujte pohodu používateľov a poskytnite svojim čitateľom lepší digitálny zážitok.