Tume režiim on muutunud populaarseks eelistuseks, seega peaksite otsima selle toetamist oma saitidel ja veebirakendustes.

Viimastel aastatel on tume režiim kasutajaliidese valikuna märkimisväärset populaarsust kogunud. See pakub tumedamat tausta, mida täiendab heledam tekst, mis mitte ainult ei vähenda silmade pinget, vaid säästab ka aku kasutusaega, eriti OLED-ekraanidel.

Avastage, kuidas saate CSS-i ja JavaScripti kombinatsiooni kasutades oma veebisaitidele ja veebirakendustele lisada tumeda režiimi valiku.

Tumeda režiimi mõistmine

Tume režiim on alternatiivne värviskeem teie veebisaidi jaoks, mis vahetab traditsioonilise heleda tausta tumeda vastu. See muudab teie lehed silmade jaoks lihtsamaks, eriti vähese valguse korral. Tume režiim on oma kasutajasõbralikkuse tõttu muutunud paljude veebisaitide ja rakenduste standardfunktsiooniks.

Projekti seadistamine

Enne selle rakendamist veenduge, et teil on projekt seadistatud ja valmis töötama. Teie HTML-, CSS- ja JavaScript-failid peaksid olema struktureeritud viisil.

HTML-kood

Alustage oma lehe sisu järgmise märgistusega. Külastaja saab kasutada teema__vahetaja element, et lülituda tumeda ja heleda režiimi vahel.

<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>

CSS-i kood

Lisage näite stiilimiseks järgmine CSS. See toimib vaikevalgusrežiimina, mida hiljem täiendate tumeda režiimi vaate jaoks uute stiilidega.

@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);
}

Praegu peaks teie liides välja nägema järgmine:

Tumeda režiimi rakendamine CSS-i ja JavaScripti abil

Tumeda režiimi rakendamiseks määrate selle välimuse CSS-i abil. Seejärel kasutate tumeda ja heleda režiimi vahetamiseks JavaScripti.

Teemaklasside loomine

Kasutage iga teema jaoks ühte klassi, et saaksite hõlpsalt kahe režiimi vahel vahetada. Täielikuma projekti jaoks peaksite kaaluma, kuidas tume režiim võib mõjutada teie kujunduse kõiki aspekte.

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

Interaktiivsete elementide valimine

Lisage omale järgmine JavaScript script.js faili. Koodi esimene bitt valib lihtsalt elemendid, mida lüliti käsitlemiseks kasutate.

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

Lülitusfunktsiooni lisamine

Järgmisena kasutage valgusrežiimi vahel vahetamiseks järgmist JavaScripti (valgus) ja tume režiim (tume) klassid. Pange tähele, et praeguse režiimi näitamiseks on hea mõte ka lülituslülitit muuta. See kood teeb seda koos 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);

See muudab teie lehe teemasid lülituskonteineri klõpsuga.

Tumeda režiimi täiustamine JavaScriptiga

Kaaluge kahte järgmist täiustust, mis võivad teie tumeda režiimi saite külastajatele meeldivamaks muuta.

Kasutaja eelistuste tuvastamine

See hõlmab kasutaja süsteemiteema kontrollimist enne veebisaidi laadimist ja saidi kohandamist. Siin on, kuidas saate seda teha, kasutades matchMedia funktsioon:

// 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();

Nüüd näevad kõik teie saiti külastavad kasutajad kujundust, mis sobib nende seadme praeguse teemaga.

Püsivad kasutajaeelistused kohaliku salvestusruumiga

Kasutajakogemuse edasiseks parandamiseks kasutage kohalikku salvestusruumi et meeles pidada kasutaja valitud režiimi seansside jooksul. See tagab, et nad ei pea korduvalt oma eelistatud režiimi valima.

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");
}

Kaasa arvatud kasutajakeskne disain

Tume režiim ületab välimuse; see seisneb kasutaja mugavuse ja eelistuste seadmises esikohale. Seda lähenemisviisi järgides saate luua kasutajasõbralikke liideseid ja julgustada korduvaid külastusi. Kodeerimisel ja kujundamisel seadke esikohale kasutaja heaolu ja pakkuge oma lugejatele paremat digitaalset kogemust.