antd 黑暗模式 （v5 react）

 不知道为啥 🤷 官网根本没写怎么切换 

1. 开启这个东西，是用configprovide

import { ConfigProvider, theme } from 'antd';


<ConfigProvider
      theme={{
        algorithm: isDark ? theme.darkAlgorithm : theme.defaultAlgorithm,
      }}
    >

2. 然后一些默认的，会自己定义好，没定义的，就需要自己写

观察切换后，模式有了什么改变

好吧，它没改变，这个东西难道要自己写。。，，

 // 正确初始化状态（建议使用布尔值）
  const [isDark, setIsDark] = useState(false);

  // 简洁的切换方法
  const toggleTheme = () => {
    setIsDark((prev) => !prev);
    if (!isDark) {
      document.body.setAttribute('dark-theme', 'dark');
    } else {
      document.body.removeAttribute('dark-theme');
    }
  };

发现body上加了dark-theme，那么就应该以body为区分，做一些事情

body[tomato-theme='dark'] .content-inner{
  background-color: yellow;
}

要么单独定义

要么就用一套通用的，在root里把这件事做了，用的时候只用变量

:root {
  --color-primary-white: green;
}


:root body[dark-theme="dark"]{
    --color-primary-white: yellow;
  }

可以看到，只要使用  

background-color: var(--color-primary-white);

就有效了

参考

https://juejin.cn/post/7301959466399465526

https://juejin.cn/post/7242284648021164091?from=search-suggest