如何在 ReactJS + TailwindCSS + DaisyUI 中添加深色模式切换开关 ⚛️🌼
介绍：
在本教程中，我们将学习如何在 ReactJS + TailwindCSS + DaisyUI 项目中添加一个支持本地存储持久化的深色模式切换按钮。首先，我们将设置项目并安装必要的依赖项。接下来，我们将使用 DaisyUI 的预构建组件创建 Navbar 和 Hero 组件。最后，我们将借助 DaisyUI 的帮助，通过更新 HTML 标签中的自定义属性来实现深色模式切换，从而为其添加本地存储持久化功能。
先决条件：
开始之前，您需要在计算机上安装以下工具和技术：
- NodeJS
- 代码编辑器
启动 ReactJS 项目
让我们首先使用create-react-app命令创建一个新的 Reactjs 项目。
npx create-react-app dark-mode-toggle
cd dark-mode-toggle
然后从 src 目录中删除不必要的文件和代码。
安装和配置 TailwindCSS
要安装 TailwindCSS，请运行以下命令：
npm install -D tailwindcss
tailwind.config.js然后运行以下命令创建一个名为 `<filename>` 的新文件：
npx tailwindcss init
在tailwind.config.js文件中，添加以下代码：
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
在您的src/index.css文件中添加以下指令：
@tailwind base;
@tailwind components;
@tailwind utilities;
安装和配置 DaisyUI
现在我们已经配置好了 TailwindCSS，接下来安装 DaisyUI。DaisyUI 是一套即用型 UI 组件，旨在与 TailwindCSS 无缝协作。
要安装 DaisyUI，请在项目目录中运行以下命令：
npm install daisyui
安装完成后，我们需要将 DaisyUI 与 TailwindCSS 进行配置。
打开tailwind.config.js文件，并在 plugins 数组末尾添加以下代码：
plugins: [require('daisyui')],
现在我们还需要添加 daisyUI 主题，以便我们可以在它们之间切换。
daisyui: {
themes: ["light", "dark"],
},
我们文件中的全部代码tailwind.config.js大致如下所示：
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [require("daisyui")],
daisyui: {
themes: ["light", "dark"],
},
}
导航栏组件
现在Navbar.js在该文件夹内创建一个文件src/components，并将以下代码添加到该文件中：
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.js内创建另一个名为 `<component>` 的组件src/components，并向其中添加以下代码：
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;
向 App.js 添加 Navbar 和 Hero 组件
现在，我们可以通过将组件添加到App.js组件中，在单页中显示这些组件：
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;
实现深色模式切换功能
最后，我们需要实现点击导航栏组件中的切换按钮时切换深色/深色主题的功能。因此，请将以下代码添加到该Navbar.js组件中：
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}
/>
{/* 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;
结论：
恭喜！您已成功使用 Tailwind CSS 和 daisyUI 为您的 ReactJS 应用程序添加了深色模式切换功能。现在，您的用户可以灵活选择自己喜欢的主题，从而获得更好的用户体验。
感谢你的关注，祝你编程愉快！❤️
文章来源：https://dev.to/kunalukey/how-to-add-dark-mode-toggle-in-reactjs-tailwindcss-daisyui-1af9