大家好,这次我将分享如何使用 Tailwind CSS 将暗模式应用到我们的 React 项目中。让我们马上开始吧。

请准备您的项目。您可以按照以下文章安装 React 和 Tailwind CSS 项目。如何在 React 项目上安装 Tailwind CSS。

如果是这样,请打开 tailwind.config.js 文件并将以下代码添加到 module.exports 部分。

module.exports = {
  darkMode: 'class',
  // ...
}

进入全屏模式 退出全屏模式

此代码用于激活 Tailwind 上的黑暗类。如果课程处于暗模式,该课程将处于活动状态。要使用它,您只需要写 dark: 后跟类名。你可以在下面的文章中看到更多。暗模式 - Tailwind CSS。

接下来我们将使用来自 NPM 的包来创建图标。所以我们不必费心自己准备图标,因为包已经为暗和亮模式准备了图标,并且在过渡中有动画。更多详细信息,您可以查看以下文章。React 切换暗模式。

执行安装并等待它完成。

npm i react-toggle-dark-mode

进入全屏模式 退出全屏模式

在这种情况下,我会将切换暗模式按钮放在标题部分。这是我的 Header.js 文件的代码。

import React from "react";
import Switcher from "./Switcher";

function Header() {
  return (
    <header className="bg-purple-500 text-white font-bold text-3xl dark:bg-slate-800">
      <div className="container flex justify-between p-5 mx-auto items-center uppercase">
        <h1>Example App</h1>
        <Switcher />
      </div>
    </header>
  );
}

export default Header;

进入全屏模式 退出全屏模式

创建一个文件以放入您的暗模式切换代码。在这种情况下,我用 Switcher.js 命名了该文件。将_Switcher_ 组件放在_Header_ 中并导入文件。以下是_Switcher.js_代码的内容。

import React, { useState } from "react";
import { DarkModeSwitch } from "react-toggle-dark-mode";
import UseDarkSide from "./UseDarkSide";

function Switcher() {
  const [colorTheme, setTheme] = UseDarkSide();
  const [darkSide, setDarkSide] = useState(
    colorTheme === "light" ? true : false
  );
  const toggleDarkMode = (checked) => {
    setTheme(colorTheme);
    setDarkSide(checked);
  };

  return (
    <DarkModeSwitch checked={darkSide} onChange={toggleDarkMode} size={30} />
  );
}

export default Switcher;

进入全屏模式 退出全屏模式

DarkModeSwitch 组件是我们之前安装的软件包的默认组件。

最后,我们创建一个文件来将我们选择的模式主题存储在本地存储中。因此,如果我们刷新或关闭浏览器,活动模式主题不会改变。创建一个名为 UseDarkSide 的文件,以下是该文件的内容。

import { useEffect, useState } from "react";

function UseDarkSide() {
  const [theme, setTheme] = useState(localStorage.theme);
  const colorTheme = theme === "dark" ? "light" : "dark";
  useEffect(() => {
    const root = window.document.documentElement;
    root.classList.remove(colorTheme);
    root.classList.add(theme);
    localStorage.setItem("theme", theme);
  }, [theme, colorTheme]);

  return [colorTheme, setTheme];
}

export default UseDarkSide;

进入全屏模式 退出全屏模式

完成并且可以使用您的暗模式功能。