Тамни режим је постао популаран избор, тако да би требало да га подржите на својим веб локацијама и у својим веб апликацијама.
Последњих година тамни режим је стекао значајну популарност као опција корисничког интерфејса. Нуди тамнију позадину употпуњену светлијим текстом, који не само да смањује напрезање очију већ и штеди век батерије, посебно на ОЛЕД екранима.
Откријте како можете да додате опцију тамног режима на своје веб локације и веб апликације, користећи комбинацију ЦСС-а и ЈаваСцрипт-а.
Разумевање тамног режима
Тамни режим је алтернативна шема боја за вашу веб локацију која мења традиционалну светлу позадину тамном. То чини ваше странице лакшим за очи, посебно у условима слабог осветљења. Тамни режим је постао стандардна функција на многим веб локацијама и апликацијама због своје природе прилагођене кориснику.
Постављање вашег пројекта
Пре него што ово примените, уверите се да имате пројекат постављен и спреман за рад. Требало би да имате ХТМЛ, ЦСС и ЈаваСцрипт датотеке организоване на структуиран начин.
ХТМЛ код
Почните са следећим ознакама за садржај ваше странице. Посетилац ће моћи да користи тхеме__свитцхер елемент за пребацивање између тамног и светлог режима.
<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>
ЦСС код
Додајте следећи ЦСС да бисте стилизовали пример. Ово ће деловати као подразумевани светлосни режим који ћете касније допунити новим стиловима за приказ тамног режима.
@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);
}
У овом тренутку, ваш интерфејс би требало да изгледа овако:
Имплементација тамног режима помоћу ЦСС-а и ЈаваСцрипт-а
Да бисте имплементирали тамни режим, дефинисаћете његов изглед помоћу ЦСС-а. Затим ћете користити ЈаваСцрипт за руковање пребацивањем између тамног и светлог режима.
Креирање тематских часова
Користите једну класу за сваку тему тако да можете лако да прелазите између два режима. За потпунији пројекат, требало би да размислите како тамни режим може утицати на сваки аспект вашег дизајна.
.dark {
background: #1f1f1f;
color: #fff;
}
.light {
background: #fff;
color: #333;
}
Избор интерактивних елемената
Додајте следећи ЈаваСцрипт у свој сцрипт.јс фајл. Први део кода једноставно бира елементе које ћете користити за руковање прекидачем.
// Get a reference to the theme switcher element and the document body
const themeToggle = document.getElementById("theme__switcher");
const bodyEl = document.body;
Додавање преклопне функционалности
Затим користите следећи ЈаваСцрипт за пребацивање између светлосног режима (светлости) и тамни режим (мрачно) класе. Имајте на уму да је такође добра идеја да промените прекидач да би означио тренутни режим. Овај код то чини са ЦСС филтер.
// 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);
Ово чини да ваша страница мења теме једним кликом на преклопни контејнер.
Побољшање тамног режима помоћу ЈаваСцрипт-а
Размотрите следећа два побољшања која вашим посетиоцима могу учинити ваше веб локације у мрачном режиму пријатнијим за коришћење.
Откривање корисничких подешавања
Ово укључује проверу теме система корисника пре него што се веб локација учита и прилагођавање ваше веб локације тако да одговара. Ево како то можете да урадите користећи матцхМедиа функција:
// 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();
Сада ће сваки корисник који посети вашу веб локацију видети дизајн који одговара тренутној теми њиховог уређаја.
Трајна корисничка подешавања са локалном меморијом
Да бисте додатно побољшали корисничко искуство, користите локално складиште да запамтите режим који је корисник изабрао током свих сесија. Ово осигурава да не морају више пута да бирају свој жељени режим.
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");
}
Прихватање дизајна усмереног на корисника
Тамни режим превазилази изглед; ради се о стављању удобности и преференција корисника на прво место. Пратећи овај приступ, можете креирати интерфејсе прилагођене кориснику и подстаћи поновне посете. Док кодирате и дизајнирате, дајте приоритет добробити корисника и пружите боље дигитално искуство својим читаоцима.
