如何使用 React Hooks 添加暗模式功能

2025-06-04

如何使用 React Hooks 添加暗模式功能

最初发表于Crowdbotics.com

开发人员似乎很喜欢暗黑模式。许多热门网站，例如 Twitter、Reddit 和 YouTube，现在也在其网站和应用程序上支持这种暗黑模式。这不仅仅是一种趋势。它对用户的眼睛很友好，可以减少眼疲劳。

在本文中，我将向您展示如何在 React 应用中添加此功能，无论它是使用托管在其他地方的第三方 API 的管理仪表板，还是使用Gatsbycreate-react-app等静态站点生成器的网络博客。无论您决定使用实用程序生成 React 应用还是使用任何静态站点生成器，下面讨论的步骤都是相同的。

本教程将使用 React Hooks。如果您对它们完全不熟悉，建议您先阅读React 官方文档来熟悉它们。此外，每当使用 Hooks 时，都会提供简要概述。

目录

  • 要求
  • 设置基本主题
  • 添加切换按钮来更改主题
  • 使用本地存储添加主题持久性
  • 将 Crowdbotics 支持连接到您的 Github Repo
  • 结论

要求

注意：如果您希望从技术角度理解本文内容，则需要满足这些要求。也就是说，如果您是首次尝试使用市场中的自定义模板来使用 Crowdbotics，或者您真的有兴趣使用 Crowdbotics 模板、React Native 和 Expo 构建自定义约会应用。如果您的情况是后者，那么本文可以作为指南和模板的切入点。

设置基本主题

在本节中，我们首先添加一个默认使用轻量模式的基础 React 应用。首先，create-react-app创建一个新目录。创建新目录后，导航到项目目录。您可以将以下步骤复制并粘贴到终端窗口中。

create-react-app react-darkmode-app

cd react-darkmode-app
Enter fullscreen mode Exit fullscreen mode

进入项目目录后，打开App.css文件并获取基本灯光主题的以下样式。

body {
  margin: 0;
  text-align: center;
}

.light-theme {
  background-color: #fff;
  color: #444444;
}

nav {
  display: flex;
  text-align: center;
  background-color: #503d81;
  width: 100%;
  padding: 20px;
  color: #f8f8f8;
}

.content {
  padding: 0.5em;
  margin: 0 auto;
  max-width: 600px;
  font-size: 1.2rem;
  line-height: 1.1;
  height: 90vh;
}
Enter fullscreen mode Exit fullscreen mode

要应用这些样式，请打开App.js组件文件并用以下代码片段替换默认代码。

import React from 'react'
import './App.css'

function App() {
  return (
    <div className="light-theme">
      <nav>Toggle button will go here</nav>
      <div className="content">
        <h1>Light Mode</h1>
      </div>
    </div>
  )
}

export default App
Enter fullscreen mode Exit fullscreen mode

yarn start现在，尝试使用终端窗口中的命令运行该应用程序。http://localhost:3000在浏览器窗口中访问该 URL，您将获得以下结果。

SS1

返回App.css文件并为黑暗主题创建基本样式。

.dark-theme {
  background-color: #1f1b24;
  color: #f8f8f8;
}

.dark-theme nav {
  background-color: #332940;
}

.dark-theme code {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

请注意，使用 CSS 选择器属性，您将更改导航栏的背景颜色，其余样式保持不变。例如，文本color属性将与浅色主题中的相同。要测试深色主题，请将文件中className第一个元素的 更改为。divApp.jsdark-theme

function App() {
  return (
    <div className="dark-theme">
      <nav>Toggle button will go here</nav>
      <div className="content">
        <h1>Dark Mode</h1>
        <p>
          Do take a note of the <code>color</code> property in the nav bar.
        </p>
      </div>
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

回顾浏览器窗口，您将获得以下结果。

SS2

至此，您已经拥有了一个非常简化的应用程序版本，但它并没有实现其目的。它必须跟踪用户选择的主题并相应地显示样式。

添加切换按钮来更改主题

为了让最终用户决定他们想要的视图主题，你的 React 应用可以通过添加一个切换按钮来实现。要在亮色或暗色之间切换主题，需要一个变量来跟踪用户选择的主题。为此，我们添加了React Hooks的新概念，而不是将当前App组件转换为类组件。

简单概述一下 React Hooks，可以说它们从 1.0 版本开始就已在 React 中使用16.8.x。它们是函数式组件，允许你在函数式组件中初始化并使用 React 状态和组件的生命周期方法。Hooks 不适用于类。如果你熟悉 React，你就会知道函数式组件曾被称为函数式无状态组件。现在不再如此了。

React 提供了一些内置的 Hooks，例如useState使用关键字 来初始化组件的默认状态，就像在类组件中一样state。打开App.js文件并按如下所示初始化状态。

function App() {
  const [darkTheme, setDarkTheme] = React.useState(false)
  // rest remains same
}
Enter fullscreen mode Exit fullscreen mode

在上面的代码片段中，变量的默认值darkTheme是false。这意味着它不是应用程序将使用的默认样式集。使用条件运算符，更新return中的函数App()。

return (
  43 -
  (
    <div className={darkTheme ? 'dark-theme' : 'light-theme'}>
      <nav>
        <div className="button-container">
          <button onClick={() => setDarkTheme(prevTheme => !prevTheme)}>
            Toggle Theme
          </button>
        </div>
      </nav>
      <div className="content">
        <h1>{darkTheme ? 'Dark Mode' : 'Light Mode'}</h1>
        <p>
          Do take a note of the <code>color</code> property in the nav bar.
        </p>
      </div>
    </div>
  )
)
Enter fullscreen mode Exit fullscreen mode

从第一个div元素开始，它使用条件运算符检查状态变量的值darkTheme是 true 还是 false。如果为 true，则将应用与深色主题相关的样式。否则，将激活默认的浅色主题。相同的条件运算符将作用于h1元素，以显示当前正在使用的主题的文本。

使用button事件onClick来切换亮色主题和暗色主题的行为。prevTheme用于应用功能更新。它计算先前状态的值，然后返回更新后的值。在当前情况下，此处表示的值是主题本身。

这是浏览器窗口中的输出。单击Toggle Theme按钮可更改主题和内容中的标题。

SS3

以下是 的相应样式button-container。

.button-container {
  display: flex;
  margin: 0 auto;
}
Enter fullscreen mode Exit fullscreen mode

使用本地存储添加主题持久性

现在，用户可以轻松地在应用运行的两个主题之间切换。但是，每当网页重新加载时，即使您上次选择的主题是深色，显示的默认主题仍然是浅色。为了提供实用的解决方案，在本节中，您将把深色主题的值存储在浏览器的本地存储中。

与类组件中的生命周期方法相比，在现代 React 函数式组件中，你可以轻松地使用 来添加相同的功能useEffect。它接受一个函数作为参数。该函数可以用 关键字编写function，也可以使用箭头函数。此外，作为参数传递给 的函数useEffect将在每次渲染完成后运行。

为了避免这种情况，您可以有条件地渲染该useEffect方法。方法是传递一个空数组作为第二个参数。该数组将包含的值将成为 的值darkTheme。在组件中定义状态后App，添加此效果方法。

React.useEffect(() => {
  localStorage.setItem('dark', JSON.stringify(darkTheme))
}, [darkTheme])
Enter fullscreen mode Exit fullscreen mode

darkTheme使用箭头函数作为第一个参数，它将在浏览器的 中设置 的值localStorage。要将主题值添加到本地存储，需要结合两件事。必须将标识符或键作为第一个参数传递，setItem()并将 的布尔值darkTheme作为第二个参数传递。

现在，返回浏览器窗口并打开开发者工具。在标签页中，如下图所示，Application找到“存储”>“本地存储”dark 。您将找到一个值为 的键false。

SS4

单击按钮后，本地存储中的Toggle Theme键的值将更改为。darktrue

SS5

它可以正常工作，但重新加载 React 应用后，会切换回浅色主题。这是因为深色主题的默认值始终为 false。让我们来修改一下。

返回组件App并创建一个新函数getDefaultTheme。它将跟踪dark从本地存储中获取 的值。此外， 状态下 的默认值将从此函数（换句话说，从本地存储darkTheme）读取，而不是布尔值。false

const [darkTheme, setDarkTheme] = React.useState(getDefaultTheme())

React.useEffect(() => {
  localStorage.setItem('dark', JSON.stringify(darkTheme))
}, [darkTheme])

function getDefaultTheme() {
  const selectedTheme = JSON.parse(localStorage.getItem('dark'))
  return selectedTheme || false
}
Enter fullscreen mode Exit fullscreen mode

请注意下面的演示，即使 React 应用程序重新加载，暗值也会保存在本地存储中。

SS6

将 Crowdbotics 支持连接到您的 Github Repo

一切正常后，让我们将 git 版本添加到这个 React 项目，然后进一步添加对 Crowdbotics 应用构建平台的支持。打开终端窗口并执行：

git init

# add all files
git add .

# commit
git commit -m "update"
Enter fullscreen mode Exit fullscreen mode

提交所有文件后，将此仓库添加到您的 Github 帐户。Crowdbotics 应用构建平台现在允许您使用 GitHub OAuth 集成直接连接 Github 仓库（这意味着您需要拥有一个 Crowdbotics 帐户或使用您的 Github 帐户登录）。

SS7

您可以在此处找到有关此过程的更多详细信息。

结论

恭喜！你已经读完了这篇文章。希望你在这里学到了一些有用的东西。React Hooks 是一个强大的概念，并且随着时间的推移，它的使用越来越广泛。以下是一些与本文相关的资源：

我经常撰写有关 Node.js、React.js 和 React Native 的文章。您可以订阅我的每周新闻邮件，直接在邮箱中收到最新更新💌

文章来源：https://dev.to/amanhimself/how-to-add-dark-mode-functionity-with-react-hooks-4jnf
Devto 翻译
PREV
使用 React Router 优化单页应用程序
NEXT
使用 Apollo、React 和 Graphql 创建开源 Twitter 克隆