DaisyUI — это лучшая библиотека компонентов Tailwind, с которой я работал. Хотя она предоставляет множество красивых предустановленных тем (темная, светлая, кекс, шмель и многие другие), единственной сложной частью была реализация переключения тем с помощью кнопки или тумблера daisyUI.
В этом посте я покажу, как реализовать плавное переключение светлого и темного режимов.
Хотя в официальном руководстве на сайте daisyUI говорится, что нужно использовать пакет npm ‘theme-change’, мне показалось проще напрямую добавить атрибут ‘data-theme’ к html-тегу (что и делает пакет).
Вот как выглядит код компонента кнопки переключения:
const Toggle = () => {
useEffect(() => {
/* Sets the data-theme attribute on html tag */
document.documentElement.setAttribute(
"data-theme",
localStorage.getItem("theme") === "dark" ? "dark" : "light"
);
}, []);
return (
/* Component provided by daisyUI - https://daisyui.com/components/toggle/ */
<input
type="checkbox"
className="toggle"
defaultChecked={
typeof window !== "undefined" &&
localStorage.getItem("theme") === "dark"
}
onClick={(e) => {
let newTheme = e.target.checked ? "dark" : "light";
localStorage.setItem("theme", newTheme);
document.documentElement.setAttribute("data-theme", newTheme);
}}
/>
);
};
Поскольку я использую NextJS, я подтвердил, что мы находимся на стороне клиента, прежде чем обратиться к localStorage, чтобы установить значение defaultChecked для кнопки переключения.
Вот и все! Это позволит вам использовать кнопку переключения для переключения тем (со встроенными плавными переходами), сохранить тему в локальном хранилище и использовать localStorage для восстановления темы при последующих посещениях веб-страницы.
Если вы хотите использовать различные компоненты пользовательского интерфейса для переключения тем (например, использовать кнопки или выпадающее меню), вы можете сделать это точно так же, используя соответствующие компоненты из daisyUI.
Для внедрения дополнительных тем вам понадобится только название темы, все конфигурации тем поставляются из коробки с daisyUI!
Невероятно, не правда ли?!