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

小半 • 2024年3月2日下午5:58 • 前端开发 • 阅读 304

随系统切换主题

使用媒体查询matchMedia()来获取操作系统配色。

matchMedia('(prefers-color-scheme: dark)').matches)

import {Button, ConfigProvider, Space, Switch, theme} from "antd";
import {useState} from "react";
function App() {
  //darkMode判断是否出去暗黑模式
  const [darkMode, setDarkMode] = useState(
      localStorage.getItem('darkMode') === 'true'||
      (localStorage.getItem('darkMode') !== 'false' && matchMedia('(prefers-color-scheme: dark)').matches)
  );
  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>
        </ConfigProvider>

    </div>
  )
}

export default App

如果本地存储中的darkMode为“深色”，或者本地存储中的darkMode不是“浅色”且操作系统配色方案首选项为深色，则 darkMode 将设置为 true。

当我们切换主题时，darkMode会被更新。

现在我们存起来的是状态darkMode，是true或者是false。这里我们可以优化一下，将特定的主题名称也存起来。

import {Button, ConfigProvider, Space, Switch, theme} from "antd";
import {useState} from "react";
function App() {
  //darkMode判断是否出去暗黑模式
  const [darkMode, setDarkMode] = useState(
      localStorage.getItem('theme') === 'dark'||
      (localStorage.getItem('theme') !== 'light' && matchMedia('(prefers-color-scheme: dark)').matches)
  );
  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('theme',darkMode?'light':'dark');
                        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