Modul întunecat a devenit o preferință populară, așa că ar trebui să căutați să îl susțineți pe site-urile dvs. și în aplicațiile dvs. web.
În ultimii ani, modul întunecat a câștigat o popularitate semnificativă ca opțiune de interfață cu utilizatorul. Oferă un fundal mai întunecat completat de text mai deschis, care nu numai că reduce oboseala ochilor, ci și economisește durata de viață a bateriei, în special pe ecranele OLED.
Descoperiți cum puteți adăuga o opțiune în modul întunecat site-urilor și aplicațiilor dvs. web, folosind o combinație de CSS și JavaScript.
Înțelegerea modului întunecat
Modul întunecat este o schemă alternativă de culori pentru site-ul dvs. care schimbă fundalul tradițional deschis cu unul întunecat. Vă face paginile mai ușoare pentru ochi, mai ales în condiții de lumină scăzută. Modul întunecat a devenit o caracteristică standard pe multe site-uri web și aplicații datorită naturii sale ușor de utilizat.
Configurarea proiectului
Înainte de a implementa acest lucru, asigurați-vă că aveți un proiect configurat și gata de lucru. Ar trebui să aveți fișierele HTML, CSS și JavaScript organizate într-o manieră structurată.
Codul HTML
Începeți cu următorul marcaj pentru conținutul paginii dvs. Un vizitator va putea folosi comutator__temă element pentru a comuta între modul întunecat și cel luminos.
<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>
Codul CSS
Adăugați următorul CSS pentru a stila exemplul. Acesta va acționa ca modul de lumină implicit pe care îl veți spori ulterior cu noi stiluri pentru o vizualizare în modul întunecat.
@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);
}
În acest moment, interfața dvs. ar trebui să arate astfel:
Implementarea modului întunecat folosind CSS și JavaScript
Pentru a implementa modul întunecat, îi vei defini aspectul folosind CSS. Veți folosi apoi JavaScript pentru a gestiona comutarea între modul întunecat și cel luminos.
Crearea claselor tematice
Utilizați o clasă pentru fiecare temă, astfel încât să puteți comuta cu ușurință între cele două moduri. Pentru un proiect mai complet, ar trebui să vă gândiți cum modul întunecat poate afecta fiecare aspect al designului dvs.
.dark {
background: #1f1f1f;
color: #fff;
}
.light {
background: #fff;
color: #333;
}
Selectarea elementelor interactive
Adăugați următorul JavaScript la dvs script.js fişier. Primul bit de cod selectează pur și simplu elementele pe care le veți folosi pentru a gestiona comutatorul.
// Get a reference to the theme switcher element and the document body
const themeToggle = document.getElementById("theme__switcher");
const bodyEl = document.body;
Adăugarea funcției de comutare
Apoi, utilizați următorul JavaScript pentru a comuta între modul de lumină (ușoară) și modul întunecat (întuneric) clase. Rețineți că este, de asemenea, o idee bună să modificați comutatorul de comutare pentru a indica modul curent. Acest cod face asta cu un filtru CSS.
// 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);
Acest lucru face ca pagina să schimbe teme cu un clic pe containerul de comutare.
Îmbunătățirea modului întunecat cu JavaScript
Luați în considerare următoarele două îmbunătățiri care vă pot face site-urile în modul întunecat mai plăcut de utilizat pentru vizitatori.
Detectarea preferințelor utilizatorului
Aceasta implică verificarea temei de sistem a utilizatorului înainte ca site-ul să se încarce și ajustarea site-ului pentru a se potrivi. Iată cum o puteți face folosind matchMedia funcţie:
// 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();
Acum, orice utilizator care vă vizitează site-ul va vedea un design care se potrivește cu tema curentă a dispozitivului său.
Preferința utilizatorului persistentă cu stocare locală
Pentru a îmbunătăți și mai mult experiența utilizatorului, utilizați stocarea locală pentru a reține modul ales de utilizator în sesiuni. Acest lucru asigură că nu trebuie să selecteze în mod repetat modul preferat.
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");
}
Îmbrățișarea designului centrat pe utilizator
Modul întunecat depășește aspectul; este vorba de a pune pe primul loc confortul și preferințele utilizatorului. Urmând această abordare, puteți crea interfețe ușor de utilizat și puteți încuraja vizitele repetate. Pe măsură ce codificați și proiectați, acordați prioritate bunăstării utilizatorilor și oferiți o experiență digitală mai bună pentru cititorii dvs.
