Tamni način rada postao je popularna preferencija, pa biste ga trebali podržati na svojim web-lokacijama i u svojim web-aplikacijama.
Posljednjih je godina mračni način rada stekao značajnu popularnost kao opcija korisničkog sučelja. Nudi tamniju pozadinu nadopunjenu svjetlijim tekstom, što ne samo da smanjuje naprezanje očiju, već i štedi trajanje baterije, posebno na OLED zaslonima.
Otkrijte kako možete dodati opciju mračnog načina rada na svoje web stranice i web aplikacije, koristeći kombinaciju CSS-a i JavaScripta.
Razumijevanje mračnog načina rada
Tamni način je alternativna shema boja za vašu web stranicu koja tradicionalnu svijetlu pozadinu mijenja tamnom. Čini vaše stranice lakšim za oči, posebno u uvjetima slabog osvjetljenja. Tamni način rada postao je standardna značajka na mnogim web stranicama i aplikacijama zbog svoje jednostavnosti.
Postavljanje vašeg projekta
Prije nego što ovo implementirate, osigurajte da imate projekt postavljen i spreman za rad. Trebali biste organizirati svoje HTML, CSS i JavaScript datoteke na strukturiran način.
HTML kôd
Započnite sa sljedećim oznakama za sadržaj svoje stranice. Posjetitelj će moći koristiti theme__switcher element za prebacivanje između tamnog i svijetlog načina rada.
<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 kod
Dodajte sljedeći CSS za stiliziranje primjera. Ovo će djelovati kao zadani svjetlosni način rada koji ćete kasnije proširiti novim stilovima za prikaz tamnog načina rada.
@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);
}
Trenutačno bi vaše sučelje trebalo izgledati ovako:
Implementacija mračnog načina rada pomoću CSS-a i JavaScripta
Da biste implementirali tamni način rada, definirat ćete njegov izgled pomoću CSS-a. Zatim ćete koristiti JavaScript za upravljanje prebacivanjem između tamnog i svijetlog načina rada.
Izrada tematskih razreda
Koristite jednu klasu za svaku temu kako biste se lako prebacivali između dva načina. Za potpuniji projekt, trebali biste razmotriti kako mračni način rada može utjecati na svaki aspekt vašeg dizajna.
.dark {
background: #1f1f1f;
color: #fff;
}
.light {
background: #fff;
color: #333;
}
Odabir interaktivnih elemenata
Dodajte sljedeći JavaScript svom skripta.js datoteka. Prvi dio koda jednostavno odabire elemente koje ćete koristiti za rukovanje prekidačem.
// Get a reference to the theme switcher element and the document body
const themeToggle = document.getElementById("theme__switcher");
const bodyEl = document.body;
Dodavanje funkcije prebacivanja
Zatim upotrijebite sljedeći JavaScript za prebacivanje između svijetlog načina rada (svjetlo) i tamni način (mračno) klase. Imajte na umu da je također dobra ideja promijeniti prekidač za označavanje trenutnog načina rada. Ovaj kod to čini s CSS filter.
// Function to set the themefunctionsetTheme(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);
To čini da vaša stranica mijenja teme jednim pritiskom na preklopni spremnik.
Poboljšanje tamnog načina rada JavaScriptom
Razmotrite sljedeća dva poboljšanja koja mogu učiniti vaša web mjesta u tamnom načinu rada ugodnijima za korištenje vašim posjetiteljima.
Otkrivanje korisničkih postavki
To uključuje provjeru korisnikove teme sustava prije učitavanja web stranice i prilagodbu vaše web stranice da odgovara. Evo kako to možete učiniti pomoću matchMedia funkcija:
// Function to detect user's preferred themefunctiondetectPreferredTheme() {
// 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();
Sada će svaki korisnik koji posjeti vašu stranicu vidjeti dizajn koji odgovara trenutnoj temi njegovog uređaja.
Trajne korisničke postavke s lokalnom pohranom
Da biste dodatno poboljšali korisničko iskustvo, koristiti lokalnu pohranu kako bi zapamtio korisnikov odabrani način rada kroz sesije. To osigurava da ne moraju više puta birati željeni način rada.
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");
}
Prihvaćanje dizajna usmjerenog na korisnika
Tamni način rada nadilazi izgled; radi se o stavljanju udobnosti i preferencija korisnika na prvo mjesto. Slijedeći ovaj pristup, možete stvoriti korisničko sučelje i potaknuti ponovne posjete. Dok kodirate i dizajnirate, dajte prednost dobrobiti korisnika i pružite bolje digitalno iskustvo svojim čitateljima.
