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:

April 26, 2023 06:31 pm GMT

How To Add Dark Mode Toggle in ReactJS TailwindCSS DaisyUI

Introduction:

In this tutorial, we will learn how to add a dark mode toggle with local storage persistence to a ReactJS + TailwindCSS + DaisyUI project. We will begin by setting up the project and installing the necessary dependencies. Next, we will create a Navbar and Hero component using DaisyUI's pre-built components. Finally, we will implement a dark mode toggle using DaisyUI's help and by updating the custom attribute in the HTML tag to add local storage persistence to it.

Prerequisites:

Before we get started, you need to have the following tools and technologies installed on your machine:

NodeJS
Code Editor

Initiate ReactJS project

Let's start by creating a new Reactjs project using the create-react-app command.

npx create-react-app dark-mode-togglecd dark-mode-toggle

Then remove the unnecessary files and code from the src directory.

Installing and Configuring TailwindCSS

To install TailwindCSS, run the following command:

npm install -D tailwindcss

Then create a new file called tailwind.config.js by running the following command:

npx tailwindcss init

In the tailwind.config.js file, add the following code to it:

module.exports = {  content: [    "./src/**/*.{js,jsx,ts,tsx}",  ],  theme: {    extend: {},  },  plugins: [],}

In your src/index.css file, add the following directives:

@tailwind base;@tailwind components;@tailwind utilities;

Installing and Configuring DaisyUI

Now that we've set up TailwindCSS, let's install DaisyUI. DaisyUI is a collection of ready-to-use UI components designed to work seamlessly with TailwindCSS.

To install DaisyUI, run the following command in your project directory:

npm install daisyui

After the installation is complete, we need to configure DaisyUI with TailwindCSS.

Open the tailwind.config.js file and add the following code at the end of the plugins array:

plugins: [require('daisyui')],

Now we also need to add the daisyUI themes so that we can switch between them.

  daisyui: {    themes: ["light", "dark"],  },

The whole code in our tailwind.config.js file would look something like this:

module.exports = {  content: [    "./src/**/*.{js,jsx,ts,tsx}",  ],  theme: {    extend: {},  },  plugins: [require("daisyui")],  daisyui: {    themes: ["light", "dark"],  },}

Navbar component

Now create an Navbar.js file inside the src/components folder and add the following code to it:

import { useState, useEffect } from "react";// assetsimport logo from "../assets/om-logo.png";import sun from "../assets/sun.svg";import moon from "../assets/moon.svg";const Navbar = () => {  return (    <div className="navbar bg-base-100 shadow-lg px-4 sm:px-8">      <div className="flex-1">        <img src={logo} alt="OM" className="btn btn-ghost p-0" />        <h1 className="text-lg font-bold mx-4">Your Website</h1>      </div>      <div className="flex-none">        {/* Toggle button here */}        <button className="btn btn-square btn-ghost">          <label className="swap swap-rotate w-12 h-12">            <input type="checkbox" />            {/* light theme sun image */}            <img src={sun} alt="light" className="w-8 h-8 swap-on" />            {/* dark theme moon image */}            <img src={moon} alt="dark" className="w-8 h-8 swap-off" />          </label>        </button>      </div>    </div>  );};export default Navbar;

Hero component (Optional)

To add some content to our single page, let's create another component called Hero.js inside the src/components folder and add the following code it:

const Hero = () => {  return (    <div className="hero min-h-full h-full pt-[20%]">      <div className="hero-content text-center">        <div className="max-w-md">          <h1 className="text-5xl font-bold">Your Awesome Website!</h1>          <p className="py-6">            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.          </p>          <button className="btn btn-primary">            Checkout          </button>        </div>      </div>    </div>  );};export default Hero;

Adding Navbar and Hero components to App.js

Now we are ready to show our components in our single page by adding them to the App.js component as:

import Navbar from "./components/Navbar";import Hero from "./components/Hero";function App() {  return (    <div className="h-full min-h-full">      <Navbar />      <Hero />    </div>  );}export default App;

Implementing Dark Mode Toggle functionality

Towards the end, we have to toggle the dark/theme when we click on the toggle button from the Navbar component. So, add the following code to the Navbar.js component:

import { useState, useEffect } from "react";// assetsimport logo from "../assets/om-logo.png";import sun from "../assets/sun.svg";import moon from "../assets/moon.svg";const Navbar = () => {  // use theme from local storage if available or set light theme  const [theme, setTheme] = useState(    localStorage.getItem("theme") ? localStorage.getItem("theme") : "light"  );  // update state on toggle  const handleToggle = (e) => {    if (e.target.checked) {      setTheme("dark");    } else {      setTheme("light");    }  };  // set theme state in localstorage on mount & also update localstorage on state change  useEffect(() => {    localStorage.setItem("theme", theme);    const localTheme = localStorage.getItem("theme");    // add custom data-theme attribute to html tag required to update theme using DaisyUI    document.querySelector("html").setAttribute("data-theme", localTheme);  }, [theme]);  return (    <div className="navbar bg-base-100 shadow-lg px-4 sm:px-8">      <div className="flex-1">        <img src={logo} alt="OM" className="btn btn-ghost p-0" />        <h1 className="text-lg font-bold mx-4">Your Website</h1>      </div>      <div className="flex-none">        {/* Toggle button here */}        <button className="btn btn-square btn-ghost">          <label className="swap swap-rotate w-12 h-12">            <input              type="checkbox"              onChange={handleToggle}              // show toggle image based on localstorage theme              checked={theme === "light" ? false : true}            />            <img src={sun} alt="light" className="w-8 h-8 swap-on" />            <img src={moon} alt="dark" className="w-8 h-8 swap-off" />          </label>        </button>      </div>    </div>  );};export default Navbar;

Conclusion:

Congratulations! You've successfully added a dark mode toggle to your ReactJS application using Tailwind CSS and daisyUI. Now your users can enjoy the flexibility of choosing their preferred theme for a better user experience.

Thanks for following along, and happy coding!

Original Link: https://dev.to/kunalukey/how-to-add-dark-mode-toggle-in-reactjs-tailwindcss-daisyui-1af9

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