如何在 React 中快速实现暗黑模式

暗黑模式已成为许多应用程序和网站的最基本功能，因为它可以带来非常好的用户体验。因此在项目中实现暗模式是一项非常有用的技能，使用 ReactJS 和 Chakra UI 可以轻松实现暗模式。

成都创新互联公司主要从事网站设计、网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务历下,十多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220

接下来让我们看看如何使用 Chakra UI 来构建一个可以在深色和浅色之间的网站。

第一步

要开始使用 Chakra UI，需要通过在终端中运行以下命令将其安装在项目中：

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

这样就安装好了 Chakra UI，然后就可以开始实现暗模式了。

第二步

创建一个 Theme.js 文件，然后在其中定义主题信息。

在主题文件中引入 chakra-ui

import {extendTheme} from '@chakra-ui/react'

接下来，打开index.css文件。

此文件是在 React 应用程序制作过程中创建的。复制此文件中的信息并将其存储在剪贴板中，现在可以将其从 index.css 中删除。

修改 theme.js文件，它将由两部分组成。

第一部分是配置，可以设置一些初始化信息。

第二部分是 "style：" 和 "body" 中的样式，这些式样是从index.css文件中复制的信息，如下所示。

const themes= {
    config:{
        initialColorMode: 'light',
        useSystemColorMode: true,
    },
    styles:{
        global:{
            body:{
                "margin":0,
                "font-family":"-apple-system,BlinkMacSystemFont,'Segoe UI'",
                "-webkit-font-smoothing":"antialiased",
                "-moz-osx-font-smoothing":"grayscale",
            },
            code:{
                "font-family":"source-code-pro,Menlo,Monaco,Consolas,"
            }

        }
    }
}

该配置由两部分组成，两个变量，initialColorMode，它将确定哪种模式是默认模式。

然后第二个变量 useSystemColorMode 应在此处设置为 true。

要在代码的其他部分访问此常量，我们必须将其导出：

const theme = extendTheme({theme})

export default theme;

extendTheme 是 ChakraUI 的一个函数。

第三步

要启用暗模式，只需要将 ColorModeScript 模块添加到 index.js 文件中。

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    
        
            
            
        
    
);

第四步

要为深色模式添加切换开关，可以找到要放置开关的组件，并使用 Chakra UI 提供的 useColorMode 功能使颜色模式保持不变。

const {colorMode, toggleColorMode} = useColorMode();

记得从 ChakraUI 导入“useColorMode”。

接下来，创建一个按钮并添加“切换颜色模式”功能作为 onClick 的响应事件：

通过执行此操作，将创建一个切换按钮，该按钮根据当前主题显示“深色”或“浅色”，并允许用户通过单击按钮在两种模式之间切换。

在应用程序中实现切换开关后，用户应该能够通过单击按钮在深色和浅色模式之间切换。然后，网站的外观应相应更改。

总结

通过引入 Chakra UI 框架，我们会发现实现网站的暗黑模式变得非常的简单，我们只需要进行相应的配置即可。

文章名称：如何在 React 中快速实现暗黑模式
文章网址：http://www.csdahua.cn/qtweb/news11/111761.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：快上网

成都快上网为您推荐相关内容