Temni način je postal priljubljena prednost, zato bi ga morali podpreti na svojih spletnih mestih in v spletnih aplikacijah.

V zadnjih letih je temni način pridobil veliko popularnost kot možnost uporabniškega vmesnika. Ponuja temnejše ozadje, ki ga dopolnjuje svetlejše besedilo, kar ne le zmanjša obremenitev oči, ampak tudi prihrani življenjsko dobo baterije, zlasti na zaslonih OLED.

Odkrijte, kako lahko svojim spletnim mestom in spletnim aplikacijam dodate možnost temnega načina s kombinacijo CSS in JavaScript.

Razumevanje temnega načina

Temni način je alternativna barvna shema za vaše spletno mesto, ki tradicionalno svetlo ozadje zamenja s temnim. Zaradi tega so vaše strani lažje za oči, zlasti v slabih svetlobnih pogojih. Temni način je postal standardna funkcija na številnih spletnih mestih in aplikacijah zaradi svoje uporabniku prijazne narave.

Nastavitev vašega projekta

Preden to izvedete, zagotovite, da imate projekt nastavljen in pripravljen za delo. Datoteke HTML, CSS in JavaScript morate organizirati na strukturiran način.

instagram viewer

Koda HTML

Začnite z naslednjo oznako za vsebino vaše strani. Obiskovalec bo lahko uporabil theme__switcher element za preklapljanje med temnim in svetlim načinom.

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

Koda CSS

Dodajte naslednji CSS za oblikovanje primera. To bo delovalo kot privzeti svetlobni način, ki ga boste pozneje nadgradili z novimi slogi za pogled v temnem načinu.

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

Trenutno bi moral vaš vmesnik izgledati takole:

Implementacija temnega načina z uporabo CSS in JavaScript

Če želite implementirati temni način, boste njegov videz določili s CSS. Nato boste uporabili JavaScript za upravljanje preklapljanja med temnim in svetlim načinom.

Ustvarjanje tematskih razredov

Za vsako temo uporabite en razred, da boste lahko preprosto preklapljali med obema načinoma. Za popolnejši projekt bi morali razmisliti, kako temni način lahko vpliva na vse vidike vašega oblikovanja.

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

Izbira interaktivnih elementov

Dodajte naslednji JavaScript svojemu script.js mapa. Prvi košček kode preprosto izbere elemente, ki jih boste uporabili za upravljanje preklopa.

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

Dodajanje funkcije preklopa

Nato uporabite naslednji JavaScript za preklapljanje med svetlobnim načinom (svetloba) in temni način (temno) razrede. Upoštevajte, da je dobro tudi spremeniti preklopno stikalo, da označuje trenutni način. Ta koda to počne z filter CSS.

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

Tako vaša stran spremeni teme s klikom preklopnega vsebnika.

Izboljšanje temnega načina z JavaScriptom

Razmislite o naslednjih dveh izboljšavah, ki lahko naredita vaša spletna mesta v temnem načinu prijetnejša za uporabo za vaše obiskovalce.

Zaznavanje uporabniških nastavitev

To vključuje preverjanje uporabnikove sistemske teme, preden se spletno mesto naloži, in prilagajanje vašega spletnega mesta, da se ujema. Evo, kako lahko to storite z uporabo matchMedia funkcija:

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

Zdaj bo vsak uporabnik, ki obišče vaše spletno mesto, videl dizajn, ki se ujema s trenutno temo njegove naprave.

Trajanje uporabniških nastavitev z lokalnim pomnilnikom

Za dodatno izboljšanje uporabniške izkušnje, uporabite lokalni pomnilnik da si zapomni uporabnikov izbrani način med sejami. To zagotavlja, da jim ni treba vedno znova izbirati želenega načina.

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

Sprejemanje oblikovanja, osredotočenega na uporabnika

Temni način presega videz; gre za to, da so udobje in želje uporabnika na prvem mestu. Če sledite temu pristopu, lahko ustvarite uporabniku prijazne vmesnike in spodbudite ponovne obiske. Ko kodirate in oblikujete, dajte prednost dobremu počutju uporabnikov in zagotovite boljšo digitalno izkušnjo svojim bralcem.