关于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

相关推荐
开开心心就好37 分钟前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
秋田君7 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
风吹落叶花飘荡8 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
yanlele9 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
烛阴10 小时前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子10 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
DoraBigHead10 小时前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构
前端世界11 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
javascript·ui·harmonyos
@Dream_Chaser11 小时前
uniapp ruoyi-app 中使用checkbox 无法选中问题
前端·javascript·uni-app