Ant Design Pro中手动切换黑暗主题

生产环境中取消显示SettingDrawer

虽然Ant Design Pro内置了SettingDrawer, 上面有切换主题的功能

这个SettingDrawer在文档里说只在开发模式下出现, 但是我用的这个版本打包部署到生产环境仍然会显示, 需要/src/app.tsx 中添加下面这一行让它只在开发环境中出现

好, 进入正题

Ant Design Pro实现手动切换黑暗模式

AntDesignPro没有提供动态切换的接口, 那么我们就要自己实现一下

自带的SettingDrawer中的黑暗主题是用 darkreader 来实现的

在ProComponent的源码中可以找到切换的实现方式

---

AntDesignPro没有提供这个函数的调用接口, 既然有现成的, 那我们直接复制这个函数到自己的项目中用

然后Ctrl C+V一下, 这个方法就是我的了😎

之后在项目文件夹/src/components/RightContent/index.tsx 中添加黑暗模式的切换开关

这里添加一个Switch组件, 开关的效果是这样的

要实现记住用户所选的主题的话, 就需要把当前主题储存下来, 这里用浏览器的LocalStorage来储存

/** 省略 **/
const GlobalHeaderRight: React.FC = () => {
	/** 省略 **/

	const switchDarkMode = () => {
	//点击开关触发主题的切换
	  localStorage.setItem("darkMode", darkMode ? "0" : "1");
	  darkMode = !darkMode;
		updateDarkMode(darkMode); //这里是调用上面复制的updataTheme方法
	};
	//设置一个darkMode变量, 来切换开关的状态
	let darkMode = localStorage.getItem("darkMode") == "1";
	//更新一下黑暗模式的状态
	updateDarkMode(darkMode);

	/** 省略 **/
	return (
		/** 省略 **/
    
		//开关组件在这定义
		<Switch checkedChildren="🌜" unCheckedChildren="🌞" onClick={switchDarkMode} defaultChecked={darkMode} size={"small"}></Switch>
	);
	/** 省略 **/
};
export default GlobalHeaderRight;