1-строчное переключение тем в React (с Tailwind + DaisyUI)

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!

Невероятно, не правда ли?!

Оцените статью
devanswers.ru
Добавить комментарий