Переключение тем

Раз тема задаётся атрибутом data-theme, переключить её — значит поменять этот атрибут у <html>. Это можно сделать парой строк JavaScript или вовсе без него — классом theme-controller.

Переключение из JavaScript

Атрибут data-* доступен в JavaScript через свойство dataset. Кнопки ниже записывают название темы в document.documentElement.dataset.theme:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="rounded-box bg-base-100 p-4 text-base-content">
  <p class="mb-3">Личный кабинет LearnUp</p>
  <button class="btn btn-sm" data-set-theme="light">Светлая</button>
  <button class="btn btn-sm" data-set-theme="dark">Тёмная</button>
</div>
 
<script>
  document.querySelectorAll('[data-set-theme]').forEach((button) => {
    button.addEventListener('click', () => {
      document.documentElement.dataset.theme = button.dataset.setTheme;
    });
  });
</script>

Нажмите «Тёмная» — блок станет тёмным со светлым текстом, «Светлая» вернёт прежний вид. Блок перекрашивается, потому что его классы bg-base-100 и text-base-content берут цвета из текущей темы.

Запоминание выбора

Чтобы тема сохранялась после перезагрузки, выбор записывают в localStorage и восстанавливают при открытии страницы. В проекте на Vite создайте файл src/theme.js:

// src/theme.js
const saved = localStorage.getItem('theme');
if (saved) {
  document.documentElement.dataset.theme = saved;
}
 
document.querySelectorAll('[data-set-theme]').forEach((button) => {
  button.addEventListener('click', () => {
    const theme = button.dataset.setTheme;
    document.documentElement.dataset.theme = theme;
    localStorage.setItem('theme', theme);
  });
});

Подключите его в src/main.js строкой import './theme.js';. Теперь выбранная тема остаётся после обновления страницы.

Без JavaScript: theme-controller

daisyUI умеет переключать тему чистым CSS. Флажку или переключателю добавляют класс theme-controller, а в атрибут value пишут название темы. Пока он отмечен, на странице действует эта тема:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="rounded-box bg-base-100 p-4 text-base-content">
  <label class="flex cursor-pointer items-center gap-2">
    Светлая
    <input type="checkbox" value="dark" class="toggle theme-controller">
    Тёмная
  </label>
</div>

Щёлкните переключатель — блок станет тёмным. toggle — компонент-переключатель, о нём урок в главе о формах. Если тем несколько, используют радиокнопки с общим name, каждая со своим value.

Частая ошибка

Восстанавливать тему только в src/theme.js. Vite подключает скрипты как модули (type="module"), а модули выполняются после того, как страница разобрана. Поэтому страница сначала показывается в теме по умолчанию и лишь потом перекрашивается — экран заметно «моргает». Строки, которые читают localStorage и ставят data-theme, перенесите в маленький тег <script> прямо в <head> файла index.html, а в src/theme.js оставьте обработчики кнопок.