Custom properties и темизация: светлая/тёмная тема через CSS-переменные

Почему CSS-переменные — это мощно?

Представьте, что у вас есть сайт с сотнями цветовых значений, разбросанных по всему CSS. Вдруг клиент просит сменить основной синий на тёмно-фиолетовый. Без переменных — это адский Ctrl+F и риск пропустить где-то #3366ff. С CSS Custom Properties (переменные) всё меняется!

💡 Ключевые преимущества:
- Гибкость: Изменил значение в одном месте — обновилось везде.
- Читаемость: Имена вроде --primary-color понятнее, чем #3366ff.
- Динамика: Меняйте переменные на лету через JS или медиазапросы (hello, тёмная тема!).

Как объявлять и использовать переменные?

CSS-переменные создаются внутри селектора с двойным дефисом (--):

:root {
  --primary-color: #3498db;
  --max-width: 1200px;
}

:root — глобальная область видимости (как <html>).
Использование:

.button {
  background-color: var(--primary-color);
  max-width: var(--max-width);
}

⚠️ Важно: Если переменная не найдена, можно указать fallback-значение:

.element {
  color: var(--undefined-var, #ff0000); /* Красный, если переменной нет */
}

Темизация: светлая vs. тёмная тема

1. Базовый подход: медиазапрос `prefers-color-scheme`

Автоматическое переключение темы на основе системных настроек пользователя:

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

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1a1a1a;
    --text-color: #f0f0f0;
  }
}

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

2. Интерактивное переключение: добавляем кнопку

Добавим класс .dark-theme к <body> при клике:

:root {
  --bg-light: #ffffff;
  --text-light: #333333;
  --bg-dark: #1a1a1a;
  --text-dark: #f0f0f0;
}

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

body.dark-theme {
  --bg-light: var(--bg-dark);
  --text-light: var(--text-dark);
}

JavaScript для переключения:

document.querySelector('.theme-toggle').addEventListener('click', () => {
  document.body.classList.toggle('dark-theme');
});

Продвинутые техники

Цепи переменных

Используйте одни переменные для вычисления других:

:root {
  --base-spacing: 8px;
  --spacing-sm: calc(var(--base-spacing) * 1);
  --spacing-md: calc(var(--base-spacing) * 2);
}

Переменные в анимациях

Динамическое управление анимацией:

:root {
  --rotate-deg: 45deg;
}

.spinner {
  animation: spin 2s infinite linear;
  transform: rotate(var(--rotate-deg));
}

Советы от Данилы Бежина

«CSS-переменные — это как Lego. Сначала вы строите базовые блоки (:root), а потом комбинируете их в сложные структуры. Не бойтесь экспериментировать!»

🎥 Для визуалов: Разбор тем на практике (когда нужно "увидеть" код в действии).

Итоги

CSS Custom Properties — это мощный инструмент для темизации и поддержания порядка в стилях.
Используйте :root для глобальных переменных и медиазапросы для адаптивных тем.
Комбинируйте переменные с JS для интерактивности.