使用Tailwind实现light/dark模式切换作为开发者，我们不应该将自己局限于一件事。让我们让我们的应用程序更具

作为开发者，我们不应该将自己局限于一件事。让我们让我们的应用程序更具动态性的白天/暗夜模式。有很多关于ReactJS切换暗/亮模式的教程。下面是我使用 React Hooks 和 CSS 类的简单解决方案。我希望它会对你的项目有用。

安装 React & Tailwind

第一步是为 React 应用安装 Tailwind。如果你还没有安装，请按照以下步骤进行设置:

安装 React

npm create vite@latest my-blog --template-react

我使用Vite进行React设置，但你也可以使用任何其他构建工具，如 create-react-app。
选择框架React和变量JavaScript。

cd my-blog
npm install
npm run dev

安装 Tailwind

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

修改 tailwind.config.js 文件内容

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

导入 Tailwind到CSS -添加这段代码在你的./src/index.css文件开始（别忘了在main.js中引入）

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

👉 Official tutorial by Tailwind here

搭建基础布局

首先，在 src 文件夹目录下创建 components 文件夹并创建 Nav.jsx 组件：

import React from "react";

export default function Nav() {
    return (
        <nav>
            <h1>hello world</h1>
        </nav>
    )
}

并且在 App.jsx 中引入 Nav.jsx：

import Nav from "./components/Nav"

export default function App() {
    return {
    <Nav />
}}

配置白天/暗夜模式

1. 设置darkMode状态

const [darkMode, setDarkMode] = React.useState(true)

darkMode将被设置为初始的true布尔值。这意味着在默认情况下，web 将是暗主题的。如果你想默认的主题是亮，使用false代替。

2. 创建toggleDarkMode函数

function toggleDarkMode() {
        setDarkMode(prevDarkMode => !prevDarkMode)
    }

当toggleDarkMode被触发时，darkMode状态将在true和false之间交替。

3. 触发toggleDarkMode函数

你需要使用 onClick 去触发 toggleDarkMode。此 handler 将放置在用户单击以切换暗/亮模式的位置。对于这个 app，我将把handler放在导航组件中的切换图标中。这是我给 Nav.jsx 准备的和简单的h4和切换图标图像:

import React from "react";

export default function Nav(props) {
    return (
        <nav 
            className="grid grid-cols-2 w-full place-content-between items-center"
    >
            <h4>Home</h4>
            <img src="./src/assets/toggle-icon-dark.svg" />
        </nav>
    )
}

启动之后应该是这样的：当darkMode设置为true时，图像将为toggle-icon-dark.svg。当darkMode为false时，图像将为toggle-icon-light.svg.

但是在更改图像之前，让我们回到App.jsx文件并设置一些东西。在App.jsx的导航元素中，添加键darkMode和toggleDarkMode:

<Nav 
    darkMode={darkMode} 
    toggleDarkMode={toggleDarkMode} 
/>

第一个属性将监视 darkMode 是否为true，而第二个属性将控制切换。

当切换图标被点击时，darkMode将被设置为true或false。True将以暗主题渲染页面，false将以浅主题渲染页面。

在第1步中，我们在父文件 App.jsx 中设置了 darkMode 状态。为了将它传递给子文件 Nav.js，我们必须使用 props。
首先，在 Nav.js 的切换图标图像中添加 onclick:

import React from "react";

export default function Nav(props) {
    return (
        <nav className="grid grid-cols-2 place-content-between items-center w-full">
            <h4>home</h4>
            <img onClick={props.toggleDarkMode} 
                 className="self-left justify-self-end" 
                 src="./src/assets/toggle-icon-light.svg" />
        </nav>
    )
}

接下来使用三元操作符来切换基于暗/亮模式的图像:

src={props.darkMode ? "./src/assets/toggle-icon-dark.svg" : "./src/assets/toggle-icon-dark.svg"}

当 props.darkMode 为 true，图标图像将为 toggle-icon-dark.svg。如果 darkMode为false，它将设置为 toggle-icon-light.svg。由于我们在前面设置的状态，当单击切换图标图像时，切换图标 -dark.svg 和切换图标 -light.svg 将交替使用。

4. 为暗光模式创建CSS类

所以我们已经切换成功(切换 true/false 和图标图像亮/暗 onClick)。不过，当我们启动服务器后，就会发现除了切换图片之外，其他一切看起来都是一样的。这是因为当模式改变时，我们实际上没有改变背景和文本颜色。在Tailwind中，有许多方法可以切换暗/亮背景和文本颜色。对于本例，我将在纯CSS中创建dark和light类。
这是我的CSS代码:

:root {
  --clr-bg-dark: #1f2937; /* gray-800 */
  --clr-bg-light: #e2e8f0; /* slate-200 */

  --clr-text-dark: #e2e8f0; /* slate-200 */
  --clr-text-light: #1e293b; /* slate-800 */
}

.dark {
  background-color: var(--clr-bg-dark);
  color: var(--clr-text-dark);
}

.light {
  background-color: var(--clr-bg-light);
  color: var(--clr-text-light);
}

5. 根据暗光模式改变背景颜色和文本颜色

现在需要根据站点的模式添加暗/亮类。返回到App.jsx，并在返回中添加以下代码行:

return (
    <div className={`h-full w-full mx-auto py-2 
                    ${darkMode ? "dark" : "light"}`}
    >
    <Nav 
        darkMode={darkMode} 
        toggleDarkMode={toggleDarkMode} 
    />
    </div>
)

外部的 <div> 将设置整个页面的背景和文本颜色。我们将高度和宽度设置为full，这样它就会覆盖整个身体。/ 同样，可以使用三元运算符在两个选项之间切换。如果darkMode为true，dark 类将被添加。否则，将添加light 类。dark 和 light 类将根据 darkMode 的状态交替使用。

⚡React站点的暗/亮模式示例: