建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
暗黑模式已成為許多應(yīng)用程序和網(wǎng)站的最基本功能，因?yàn)樗梢詭?lái)非常好的用戶(hù)體驗(yàn)。因此在項(xiàng)目中實(shí)現(xiàn)暗模式是一項(xiàng)非常有用的技能，使用 ReactJS 和 Chakra UI 可以輕松實(shí)現(xiàn)暗模式。
成都創(chuàng)新互聯(lián)公司主要從事網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)歷下,十多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專(zhuān)業(yè),歡迎來(lái)電咨詢(xún)建站服務(wù):028-86922220
接下來(lái)讓我們看看如何使用 Chakra UI 來(lái)構(gòu)建一個(gè)可以在深色和淺色之間的網(wǎng)站。
第一步
要開(kāi)始使用 Chakra UI，需要通過(guò)在終端中運(yùn)行以下命令將其安裝在項(xiàng)目中：
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
這樣就安裝好了 Chakra UI，然后就可以開(kāi)始實(shí)現(xiàn)暗模式了。
第二步
創(chuàng)建一個(gè) Theme.js 文件，然后在其中定義主題信息。
在主題文件中引入 chakra-ui
import {extendTheme} from '@chakra-ui/react'接下來(lái)，打開(kāi)index.css?文件。
此文件是在 React 應(yīng)用程序制作過(guò)程中創(chuàng)建的。復(fù)制此文件中的信息并將其存儲(chǔ)在剪貼板中，現(xiàn)在可以將其從 index.css 中刪除。
修改 theme.js文件，它將由兩部分組成。
第一部分是配置，可以設(shè)置一些初始化信息。
第二部分是 "style：" 和 "body" 中的樣式，這些式樣是從index.css?文件中復(fù)制的信息，如下所示。
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,"
}
}
}
}該配置由兩部分組成，兩個(gè)變量，initialColorMode，它將確定哪種模式是默認(rèn)模式。
然后第二個(gè)變量 useSystemColorMode 應(yīng)在此處設(shè)置為 true。
要在代碼的其他部分訪(fǎng)問(wèn)此常量，我們必須將其導(dǎo)出：
const theme = extendTheme({theme})
export default theme;extendTheme 是 ChakraUI 的一個(gè)函數(shù)。
第三步
要啟用暗模式，只需要將 ColorModeScript? 模塊添加到 index.js 文件中。
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
);第四步
要為深色模式添加切換開(kāi)關(guān)，可以找到要放置開(kāi)關(guān)的組件，并使用 Chakra UI 提供的 useColorMode 功能使顏色模式保持不變。
const {colorMode, toggleColorMode} = useColorMode();記得從 ChakraUI 導(dǎo)入“useColorMode”。
接下來(lái)，創(chuàng)建一個(gè)按鈕并添加“切換顏色模式”功能作為 onClick 的響應(yīng)事件：
通過(guò)執(zhí)行此操作，將創(chuàng)建一個(gè)切換按鈕，該按鈕根據(jù)當(dāng)前主題顯示“深色”或“淺色”，并允許用戶(hù)通過(guò)單擊按鈕在兩種模式之間切換。
在應(yīng)用程序中實(shí)現(xiàn)切換開(kāi)關(guān)后，用戶(hù)應(yīng)該能夠通過(guò)單擊按鈕在深色和淺色模式之間切換。然后，網(wǎng)站的外觀(guān)應(yīng)相應(yīng)更改。
總結(jié)
通過(guò)引入 Chakra UI 框架，我們會(huì)發(fā)現(xiàn)實(shí)現(xiàn)網(wǎng)站的暗黑模式變得非常的簡(jiǎn)單，我們只需要進(jìn)行相應(yīng)的配置即可。
標(biāo)題名稱(chēng)：如何在 React 中快速實(shí)現(xiàn)暗黑模式
網(wǎng)頁(yè)鏈接：http://www.5511xx.com/article/cccspcj.html
