This content originally appeared on DEV Community and was authored by Kunal Ukey
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-toggle
cd 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";
// assets
import 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";
// assets
import 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!❤️
This content originally appeared on DEV Community and was authored by Kunal Ukey
Kunal Ukey | Sciencx (2023-04-26T18:31:47+00:00) How To Add Dark Mode Toggle in ReactJS + TailwindCSS + DaisyUI ⚛️🌼. Retrieved from https://www.scien.cx/2023/04/26/how-to-add-dark-mode-toggle-in-reactjs-tailwindcss-daisyui-%e2%9a%9b%ef%b8%8f%f0%9f%8c%bc/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.