Светлая и тёмная тема без фреймворков

Для переключения темы небольшому сайту не нужен UI-фреймворк. Достаточно CSS-переменных, prefers-color-scheme и нескольких строк JavaScript, которые сохраняют явный выбор пользователя.

Идея: пока пользователь ничего не выбирал вручную, сайт следует системной теме. Явный выбор сохраняется и имеет приоритет над настройкой операционной системы.

Цветовые переменные

Вместо дублирования стилей компоненты используют общие design tokens. Меняются значения переменных — сами компоненты остаются прежними.

:root {
  --color-bg: #f4f6f8;
  --color-text: #20252b;
  --color-primary: #3d85c8;
}

[data-theme="dark"] {
  --color-bg: #242a30;
  --color-text: #eef2f5;
  --color-primary: #5b9fe8;
}

Системная тема

Если атрибут data-theme отсутствует, CSS может автоматически применить тёмную палитру через медиавыражение.

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #242a30;
    --color-text: #eef2f5;
  }
}

Ручной выбор

После явного выбора пользователя значение можно сохранить в localStorage. Режим «Системная» просто удаляет сохранённое значение.

function applyTheme(theme) {
  if (theme === 'system') {
    document.documentElement.removeAttribute('data-theme');
    localStorage.removeItem('theme');
    return;
  }

  document.documentElement.dataset.theme = theme;
  localStorage.setItem('theme', theme);
}

Что получаем

Режим	Поведение
Системная	Следует настройке ОС
Светлая	Всегда светлая
Тёмная	Всегда тёмная

Чем меньше JavaScript отвечает за внешний вид, тем проще поддерживать тему и тем меньше вероятность визуального мерцания при загрузке.