React18+Antd5.6.3框架配置主题颜色和主题切换以及跟随系统切换主题

配置主题颜色

ConfigProvider为Ant Design组件提供统一的配置支持。从5.0版本开始，增加了对原色、边框半径、边框颜色等主题的支持，可以动态切换主题、支持多个主题、为部分组件自定义主题变量等等。

在 `ConfigProvider` 中配置主题

//App.tsx
import {Button, ConfigProvider, Space} from "antd";
function App() {
  return (
    <div style={{ background: 'white', height: 'calc(100vh - 40px)', padding: '20px' }}>
        <ConfigProvider theme={{token:{colorPrimary:'#00b96b'}
        }}>
            <Space wrap>
                <Button type="primary">Primary Button</Button>
                <Button>Default Button</Button>
                <Button type="dashed">Dashed Button</Button>
                <Button type="text">Text Button</Button>
                <Button type="link">Link Button</Button>
            </Space>
          
        </ConfigProvider>

    </div>
  )
}

export default App

主题颜色就会变成你设置的颜色，效果：

在 `ConfigProvider`设置暗模式

通过修改算法可以快速生成风格迥异的主题，5.0 版本中默认提供三套预设算法，分别是默认算法 theme.defaultAlgorithm、暗色算法 theme.darkAlgorithm 和紧凑算法 theme.compactAlgorithm。

我们将背景设置为黑色，将主题算法设置为theme.darkAlgorithm。

import {Button, ConfigProvider, Space, theme} from "antd";
function App() {
  return (
    <div style={{ background: 'black', height: 'calc(100vh - 40px)', padding: '20px' }}>
        <ConfigProvider theme={{algorithm:theme.darkAlgorithm}}>
            <Space wrap>
                <Button type="primary">Primary Button</Button>
                <Button>Default Button</Button>
                <Button type="dashed">Dashed Button</Button>
                <Button type="text">Text Button</Button>
                <Button type="link">Link Button</Button>
            </Space>
        </ConfigProvider>

    </div>
  )
}

export default App

效果：

切换深色和浅色主题

import {Button, ConfigProvider, Space, Switch, theme} from "antd";
import {useState} from "react";
function App() {
  //darkMode判断是否出去暗黑模式
  const [darkMode, setDarkMode] = useState(false);
  return (
    <div style={{ background:darkMode ? 'black': 'white', height: 'calc(100vh - 40px)', padding: '20px' }}>
        <ConfigProvider theme={{algorithm:darkMode ? theme.darkAlgorithm :theme.defaultAlgorithm}}>
            <Space wrap>
                <Switch
                    checked={darkMode}
                    checkedChildren="暗黑模式"
                    unCheckedChildren="浅色模式"
                    onChange={() => setDarkMode(!darkMode)}
                />
                <Button type="primary">Primary Button</Button>
                <Button>Default Button</Button>
                <Button type="dashed">Dashed Button</Button>
                <Button type="text">Text Button</Button>
                <Button type="link">Link Button</Button>
            </Space>
        </ConfigProvider>

    </div>
  )
}

export default App

以上代码，在组件内部使用了 React 的 useState 钩子来创建一个状态 darkMode，并使用 setDarkMode 函数来更新该状态。初始状态为 false，表示浅色模式。

<Switch> 组件用于切换暗黑模式和浅色模式，根据 darkMode 的值来显示不同的文本。

效果：浅色模式：暗黑模式：

主题持久化

可以使用localStorage来存储设置的主题。

import {Button, ConfigProvider, Space, Switch, theme} from "antd";
import {useState} from "react";
function App() {
  //darkMode判断是否出去暗黑模式
  const [darkMode, setDarkMode] = useState(localStorage.getItem('darkMode') === 'true');
  return (
    <div style={{ background:darkMode ? 'black': 'white', height: 'calc(100vh - 40px)', padding: '20px' }}>
        <ConfigProvider theme={{algorithm:darkMode ? theme.darkAlgorithm :theme.defaultAlgorithm}}>
            <Space wrap>
                <Switch
                    checked={darkMode}
                    checkedChildren="暗黑模式"
                    unCheckedChildren="浅色模式"
                    onChange={() => {
                        localStorage.setItem('darkMode',String(!darkMode));
                        setDarkMode(!darkMode)
                    }}
                />
                <Button type="primary">Primary Button</Button>
                <Button>Default Button</Button>
                <Button type="dashed">Dashed Button</Button>
                <Button type="text">Text Button</Button>
                <Button type="link">Link Button</Button>
            </Space>
            {/*</Routes>*/}
        </ConfigProvider>

    </div>
  )
}

export default App