Как сделать тёмную тему на сайте — за 3 шага и без библиотек

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

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

Шаг 1. Вынеси цвета в переменные

Проблема тёмной темы в том, что цвета раскиданы по всему коду. Сначала соберём их в одно место — в CSS-переменные. Объяви их в :root (это корень документа, доступный везде):

:root {
  --bg: #ffffff;      /* фон */
  --text: #141416;    /* текст */
}

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

Теперь весь сайт красится не хардкодом, а через var(--bg) и var(--text). Поменяешь переменную в одном месте — поменяется везде. Это и есть фундамент: тему мы будем переключать, меняя только эти значения.

Шаг 2. Добавь тёмный набор через медиазапрос

Вот та магия, которая знает выбор пользователя. Медиазапрос prefers-color-scheme: dark срабатывает, когда в системе включена тёмная тема. Внутри него просто переопредели те же переменные:

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

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

Шаг 3 (по желанию). Кнопка-переключатель

Автоподстройка — это 80% пользы. Если хочешь дать ручной тумблер, добавь ещё один набор цветов через атрибут data-theme и переключай его капелькой JS:

[data-theme="dark"] {
  --bg: #141416;
  --text: #f5f5f0;
}

// по клику вешаем/снимаем тёмную тему и запоминаем выбор
const btn = document.querySelector("#theme-toggle");
btn.addEventListener("click", () => {
  const isDark = document.documentElement.getAttribute("data-theme") === "dark";
  document.documentElement.setAttribute("data-theme", isDark ? "light" : "dark");
  localStorage.setItem("theme", isDark ? "light" : "dark");
});

localStorage — это память браузера: выбор сохранится, и при следующем заходе сайт откроется в той теме, что человек выбрал руками.

Что получится

Сайт, который сам открывается тёмным у тех, кто любит тёмное, — и со своим тумблером для остальных. Без библиотек, на чистом CSS плюс несколько строк JS.

Частая ошибка: «поменял, а не работает»

Обычно причина одна из двух. Либо цвета всё ещё зашиты хардкодом мимо переменных — тогда меняй их на var(...). Либо стили вообще не подхватываются — это отдельная беда, почему CSS не применяется, там свой чеклист. Тёмная тема живёт в DOM как обычные стили, так что правила отладки те же.

Нужна ли для тёмной темы библиотека?

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

А если у меня React или другой фреймворк?

Механика та же — переменные плюс prefers-color-scheme. Меняется только то, как вешается data-theme: через состояние компонента вместо ручного JS. Суть — переключать переменные, а не переписывать цвета — остаётся.