import { Switch, theme } from 'antd';
import React, { useEffect, useState } from 'react';
import { useAntdConfig, useAntdConfigSetter } from 'umi';
const { darkAlgorithm, defaultAlgorithm } = theme;
export default function ThemePage() {
const setAntdConfig = useAntdConfigSetter();
const antdConfig = useAntdConfig();
const [checked, setChecked] = useState<boolean>(false);
useEffect(() => {
// 此配置会与原配置深合并
setAntdConfig({
theme: {
algorithm: [checked ? darkAlgorithm : defaultAlgorithm],
},
});
// or
// setAntdConfig((config) => {
// const algorithm = config.theme!.algorithm as MappingAlgorithm[];
// if (algorithm.includes(darkAlgorithm)) {
// config.theme!.algorithm = [defaultAlgorithm];
// } else {
// config.theme!.algorithm = [darkAlgorithm];
// }
// return config;
// });
}, [checked]);
return (
<Switch
checked={checked} // antdConfig?.theme?.algorithm).includes(darkAlgorithm)
onChange={(data) => {
setChecked(data);
}}
></Switch>
);
}
两种方式都可以,选其中一个就行