Темный режим стал популярным, поэтому вам следует позаботиться о его поддержке на своих сайтах и ​​в своих веб-приложениях.

В последние годы темный режим приобрел значительную популярность как опция пользовательского интерфейса. Он предлагает более темный фон, дополненный более светлым текстом, что не только снижает нагрузку на глаза, но и продлевает срок службы батареи, особенно на экранах OLED.

Узнайте, как добавить опцию темного режима на свои веб-сайты и веб-приложения, используя комбинацию CSS и JavaScript.

Понимание темного режима

Темный режим — альтернативная цветовая схема. для вашего веб-сайта, который заменяет традиционный светлый фон на темный. Это облегчает просмотр страниц, особенно в условиях низкой освещенности. Темный режим стал стандартной функцией на многих веб-сайтах и ​​приложениях благодаря своему удобству для пользователя.

Настройка вашего проекта

Прежде чем реализовать это, убедитесь, что у вас есть проект, настроенный и готовый к работе. Ваши файлы HTML, CSS и JavaScript должны быть структурированы.

instagram viewer

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 в свой скрипт.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 theme
functionsetTheme(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

Рассмотрите следующие два улучшения, которые могут сделать ваши сайты в темном режиме более приятными для посетителей.

Определение предпочтений пользователя

Это включает в себя проверку системной темы пользователя перед загрузкой веб-сайта и настройку вашего сайта в соответствии с ней. Вот как это можно сделать с помощью матчМедиа функция:

// Function to detect user's preferred theme
functiondetectPreferredTheme() {
// 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");
}

Использование ориентированного на пользователя дизайна

Темный режим выходит за рамки внешнего вида; речь идет о том, чтобы поставить на первое место комфорт и предпочтения пользователя. Следуя этому подходу, вы сможете создать удобные интерфейсы и стимулировать повторные посещения. При разработке кода и дизайна уделяйте приоритетное внимание благополучию пользователей и обеспечивайте своим читателям лучший цифровой опыт.