Урок 31 · JavaScript

Выбор темы остаётся после обновления

Тёмная тема уже умеет жить в CSS. Кнопка должна только переключить атрибут и запомнить выбор.

Почему это следующий шаг

Копирование текста работает локально. Тема — такое же локальное предпочтение.

Как сделать

Храни в localStorage значение light или dark. При загрузке, до отрисовки по возможности, поставь documentElement.dataset.theme. Кнопка меняет значение на противоположное и записывает его. В CSS раскрась страницу через [data-theme="dark"]. Не храни всю таблицу стилей в хранилище, только одно слово.

const next = root.dataset.theme === "dark" ? "light" : "dark";
root.dataset.theme = next;
localStorage.setItem("theme", next);

Что проверить

• Кнопка меняет тему без перезагрузки.
• После F5 тема та же.
• В хранилище лежит одно слово, не кусок CSS.