CSS переменные: как сделать динамическую тему на сайте

Введение: зачем нужны CSS переменные

Когда говорят про CSS переменные, чаще всего имеют в виду возможность вынести цвета, размеры или другие значения в одно место и потом использовать их по всему проекту. Это удобно: вместо десятков повторяющихся #333 или 16px мы оперируем понятными именами вроде --color-text или --font-size-base.

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

Основы работы с CSS custom properties (CSS переменные)

Синтаксис у переменных простой:

:root {
  --color-bg: #ffffff;
  --color-text: #000000;
}

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

• переменные объявляются через --имя;
• используются функцией var();
• объявленные в :root доступны везде.

Эти свойства официально называются CSS custom properties, но в работе привычнее использовать термин «CSS переменные».

Как сделать тёмную тему на сайте с помощью CSS

Обычно мы начинаем с базовой палитры для светлой версии:

:root {
  --color-bg: #ffffff;
  --color-text: #000000;
}

Затем описываем css тёмная тема как альтернативный набор значений:

.dark-theme {
  --color-bg: #000000;
  --color-text: #ffffff;
}

Всё, что остаётся — переключать класс .dark-theme на корневом элементе (html или body). Так у нас получается простая CSS тема, где цвета подставляются динамически.

Переключение тем на сайте через JavaScript

Самый удобный способ — добавить кнопку и при клике переключать класс:

const toggle = document.getElementById('theme-toggle');
toggle.addEventListener('click', () => {
  document.documentElement.classList.toggle('dark-theme');
});

Чтобы не терять выбор при перезагрузке, можно сохранить результат в localStorage:

if (localStorage.getItem('theme') === 'dark') {
  document.documentElement.classList.add('dark-theme');
}

toggle.addEventListener('click', () => {
  document.documentElement.classList.toggle('dark-theme');
  const theme = document.documentElement.classList.contains('dark-theme') ? 'dark' : 'light';
  localStorage.setItem('theme', theme);
});

Такой подход реализует простое переключение тем на сайте.

Автоматическая css тёмная тема с помощью prefers-color-scheme

CSS поддерживает медиавыражение prefers-color-scheme. Если у пользователя в системе включена тёмная тема, сайт сразу подстроится:

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #000000;
    --color-text: #ffffff;
  }
}

Здесь важно предусмотреть приоритет: системные настройки или выбор самого пользователя. Чаще всего лучше уважать явный выбор.

Расширенные возможности CSS переменных для темизации

• Больше двух тем: можно добавить «теплую», «синюю» или корпоративную палитру.
• Изменение темы на лету: пользователь выбирает основные цвета сайта, и они сразу применяется.
• Анимации: с transition темы переключаются плавно, без резких скачков.

Лучшие практики при работе с CSS темами

• Используй префиксы для переменных. Это помогает избежать путаницы, когда проект становится большим. Например, вместо универсального --primary лучше завести --color-primary. Тогда сразу видно, что это именно цвет, а не размер или отступ.

  Пример плохого нейминга:

  :root {
    --primary: #3498db;
    --secondary: #2ecc71;
    --small: 12px;
    --medium: 16px;
  }
  

  Пример хорошего нейминга:

  :root {
    --color-primary: #3498db;
    --color-secondary: #2ecc71;
    --font-size-small: 12px;
    --font-size-base: 16px;
  }
  

  Такая структура особенно полезна, если в проекте несколько тем: ты быстрее находишь нужные переменные и уменьшаешь риск конфликтов имён. Хорошо продуманная система названий ещё и облегчает командную работу — другому разработчику будет проще разобраться в коде.
• Не дублируй значения. Пусть все ключевые цвета и размеры заданы только в переменных.
• Проверь поддержку браузеров. Современные браузеры давно поддерживают CSS переменные, но если проект рассчитан на старые версии (например, IE11), лучше предусмотреть запасные стили.

Примеры: светлая и тёмная тема на сайте

Самый популярный сценарий — светлая и тёмная тема на сайте. Другой вариант — кастомизация палитры: например, выбор акцентного цвета пользователем. В приложениях удобно иметь несколько тем: дневная, ночная, высококонтрастная.

Заключение: почему CSS тема на переменных — лучший выбор

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

Чек-лист для внедрения:

1. вынести ключевые цвета и размеры в переменные;
2. определить альтернативные темы;
3. добавить переключение (кнопка или автоопределение по системе);
4. расширить функциональность — кастомные палитры, анимации, сохранение выбора.

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