Тёмная тема без вспышки
Тема задаётся классом на корневом элементе до рендера — иначе пользователь видит белый экран.
Светлый экран при выбранной тёмной теме — самая заметная ошибка при переключении оформления. Она возникает, когда тему применяют скриптом, который запускается после загрузки стилей.
Порядок загрузки
- Разметка документа.
- Небольшой встроенный скрипт в
<head>: читает сохранённый выбор, ставит класс на<html>. - Стили.
Первые два шага не требуют сетевых запросов, поэтому класс успевает примениться до первой отрисовки.
Источник правды — localStorage
Если пользователь выбрал тему вручную, системная настройка больше не участвует. Пока в
хранилище ничего нет, берётся prefers-color-scheme.
Один переключатель — одно состояние
Когда кнопка темы выводится в двух местах (например, в хедере и в мобильном меню), обе копии читают одно значение и обновляются по событию. Иначе кнопки разъезжаются.
Проверка: включите тёмную тему, перезагрузите страницу и убедитесь, что белой вспышки нет.
- доступность
- фронтенд
