Идеальная темная тема с помощью CSS-переменных

Темная тема как искусство: почему ваши переменные — это не просто цвета

Представь: два часа ночи, ты открываешь любимый сервис, и… БАМ! Тебя ослепляет белый экран, словно сварка соседа в субботу утром. Плохая темная тема — это не просто эстетический провал, это реальная боль для глаз пользователя. Мы, разработчики, часто думаем, что достаточно инвертировать цвета, и дело в шляпе. Но на деле «настоящий» даркмод — это про контрастность, семантику и архитектуру кода, которая не развалится при первом же редизайне.

Сегодня мы разберем, как перестать копипастить #333 и собрать систему, которая будет переключаться так же плавно, как твои мысли после третьей чашки эспрессо.

Как мы страдали раньше

Помнишь те времена, когда темная тема реализовывалась через гигантские простыни стилей? Мы создавали отдельный класс .dark-mode и начинали переопределять каждый элемент вручную. Это превращалось в ад поддержки. Если ты менял отступ у кнопки в светлой теме, тебе нужно было не забыть обновить его и в темной, иначе верстка «плыла».

Другой «костыль» — это использование препроцессоров типа Sass. Мы создавали миксины, которые генерировали дублирующий код. В итоге CSS-бандл раздувался в два раза, а браузер тратил лишние ресурсы на отрисовку. К тому же, переключение темы без перезагрузки страницы требовало костылей в JS, а системные настройки пользователя (prefers-color-scheme) вообще игнорировались. Чтобы не наступать на те же грабли в архитектуре, советую глянуть статью про нативный CSS Nesting, там много про то, как структурировать код без боли.

Как делать правильно в 2026 году

Современный подход строится на семантических переменных. Главное правило: переменная должна описывать роль цвета, а не его название. Вместо --white пишем --bg-primary. Вместо --dark-blue пишем --text-main.

В 2026 году мы используем силу чистых CSS-переменных и комбинируем их с современными функциями. Например, можно использовать новую функцию light-dark(), о которой подробно написано в материале про создание темного и светлого режима. Но если нам нужна гибкость (например, переключатель в интерфейсе), старые добрые Custom Properties — наш лучший друг.

Используй HSL-цвета. Это позволяет менять яркость или насыщенность одной переменной, не переписывая весь HEX-код. Это киллер-фича для создания состояний кнопок (hover/active).

Готовый сниппет кода

Ниже — эталонная структура для реализации темной темы. Мы определяем базовую палитру и семантические слои, которые адаптируются под выбранный режим.

:root {
  /* Системные цвета (палитра) */
  --slate-50: 210 40% 98%;
  --slate-900: 222 47% 11%;
  --blue-500: 217 91% 60%;

  /* Семантические переменные для светлой темы */
  --bg-app: var(--slate-50);
  --text-main: var(--slate-900);
  --accent: var(--blue-500);
  --card-bg: 0 0% 100%;
  
  color-scheme: light dark;
}

/* Автоматическое переключение по системным настройкам */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-app: var(--slate-900);
    --text-main: var(--slate-50);
    --card-bg: 217 33% 17%;
  }
}

/* Переключение через класс (для мануального выбора пользователем) */
[data-theme="dark"] {
  --bg-app: var(--slate-900);
  --text-main: var(--slate-50);
  --card-bg: 217 33% 17%;
}

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

.card {
  background-color: hsl(var(--card-bg));
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

Частая ошибка новичков

Самый популярный фейл — это забывать про контрастность и насыщенность. Новички часто берут чистый черный (#000) и чистый белый (#fff). На OLED-экранах это выглядит ужасно: текст кажется слишком ярким, а глаза устают за 5 минут.

Никогда не используй 100% черный для фона. Используй очень глубокий серый или темно-синий. И еще: при переходе в темную тему насыщенные цвета (например, ярко-красный или ярко-зеленый) начинают «вибрировать» на темном фоне. Правильный подход — слегка снижать насыщенность (saturation) акцентных цветов для темной темы, чтобы они выглядели мягче.

И не забудь про изображения! Контентные фото в темной теме часто выглядят как прожекторы. Добавь легкий фильтр opacity(0.8) или brightness(0.9) для картинок в темном режиме, и твои пользователи скажут тебе «спасибо».

🔥 Больше фишек, готовых сниппетов и передовых подходов к CSS мы публикуем в нашем Telegram-канале. Подписывайтесь, чтобы не пропустить!