如何在 React 中快速實現暗黑模式

作者：夢回丶故里 2023-01-01 23:42:22

通過引入 Chakra UI 框架，我們會發現實現網站的暗黑模式變得非常的簡單，我們只需要進行相應的配置即可。

暗黑模式已成為許多應用程序和網站的最基本功能，因為它可以帶來非常好的用戶體驗。因此在項目中實現暗模式是一項非常有用的技能，使用 ReactJS 和 Chakra UI 可以輕松實現暗模式。

接下來讓我們看看如何使用 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(
    <React.StrictMode>
        <ChakraProvider theme={theme}>
            <ColorModeScript initialColorMode={theme.config.initialColorMode} />
            <App/>
        </ChakraProvider>
    </React.StrictMode>
);

第四步

要為深色模式添加切換開關，可以找到要放置開關的組件，并使用 Chakra UI 提供的 useColorMode 功能使顏色模式保持不變。

const {colorMode, toggleColorMode} = useColorMode();

記得從 ChakraUI 導入“useColorMode”。

接下來，創建一個按鈕并添加“切換顏色模式”功能作為 onClick 的響應事件：

<Button notallow={toggleColorMode}>
    {colorMode==='light' ? 'Dark' : 'Light'}
</Button>

通過執行此操作，將創建一個切換按鈕，該按鈕根據當前主題顯示“深色”或“淺色”，并允許用戶通過單擊按鈕在兩種模式之間切換。

在應用程序中實現切換開關后，用戶應該能夠通過單擊按鈕在深色和淺色模式之間切換。然后，網站的外觀應相應更改。

總結

通過引入 Chakra UI 框架，我們會發現實現網站的暗黑模式變得非常的簡單，我們只需要進行相應的配置即可。

責任編輯：武曉燕來源：程序那些事兒

React 框架暗黑模式