Темна тема без блимання: перемикач, який запам'ятовує вибір

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

Що вийде #

• Тема за замовчуванням збігається з темою системи (світлою чи темною) і працює навіть за вимкненого 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. Перевірте обидві теми, а не одну.