如何在React中快速实现深色模式

深色模式已经成为很多应用程序和网站最基本的特性，因为它可以带来非常好的用户体验。因此，在你的项目中实现暗模式是一项非常有用的技能，你可以使用ReactJS和ChakraUI轻松实现暗模式。接下来让我们看看如何使用ChakraUI来建立一个可以介于黑暗和光明之间的网站。开始使用ChakraUI的第一步需要通过在终端中运行以下命令在项目中安装：npmi@chakra-ui/react@emotion/react@emotion/styledframer-motion这将安装ChakraUI，并且您可以开始实施暗模式。第二步是创建一个Theme.js文件，并在里面定义主题信息。Introducechakra-uiimport{extendTheme}from'@chakra-ui/react'inthethemefile接下来，打开index.css文件。该文件是在React应用程序构建期间创建的。此文件中的信息被复制并存储在剪贴板上，现在可以从index.css中删除。修改theme.js文件，它将由两部分组成。第一部分是配置，可以设置一些初始化信息。第二部分是“style:”和“body”中的样式，这些样式是从index.css文件中复制过来的信息，如下图。constthemes={config:{initialColorMode:'light',useSystemColorMode:true,},styles:{global:{body:{“margin”:0,“font-family”:”-apple-system,BlinkMacSystemFont,'SegoeUI'","-w??ebkit-font-smoothing":"antialiased","-moz-osx-font-smoothing":"grayscale",},code:{"font-family":"source-code-pro,Menlo,Monaco,Consolas,"}}}}这个配置包括两部分，两个变量，initialColorMode，它将决定哪种模式是默认的。那么这里要将第二个变量useSystemColorMode设置为true。要在代码的其他部分访问这个常量，我们必须导出它：consttheme=extendTheme({theme})exportdefaulttheme;extendTheme是ChakraUI的一个功能。第3步要启用深色模式，只需将ColorModeScript模块添加到index.js文件即可。constroot=ReactDOM.createRoot(document.getElementById('root'));root.render();第四步，添加深色模式的切换开关，找到要放置开关的组件，使用ChakraUI提供的useColorMode函数，保持颜色模式不变。const{colorMode,toggleColorMode}=useColorMode();请记住从ChakraUI导入“useColorMode”。接下来，创建一个按钮并添加“切换颜色模式”功能作为onClick响应事件：{colorMode==='light'?'Dark':'Light'}passed这样做会创建一个切换按钮，根据当前主题显示“Dark”或“Light”，并允许用户通过单击按钮在两种模式之间切换.在您的应用程序中实现切换开关后，用户应该能够通过单击按钮在暗模式和亮模式之间切换。然后网站的外观应该相应地改变。总结通过介绍ChakraUI框架，我们会发现实现网站的深色模式非常简单，我们只需要进行相应的配置即可。