Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

March 31, 2022 05:58 am GMT

Tailwindcss Dark mode and Light mode Toggle in Reactjs

Implement Dark mode and light mode with TailwindCSS.

Copy & paste this code in 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>

Create a function anywhere in your react project with this code

  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");    }  };

Now you can use toggleTheme function.

NOTE: in this example default theme is dark if you don't like dark as default then you can set the light theme as default.
just change defaultTheme variable value dark to light.

Original Link: https://dev.to/stacksagar/tailwindcss-dark-mode-and-light-mode-toggle-in-reactjs-2467

Share this article:

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To