Тъмният режим се превърна в популярно предпочитание, така че трябва да го поддържате на вашите сайтове и в уеб приложенията си.
През последните години тъмният режим придоби значителна популярност като опция за потребителски интерфейс. Той предлага по-тъмен фон, допълнен от по-светъл текст, което не само намалява напрежението на очите, но и запазва живота на батерията, особено на OLED екрани.
Открийте как можете да добавите опция за тъмен режим към вашите уебсайтове и уеб приложения, като използвате комбинация от CSS и JavaScript.
Разбиране на Тъмния режим
Тъмният режим е алтернативна цветова схема за вашия уебсайт, който заменя традиционния светъл фон с тъмен. Това прави вашите страници по-лесни за очите, особено при условия на слаба светлина. Тъмният режим се е превърнал в стандартна функция на много уебсайтове и приложения поради лесния си характер.
Настройване на вашия проект
Преди да приложите това, уверете се, че имате създаден проект и готов за работа. Трябва да имате вашите HTML, CSS и JavaScript файлове, организирани по структуриран начин.
HTML кодът
Започнете със следното маркиране за съдържанието на вашата страница. Посетител ще може да използва theme__switcher елемент за превключване между тъмен и светъл режим.
<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 кодът
Добавете следния CSS, за да стилизирате примера. Това ще действа като светлинен режим по подразбиране, който по-късно ще допълните с нови стилове за изглед в тъмен режим.
@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);
}
В момента вашият интерфейс трябва да изглежда така:
Внедряване на тъмен режим с помощта на CSS и JavaScript
За да приложите тъмен режим, ще дефинирате външния му вид с помощта на CSS. След това ще използвате JavaScript, за да управлявате превключването между тъмен и светъл режим.
Създаване на тематични класове
Използвайте един клас за всяка тема, за да можете лесно да превключвате между двата режима. За по-завършен проект трябва да помислите как Тъмният режим може да засегне всеки аспект от вашия дизайн.
.dark {
background: #1f1f1f;
color: #fff;
}
.light {
background: #fff;
color: #333;
}
Избор на интерактивни елементи
Добавете следния JavaScript към вашия script.js файл. Първият бит код просто избира елементите, които ще използвате, за да управлявате превключвателя.
// Get a reference to the theme switcher element and the document body
const themeToggle = document.getElementById("theme__switcher");
const bodyEl = document.body;
Добавяне на функционалност за превключване
След това използвайте следния JavaScript, за да превключвате между светъл режим (светлина) и тъмен режим (тъмно) класове. Имайте предвид, че също така е добра идея да промените превключвателя, за да указва текущия режим. Този код прави това с 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);
Това кара вашата страница да променя темите с едно щракване върху превключващия контейнер.
Подобряване на тъмен режим с JavaScript
Помислете за следните две подобрения, които могат да направят вашите сайтове в тъмен режим по-приятни за използване от вашите посетители.
Откриване на потребителски предпочитания
Това включва проверка на системната тема на потребителя, преди уебсайтът да се зареди, и коригиране на вашия сайт, за да съответства. Ето как можете да го направите с помощта на matchMedia функция:
// 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");
}
Възприемане на ориентиран към потребителя дизайн
Тъмният режим надхвърля външния вид; става въпрос за поставяне на удобството и предпочитанията на потребителя на първо място. Следвайки този подход, можете да създадете удобни за потребителя интерфейси и да насърчите повторните посещения. Докато кодирате и проектирате, дайте приоритет на благополучието на потребителите и осигурете по-добро цифрово изживяване за вашите читатели.
