Реализация dark mode в веб-приложении через CSS-переменные

12 марта 2024

В последние годы темная тема оформления (dark mode) приобрела огромную популярность среди пользователей веб-приложений и мобильных интерфейсов. Она позволяет снизить нагрузку на глаза в условиях низкой освещённости, экономит энергию на устройствах с OLED-дисплеями и придаёт современный эстетичный вид интерфейсу. Для разработчиков же реализация темной темы является значимым шагом к улучшению пользовательского опыта и адаптивности продукта.

Одним из наиболее удобных и гибких способов внедрения dark mode является использование CSS-переменных (кастомных свойств). Благодаря им можно централизованно управлять цветовой схемой и легко переключать стили, минимизируя дублирование кода и упрощая поддержку. В этой статье подробно рассмотрим, как реализовать тёмную тему в веб-приложении с использованием CSS-переменных, какие у этого подхода есть преимущества и особенности.

Основные принципы работы CSS-переменных

CSS-переменные, или кастомные свойства, — это динамические значения, которые можно объявлять в CSS и использовать многократно по всему стилевому файлу. Они начинаются с двойного дефиса и создаются внутри селекторов, например, в :root, что даёт глобальную область видимости.

Пример объявления CSS-переменной:

:root {
  --primary-color: #3498db;
  --background-color: #ffffff;
}

Использование переменной указывается через функцию var():

body {
  background-color: var(--background-color);
  color: var(--primary-color);
}

Основное преимущество таких переменных — возможность менять их значения динамически, не переписывая весь CSS. Это становится ключевым при реализации смены тем.

Почему CSS-переменные подходят для реализации dark mode

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

Важным преимуществом является то, что выключение и включение тёмной темы можно реализовать посредством добавления или удаления класса, либо изменения атрибутов на корневом элементе, что минимизирует влияние на остальную структуру.

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

Пример базовой структуры CSS переменных для светлой и тёмной темы

/* Светлая тема: базовые значения */
:root {
  --background-color: #ffffff;
  --text-color: #222222;
  --link-color: #1a73e8;
}

/* Тёмная тема: переопределение */
.dark-mode {
  --background-color: #121212;
  --text-color: #e0e0e0;
  --link-color: #8ab4f8;
}

Таким образом, стили, использующие var(--background-color) и другие переменные, меняют свое оформление автоматически при добавлении класса .dark-mode к корню документа.

Шаги по внедрению темной темы через CSS-переменные

1. Определите основные переменные

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

:root {
  --bg: #f9f9f9;
  --text-main: #222222;
  --text-secondary: #555555;
  --accent: #007bff;
  --border: #dddddd;
}

2. Создайте альтернативные значения для тёмной темы

В отдельном CSS-блоке (например, для класса .dark-mode) пропишите другие значения переменных с учетом особенностей темного фона и контрастности.

.dark-mode {
  --bg: #121212;
  --text-main: #e0e0e0;
  --text-secondary: #bbbbbb;
  --accent: #599eff;
  --border: #333333;
}

Это позволит легко переключать тему, меняя лишь один класс в DOM.

3. Используйте переменные в стилях элементов

На протяжении всего CSS замените фиксированные цветовые значения на var(--имя-переменной). Пример:

body {
  background-color: var(--bg);
  color: var(--text-main);
}

a {
  color: var(--accent);
}

hr {
  border-color: var(--border);
}

Так вы обеспечите автоматическое применение стиля нужной темы.

4. Реализуйте переключение темы с помощью JavaScript

Для динамического переключения тем можно добавить кнопке обработчик, который будет переключать класс dark-mode у document.documentElement — корневого элемента <html>. Например:

const toggleBtn = document.querySelector('#theme-toggle');

toggleBtn.addEventListener('click', () => {
  document.documentElement.classList.toggle('dark-mode');
});

Это простой и эффективный способ, который не требует изменения множества стилей вручную.

Расширенные техники и советы

Связывание с системными настройками пользователя

Современные браузеры поддерживают медиа-функцию prefers-color-scheme, которая позволяет определить, предпочитает ли пользователь светлую или темную тему в системе. С помощью этого можно задать тему по умолчанию без вмешательства пользователя.

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --text-main: #e0e0e0;
    --text-secondary: #bbbbbb;
    --accent: #599eff;
    --border: #333333;
  }
}

Таким образом, при первом посещении сайт автоматически подстроится под предпочтения пользователя.

Плавный переход между темами

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

body {
  background-color: var(--bg);
  color: var(--text-main);
  transition: background-color 0.3s ease, color 0.3s ease;
}

В результате при смене темы изменения внешнего вида будут выглядеть более естественно и эстетично.

Обработка изображений и иконок

Иногда изображения и иконки плохо смотрятся на тёмном фоне. В таком случае стоит подготовить отдельные варианты для темной темы или использовать фильтры CSS (например, invert()), хотя это не всегда лучший вариант для качественного отображения.

Пример итоговой структуры CSS-файла

Селектор	Комментарий	Описание
:root	Объявление переменных для светлой темы	Базовые значения всех ключевых цветов
.dark-mode	Перезапись переменных для тёмной темы	Альтернативные значения для всех цветов
body, a, hr и др.	Использование переменных	Цвета через var() для автоматического изменения
@media (prefers-color-scheme: dark)	Поддержка системных настроек	Задание темы автоматически на основе ОС

Заключение

Реализация dark mode в веб-приложении через CSS-переменные — это современный, гибкий и удобный способ организовать смену цветовых схем. Он минимизирует дублирование кода, упрощает поддержку и позволяет использовать преимущества современных стандартов CSS. Благодаря динамическому определению цветов на уровне переменных, можно легко адаптировать интерфейс под разные темы и улучшить взаимодействие с пользователем.

Совместное использование CSS-переменных с медиа-функцией prefers-color-scheme и JavaScript для переключения тем делает внедрение тёмной темы максимально плавным и естественным. При грамотном подходе вы сможете повысить комфорт, снизить нагрузку на глаза пользователей и придать вашему приложению современный и приятный внешний вид.

Вот HTML-таблица с 10 LSI-запросами для статьи «Реализация dark mode в веб-приложении через CSS-переменные»:

«`html

CSS-переменные для темного режима	Как реализовать dark mode	Настройка темной темы с помощью CSS	Использование media queries для dark mode	Преимущества темного режима в веб-приложениях
Смена темы через CSS-переменные	Адаптивный дизайн с темным режимом	Техники реализации dark mode	Использование JavaScript для переключения темы	CSS подходы к темной теме

«`

Эта таблица организует запросы в виде ссылок, которые можно использовать для навигации по соответствующим темам.