Народ, всем привет. Ни для кого не секрет, что в последние годы все большую популярность обретает темная тема. По причине более щадящего эффекта на глаза, экономии батареи, или просто потому, что смотрится «брутально», это не важно, тут мы оставим тему философам. Но то, что уже давно любой «нормальный» сайт или приложение должно иметь два варианта оформления, особенно если сайт прямо светлый или белый, это уже как мантра. И особенно если учитывать тот факт, что тёмную тему на сайт можно сделать довольно легко, как с использованием CSS, так и совместно с JavaScript.
Вариантов, на самом деле, как это сделать, довольно много. Но сегодня мы рассмотрим самый простой и «прямолинейный», а вы уже если захотите, там сами докрутите, что вам нужно. Добавите красивую кнопочку, переключатель, можно заморочиться, и сделать затемнение от времени суток. Ну и конечно не забудем про определение общей темы вашего браузера. Ну что, погнали?
Использование CSS-переменных
Для начала, один из самых простых способов реализовать тёмную тему, это использовать CSS-переменные. Например, прописываем в css файле:
:root {
--bg-color: white;
--text-color: black;
}
.dark-mode {
--bg-color: #121212;
--text-color: white;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
Не буду тут дословно расписывать, тут все легко. Здесь мы задаём переменные для светлой темы и переопределяем их в классе dark-mode. Простыми словами, по умолчанию цвет основной страницы (body) у нас белый и текст черный. При переключении класса главной станицы цвет инвестируется. Осталось только добавить кнопочку, которая бы меняла этот класс.
Переключение темы с помощью JavaScript
Для смены темы, как я уже сказал, нужно добавить кнопку, или переключатель, или какую угодно плашечку. Ну и само собой прописать скрипт, который будет переключать наш класс dark-mode у body. Первое, что мы делаем, это добавляем кнопку в главный HTML документ.
<button id="theme-toggle">Сменить тему</button>
Далее, уже в файле javascript (ну или в том же HTML) прописываем основной скрипт. Для начала создаем две переменные, toggleButton, которой присваиваем наш элемент страницы с Id = theme-toggle (наша кнопка). А вторая переменная – это сама наша страница.
const toggleButton = document.getElementById("theme-toggle");
const body = document.body;
Далее, прописываем функцию «прослушивания» события нажатия кнопки, после чего функция изменит класс body на нужный нам. Тут можно добавить переключатель и сделать смену темы при повторном нажатии или же просто вторую кнопку сделать со светлой темой. Но это уже для вашей собственной доработки.
toggleButton.addEventListener("click", () => {
body.classList.toggle("dark-mode");
localStorage.setItem("theme", body.classList.contains("dark-mode") ? "dark" : "light");
});
Кстати, Вам может быть это интересно:
Как вы увидели выше, мы записали некое значение в localStorage, локальное хранилище, и все для того, чтобы сохранить значение темы при перезагрузке страницы. А то каждый раз обновив сайт у вас вновь будет включаться светлая тема. Ну и в конце прописываем цикл определения, что у нас там в этом самом localStorage лежит.
If (localStorage.getItem("theme") === "dark") {
body.classList.add("dark-mode");
}
Автоматическое определение темы системы
Ну и в конце немного усложним и сделаем так, чтобы ваш сайт мог сам определить системную тему пользователя. И сделаем это с помощью prefers-color-scheme. Для начала прописываем в файле css новые значения, если тема вашей системы уже темная.
Свойство prefers-color-scheme — это медиавыражение, которое определяет выбранную в предпочтениях пользователя настройку темы в операционной системе.
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #121212;
--text-color: white;
}
}
Чтобы JavaScript учитывал системные настройки, надо также обратиться к prefers-color-scheme у главного окна. Интерфейс в глобальной области видимости window.matchMedia позволяет получить доступ к медиавыражениям из JavaScript.
if (!localStorage.getItem("theme")) {
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
document.body.classList.add("dark-mode");
}
}
Теперь ваш сайт поддерживает тёмную тему с сохранением выбора пользователя и автоматическим определением системных настроек. Этот подход делает интерфейс уже более удобным и современным, а уж докрутить на основе выше представленных примеров вы сможете и сами.
Хотите знать больше? Читайте нас в нашем Telegram – там еще больше интересного: новинки гаджетов, технологии, AI, фишки программистов, примеры дизайна и маркетинга.