Tailwindcss Reactjs에서 다크 모드 및 라이트 모드 토글

TailwindCSS로 다크 모드와 라이트 모드를 구현합니다.

이 코드를 복사하여 public/index.html에 붙여넣기

    <script>
     const defaultTheme = "dark";
      if (!localStorage.getItem("theme")) {
        localStorage.setItem("theme", defaultTheme);
      }
      if (localStorage.getItem("theme") === "dark") {
        document.documentElement.classList.add("dark");
      } else {
        document.documentElement.classList.remove("dark");
      }
    </script>

이 코드를 사용하여 반응 프로젝트의 아무 곳에나 함수를 생성하세요👇

  const toggleTheme = () => {
    const theme = localStorage.getItem("theme"); 
    if (theme === "dark") {
      document.documentElement.classList.remove("dark");
      localStorage.setItem("theme", "light");
    } else {
      document.documentElement.classList.add("dark");
      localStorage.setItem("theme", "dark");
    }
  };

이제 toggleTheme 기능을 사용할 수 있습니다.

참고: 이 예에서 기본 테마는 어둡습니다. 기본적으로 어두운 것이 마음에 들지 않으면 밝은 테마를 기본값으로 설정할 수 있습니다.
defaultTheme 변수 값을 dark에서 light로 변경하기만 하면 됩니다.