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>
  );
}

两种方式都可以，选其中一个就行