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