使用 Chakra UI 为 React 应用添加暗黑模式

2020-11-03 08:00飞浪

介绍

在本指南中，您将学习如何使用Chakra UI向您的 React 应用添加暗黑模式。除了酷炫和时尚之外，暗黑模式还增强了对光敏感用户的可访问性。

本指南假设您已经知道如何在 React 应用中安装和配置 Chakra UI。您可以阅读在 React 中安装和使用 Chakra UI以开始使用。

安装和设置

在项目的根目录中，运行以下命令。

      npx create-react-app react-dark-mode
cd react-dark-mode
    

通过运行以下命令安装chakra-ui 。

      npm install @chakra-ui/core @emotion/core @emotion/styled emotion-theming

运行以下命令启动开发服务器。

      npm start

在App.js中导入并添加ThemeProvider、ColorModeProvider和CSSReset组件。

像这样修改你的App.js。

      import {
  ThemeProvider,
  theme,
  ColorModeProvider,
  CSSReset,
} from "@chakra-ui/core";

function App() {
  return (
    <ThemeProvider theme={theme}>
      <ColorModeProvider>
        <CSSReset />
      </ColorModeProvider>
    </ThemeProvider>
  );
}

export default App;
    

前往https://localhost:3000；您的应用程序现在是空白的。

创建切换组件

在本节中，我们将创建一个新组件，用于在 React 应用程序的暗模式和亮模式之间切换。

在src目录中创建一个名为Toggle.js的新文件。在项目的根目录中运行以下命令来创建该文件。

      cd src
touch Toggle.js
    

将以下代码添加到Toggle.js ；这将在Toggle.js中创建一个空的功能组件。

      import React from 'react'

export default function Toggle() {
    return (
        <div>
            
        </div>
    )
}
    

导入并将此Toggle组件添加到App.js。

      import {
  ThemeProvider,
  theme,
  ColorModeProvider,
  CSSReset,
} from "@chakra-ui/core";
import Toggle from "./Toggle";

function App() {
  return (
    <ThemeProvider theme={theme}>
      <ColorModeProvider>
        <CSSReset />
        <Toggle />
      </ColorModeProvider>
    </ThemeProvider>
  );
}

export default App;
    

添加 Flex 和 Button 组件

从chakar-ui导入Flex并在Toggle组件内部使用它。

      import React from "react";
import { Flex } from "@chakra-ui/core";
export default function Toggle() {
  return (
    <div>
      <Flex
        align="center"
        justify="center"
        height="100vh"
        direction="column"
      ></Flex>
    </div>
  );
}
    

您不会看到变化，但您的应用程序的布局已经改变，这在添加更多组件后将会变得明显。

从chakra-ui导入按钮组件。

      import { Flex, Button } from "@chakra-ui/core";

在Flex内部使用此按钮组件。

      <Flex align="center" justify="center" height="100vh" direction="column">
  <Button size="lg">Toggle Mode</Button>
</Flex>
    

您的应用程序的外观如下。

此按钮目前还不执行任何操作。在下一节中，我们将添加更改模式的逻辑。

添加暗黑模式

从chakra-ui导入useColorMode。

      import { Flex, Button, useColorMode } from "@chakra-ui/core";

使用解构从useColorMode中提取colorMode和toggleColorMode。

      const Toggle = () => {
  const { colorMode, toggleColorMode } = useColorMode();

  return(
...
)
};
    

将toggleColorMode()函数添加到按钮的onClick事件。

      <Button size="lg" onClick={() => toggleColorMode()}>
  Toggle Mode
</Button>
    

完成了；您已经为 React 应用创建并添加了暗模式切换按钮。

您可以使用colorMode来显示当前模式。例如，您可以使用{colorMode}代替Toggle Mode作为按钮文本，它将显示当前模式。

      <Button size="lg" onClick={() => toggleColorMode()}>
  {colorMode}
</Button>
    

它看起来是这样的。

完整代码

这是示例的完整代码。您还可以在GitHub上查看实时示例和代码。

      import React from "react";
import { Button, Flex, useColorMode } from "@chakra-ui/core";

const Toggle = () => {
  const { colorMode, toggleColorMode } = useColorMode();

  return (
    <div>
      <Flex align="center" justify="center" height="100vh" direction="column">
        <Button size="lg" onClick={() => toggleColorMode()}>
         Toggle Mode {colorMode}
        </Button>
      </Flex>
    </div>
  );
};

export default Toggle;
    

结论

在本指南中，我们讨论了向 React 应用添加暗模式切换按钮的分步过程。您可以进一步使用此切换按钮，使用明暗模式图标来更改主题。

以下是一些可能有用的额外资源。

祝你编码愉快！

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

曝光30394浏览1629