关于umjs的主题切换实现

注意本文写作日期2024年7月7日 ,我目前是最新版本的
注意:该功能仅 antd v5 可用

最后目标实现

先说一下,umijs布局默认是内置@ant-design/pro-layout布局写的

看一下官网ProLayout - 高级布局布局与菜单

直接在app.tsx加入以下,umijs会读取对应信息配置到ProLayout

jsx 复制代码
...
export const layout = () => {
  return {
    logo: logo,
    rightContentRender: () => <RightContentRender />,
    menu: {
      locale: false,
    },
  };
};
...

在创建RightContentRender 组件

jsx 复制代码
import { Layout, Space, theme, Switch } from 'antd';
import {useAntdConfigSetter } from 'umi';
const { darkAlgorithm, defaultAlgorithm } = theme;

export default function Page() {
  const setAntdConfig = useAntdConfigSetter();
  // const antdConfig = useAntdConfig();
  return (
    <Layout>
      <Space>
        切换主题
        <Switch
          onChange={(data) => {
            // 此配置会与原配置深合并
            setAntdConfig({
              theme: {
                algorithm: [
                  data ? darkAlgorithm : defaultAlgorithm,
                ],
              },
            });
          }}
        ></Switch>
      </Space>
    </Layout>
  );
}

同时还要允许运行时修改配置

在你自己创建了config.ts文件或默认文件.umirc.ts里面加入

js 复制代码
 antd: {
    // compact: true,紧凑主题
    configProvider: {}
  },

参考Umijs

相关推荐
景天科技苑11 分钟前
【vue3+vite】新一代vue脚手架工具vite,助力前端开发更快捷更高效
前端·javascript·vue.js·vite·vue项目·脚手架工具
石小石Orz20 分钟前
Three.js + AI:AI 算法生成 3D 萤火虫飞舞效果~
javascript·人工智能·算法
小行星12522 分钟前
前端预览pdf文件流
前端·javascript·vue.js
join823 分钟前
解决vue-pdf的签章不显示问题
javascript·vue.js·pdf
小行星12529 分钟前
前端把dom页面转为pdf文件下载和弹窗预览
前端·javascript·vue.js·pdf
土豆湿1 小时前
拥抱极简主义前端开发:NoCss.js 引领无 CSS 编程潮流
开发语言·javascript·css
J总裁的小芒果1 小时前
Vue3 el-table 默认选中 传入的数组
前端·javascript·elementui·typescript
Lei_zhen961 小时前
记录一次electron-builder报错ENOENT: no such file or directory, rename xxxx的问题
前端·javascript·electron
辣条小哥哥1 小时前
electron主进程和渲染进程之间的通信
javascript·electron·ecmascript
咖喱鱼蛋1 小时前
Electron一些概念理解
前端·javascript·electron