Тёмная тема без мигания: переключатель, который запоминает выбор

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

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

• Тема по умолчанию совпадает с темой системы (светлой или тёмной) и работает даже при выключенном JavaScript.
• Кнопка переключает тему, а выбор запоминается в браузере.
• Сохранённый выбор применяется до первой отрисовки: при перезагрузке нет белой вспышки.

Почему страница мигает #

Шаг 1. Объявите, что сайт умеет обе темы #

<meta name="color-scheme" content="light dark">
<script>
(function () {
  var saved = null;
  try { saved = localStorage.getItem('theme'); } catch (e) {}
  if (saved === 'light' || saved === 'dark') {
    document.documentElement.dataset.theme = saved;
  }
})();
</script>

Шаг 2. Опишите цвета один раз #

:root {
  color-scheme: light dark;
  --bg: light-dark(#ffffff, #14161a);
  --text: light-dark(#1b1f24, #e6e8eb);
  --card: light-dark(#f3f5f8, #1e2228);
  --line: light-dark(#d8dee6, #2c333c);
  --accent: light-dark(#1a56db, #7aa7ff);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
body { background: var(--bg); color: var(--text); }

Шаг 3. Добавьте кнопку #

<button id="theme-toggle" type="button" aria-pressed="false"></button>

(function () {
  var root = document.documentElement;
  var button = document.getElementById('theme-toggle');
  var names = { dark: 'Тёмная', light: 'Светлая' };

  function current() {
    return root.dataset.theme ||
      (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
  }
  function show() {
    var now = current();
    button.textContent = names[now];
    button.setAttribute('aria-pressed', now === 'dark');
  }

  button.addEventListener('click', function () {
    var next = current() === 'dark' ? 'light' : 'dark';
    root.dataset.theme = next;
    try { localStorage.setItem('theme', next); } catch (e) {}
    show();
  });
  show();
})();

Проверьте сами #

Остальное тоже проверено: без JavaScript страница берёт тему системы, после нажатия кнопки и перезагрузки выбор остаётся, на 390, 768 и 1280 точек нет бокового скролла.
Повторить можно так:

1. Откройте страницу, нажмите кнопку и выберите тёмную тему.
2. Включите в инструментах разработчика замедление сети и перезагрузите страницу: фон остаётся тёмным с первого кадра.
3. Выключите JavaScript и очистите хранилище: страница снова следует теме системы.

Типичные ошибки #

• Скрипт в конце страницы. Вспышка возвращается: выбор известен слишком поздно.
• Нет color-scheme на :root. Функция light-dark() без него не знает, какое значение взять.
• Нет try вокруг localStorage. В приватном режиме у части браузеров страница ломается.
• Тема только в JavaScript. Без скрипта посетитель остаётся без тёмной темы даже при включённой в системе. В рецепте это решено через color-scheme.
• Не проверен контраст. Текст и фон должны давать не меньше 4,5 к 1, это правило доступности WCAG AA. Проверьте обе темы, а не одну.