在 React 中实现暗黑模式

谁不想在自己的网站上使用深色主题呢！它不仅能帮助我们更好地集中注意力，还能保护我们的眼睛🤓。

如果您属于以下任一情况，该博客可能会增加价值 -

• 也许您曾经想要为您的网站实现黑暗主题，但却遇到了同样的困难😵。

• 您刚刚开始使用 React，因此这可能只是您可以尝试的另一个有趣的练习🎉。

先决条件

• React 和术语（状态、属性等）的基础知识
• CSS基础知识
• 愿意学习🚀

启动一个新的 React 项目✨

您可以使用本地开发环境或者使用沙箱。

注意📝 - 如果使用本地设置，最好在进一步移动之前清理工厂代码。

此外，我将使用基于类的组件 - 而不是使用 React Hooks。

创建一个简单的页面

在我们的 中，暂时App()只返回 a 。（也可以使用 a）divbutton

向我们的应用添加状态

在嵌入逻辑方面，我们无法用哑组件state做太多事情。所以我们需要添加到 React 组件中。

isDarkThemeEnabled向组件添加一个名为 的状态App并将其设置为false。

创建主题切换器逻辑💡

这就是整个问题的关键所在。

如何构建主题切换器/切换器？

如果你试着用灯泡来类比，这可能会变得简单。灯泡有两种状态on和off。
在任何给定的时间点，它都处于 或 状态之一。

现在，将主题切换器想象成一个灯泡，并尝试映射这个想法。

没错！🎉 如果把主题切换器想象成一个灯泡，那么light mode就变成，on就dark mode变成off，反之亦然。

那么，如何切换状态呢？很简单，只要在某个事件触发时切换当前状态即可。
简单来说，点击按钮即可将状态值从true更改为false，反之亦然。

实现主题切换器逻辑

现在，既然我们已经设计好了方法，是时候开始编写代码了。
在 React 中，我们使用函数来更改状态。你可以从这里setState阅读 API 的相关内容。setState

让我们创建一个clickHandler并在其中嵌入状态切换逻辑。

将其传递clickHandler给onClickdiv 的 prop，以便在用户点击 div 时触发该功能。

将 SVG 添加到我们的应用

我想让用户知道他当前可以切换到哪个模式。可以用文字来实现，但还有什么比使用 SVG 图标来增强 UI 效果更好的呢？🎉

我将使用heroicons来获取高质量的 SVG 图标。

在目录中创建两个文件/src，分别用于表示两种状态的 SVG 图标。在本例中，我将使用月亮和太阳的 SVG 图标。

要在 React 应用中使用任何 SVG，我们可以直接在代码中使用它们，也可以将 SVG 作为 React 组件导入。我更喜欢后者，因为它有助于保持代码更简洁。

这就是我们将 SVG 图标导入为 React 组件的方法 -

import {ReactComponent as Moon} from './moon.svg';

我们还需要切换 SVG 图标以达到我们的目的。为此，我们将使用conditional rendering。
这真是个宝藏💎。您可以在这里阅读相关内容。

我们的想法是，无论何时isDarkThemeEnabled我们true需要sunSVG 显示，否则moonSVG 就应该显示。

应用程序现在的样子就是这样。你快完成了。🏁

让我们设计一下我们的应用

启用后dark mode，我们希望将应用背景涂成深色。因此，我们建议应用classNames conditionally。
您可以点击此处了解更多详情。

我们将使用JSX expression和Template Literals来实现这一点。当isDarkThemeEnabled设置为时true，即dark mode启用 ，我们将在 classNameclassName后附加App。

className={`App ${isDarkThemeEnabled && "dark-mode"}`}

现在让我们为该类添加一些样式.App.dark-mode。

让我们也来给 SVG 图标💅添加样式。分别给moon和组件添加和的 className 。sun<Moon /><Sun />

这是应用程序代码现在的样子。

import "./styles.css";
import React from "react";
import { ReactComponent as Moon } from "./moon.svg";
import { ReactComponent as Sun } from "./sun.svg";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isDarkThemeEnabled: false,
    };
  }

  handleClick = () => {
    const { isDarkThemeEnabled } = this.state;
    this.setState({
      isDarkThemeEnabled: !isDarkThemeEnabled,
    });
  };

  render() {
    const { isDarkThemeEnabled } = this.state;
    return (
      <div className={`App ${isDarkThemeEnabled && "dark-mode"}`}>
        <div className="toggler-btn" onClick={this.handleClick}>
          {isDarkThemeEnabled ? (
            <Sun className="sun" />
          ) : (
            <Moon className="moon" />
          )}
        </div>
      </div>
    );
  }
}

export default App;

在 中添加所需的样式styles.css。

✨ 在包装类中添加过渡时间，使颜色切换更平滑。我已添加transition: 0.3s ease到.App。

应用程序最终呈现的效果如下！
注意：我添加了一些额外的样式和动画。

对于较大的网站，使用css variables主题切换可以更轻松地绘制 UI 组件。

请随意玩弄沙盒。

结论

恭喜！！ 🎉🎉 你坚持到了最后。如果你还在，那很可能你喜欢这篇博客。

你也可以对这个简单的项目进行一些即兴创作并分享。这有助于巩固基础知识🏋🚀。

请告诉我你对这个博客的评价以及我需要改进的地方。我非常期待你的反馈！