A Sötét mód népszerű preferenciává vált, ezért érdemes támogatnia webhelyein és internetes alkalmazásaiban.
Az elmúlt években a sötét mód jelentős népszerűségre tett szert felhasználói felületként. Sötétebb hátteret kínál világosabb szöveggel kiegészítve, ami nemcsak a szem megerőltetését csökkenti, hanem az akkumulátor élettartamát is kíméli, különösen az OLED képernyőkön.
Fedezze fel, hogyan adhat hozzá sötét módot a webhelyekhez és webalkalmazásokhoz a CSS és a JavaScript kombinációjával.
A sötét mód megértése
A sötét mód egy alternatív színséma webhelyéhez, amely a hagyományos világos hátteret sötétre cseréli. Könnyebbé teszi az oldalakat a szem számára, különösen gyenge fényviszonyok mellett. A Sötét mód számos webhelyen és alkalmazásban alapfunkcióvá vált felhasználóbarát jellege miatt.
A projekt beállítása
Mielőtt ezt végrehajtaná, győződjön meg arról, hogy egy projektet beállított, és készen áll a munkára. A HTML-, CSS- és JavaScript-fájljait strukturált módon kell rendeznie.
A HTML kód
Kezdje az oldal tartalmának következő jelölésével. A látogató használhatja a theme__switcher elemet a sötét és világos mód közötti váltáshoz.
<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>
A CSS kód
Adja hozzá a következő CSS-t a példa stílusához. Ez lesz az alapértelmezett világos mód, amelyet később új stílusokkal egészít ki a sötét módú nézethez.
@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);
}
Jelenleg a kezelőfelületnek így kell kinéznie:
Sötét mód megvalósítása CSS és JavaScript használatával
A sötét mód megvalósításához CSS segítségével határozza meg a megjelenését. Ezután JavaScript segítségével kezelheti a sötét és világos mód közötti váltást.
A témaosztályok létrehozása
Minden témához használjon egy osztályt, így könnyen válthat a két mód között. Egy teljesebb projekthez meg kell fontolnia, hogyan A sötét mód a tervezés minden aspektusára hatással lehet.
.dark {
background: #1f1f1f;
color: #fff;
}
.light {
background: #fff;
color: #333;
}
Az interaktív elemek kiválasztása
Adja hozzá a következő JavaScriptet a sajátjához script.js fájlt. A kód első bitje egyszerűen kiválasztja azokat az elemeket, amelyeket a váltáshoz használni fog.
// Get a reference to the theme switcher element and the document body
const themeToggle = document.getElementById("theme__switcher");
const bodyEl = document.body;
A Váltó funkció hozzáadása
Ezután használja a következő JavaScriptet a világos módok közötti váltáshoz (fény) és sötét mód (sötét) osztályok. Vegye figyelembe, hogy a váltókapcsolót is érdemes megváltoztatni, hogy jelezze az aktuális módot. Ez a kód ezt teszi egy CSS szűrő.
// 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);
Ez arra készteti az oldal témáit, hogy a kapcsoló tárolójára kattintással váltson.
A sötét mód javítása JavaScript segítségével
Fontolja meg a következő két fejlesztést, amelyek kellemesebbé tehetik a sötét módú webhelyek használatát a látogatók számára.
Felhasználói beállítások észlelése
Ez magában foglalja a felhasználó rendszertémájának ellenőrzését a webhely betöltése előtt, és a webhely igazítását. Íme, hogyan teheti meg a matchMedia funkció:
// 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();
Mostantól minden felhasználó, aki felkeresi a webhelyét, olyan dizájnt fog látni, amely illeszkedik eszköze aktuális témájához.
Folyamatos felhasználói preferencia helyi tárhellyel
A felhasználói élmény további javítása érdekében helyi tárhely használata hogy emlékezzen a felhasználó által választott módra a munkamenetek során. Ez biztosítja, hogy ne kelljen ismételten kiválasztani a kívánt módot.
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");
}
Felhasználó-központú tervezés
A sötét mód túlmutat a megjelenésen; ez a felhasználói kényelem és preferenciák előtérbe helyezése. Ezt a megközelítést követve felhasználóbarát felületeket hozhat létre, és ösztönözheti az ismételt látogatásokat. A kódolás és a tervezés során helyezze előtérbe a felhasználói jólétet, és biztosítson jobb digitális élményt olvasóinak.
