React에서 1줄 테마 전환(Tailwind + DaisyUI 포함)

DaisyUI은 내가 작업한 최고의 Tailwind 구성 요소 라이브러리입니다. 많은 아름다운 사전 설정 테마(어둠, 밝음, 컵케이크, 땅벌 등)를 제공하지만 유일한 까다로운 부분은 daisyUI 버튼 또는 토글로 테마 전환을 구현하는 것이었습니다.

이 게시물에서는 밝고 어두운 모드 전환을 원활하게 구현하는 방법을 보여 드리겠습니다.

daisyUI 웹사이트의 공식 튜토리얼에는 'theme-change' npm 패키지를 사용해야 한다고 나와 있지만 '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를 사용하고 있기 때문에 토글의 defaultChecked 값을 설정하기 위해 localStorage에 액세스하기 전에 클라이언트 측에 있는지 확인했습니다.

그리고 그게 다야! 이렇게 하면 토글 버튼을 사용하여 테마를 전환하고(내장된 부드러운 전환 포함) 테마를 로컬 저장소에 저장하고 localStorage를 사용하여 웹 페이지를 추가로 방문할 때 테마를 복원할 수 있습니다.

다른 UI 구성 요소를 사용하여 테마 간에 전환하려는 경우(예: 버튼 또는 드롭다운 메뉴 사용), daisyUI의 각 구성 요소를 사용하여 정확히 동일한 방식으로 전환할 수 있습니다.

더 많은 테마를 구현하려면 테마 이름, 모든 테마 구성come out of the box 및 daisyUI만 있으면 됩니다!

놀랍지 않나요?!