1. antd 主题切换

antd 中的动态主题能力来自 umi-plugin-antd-theme，主要思路仍然是将 antd 的变量规则与项目中规则进行抽取，然后进行的 less 的编译。

首先，安装此插件：

➜ npm i umi-plugin-antd-theme --save-dev

umi@3

umi@3 会自动读取插件只需要安装 umi-plugin-antd-theme 即可生效。为了简化使用现在需要通过 config/theme.config.json 来配置主题。

v2 版本

将下面的代码复制到 config/config.*.js 文件中去，最后如下：

const plugins = [['umi-plugin-react',...],['umi-plugin-antd-theme',{theme: [{fileName: 'theme1.css',key:'theme1',modifyVars: {'@primary-color': '#13C2C2','@menu-dark-color': '#324444','@menu-dark-bg': '#5A5A5A',},},{fileName: 'theme2.css',key:'theme2',modifyVars: {'@primary-color': '#4992BF','@menu-dark-color': '#9B9B9B','@menu-dark-bg': '#3A3A3A',},},],// 是否压缩cssmin: true,// css moduleisModule: true,// 忽略 antd 的依赖ignoreAntd: false,// 忽略 pro-layoutignoreProLayout: false,// 不使用缓存cache: true,},],
];

umi@2 版本

在 config/themePluginConfig.ts 添加类似代码：

export default {theme: [...{fileName: 'theme1.css',key: 'theme1',modifyVars: {'@primary-color': '#13C2C2','@menu-dark-color': '#324444','@menu-dark-bg': '#5A5A5A',},},{fileName: 'theme2.css',key: 'theme2',modifyVars: {'@primary-color': '#4992BF','@menu-dark-color': '#9B9B9B','@menu-dark-bg': '#3A3A3A',},},],
};

所有的配置变量都可以在 default.less 找到

配置的 theme 节点数量越多编译越慢，一个 css 文件编译大约需要 1s。

v4 中自带了 theme 插件，但是只有在 Pro 部署的时候才打开，你可以删除判断，直接打开，比如：

plugins.push(['umi-plugin-antd-theme', themePluginConfig]);

2. 自定义组件

在 global.less 文件中，添加如下代码：

.body-wrap-theme1 {// theme1下的全局变量在此定义--font-color: #000000;--bg-color: #011313;
}.body-wrap-theme2 {// theme2下的全局变量在此定义--font-color: #ffffff;--bg-color: #ffffff;
}

自定义组件的 index.less 中用法如下：

.flatButton{color: var(--font-color);background: var(--bg-color);
}

3.主题切换

在主题切换的方法中添加如下代码，可以根据自己需要进行修改，比如添加从本地获取上次主题配置项等：

3.1 与 SettingDrawer 一起使用

建议配置 SettingDrawer 一起使用，umi-plugin-antd-theme 插件会将主题配置信息挂载到 window.umi_plugin_ant_themeVar，SettingDrawer 会去读这个配置自动生成相应的 UI。

3.2 自定义的使用方式

theme1 = true;
onClick = () => {let styleLink = document.getElementById('theme-style');let body = document.getElementsByTagName('body')[0];if (styleLink) {// 假如存在id为theme-style 的link标签，直接修改其hrefif (this.theme1) {styleLink.href = '/theme/theme1.css'; // 切换 antd 组件主题body.className = 'body-wrap-theme1'; // 切换自定义组件的主题} else {styleLink.href = '/theme/theme2.css';body.className = 'body-wrap-theme2';}this.theme1 = !this.theme1;} else {// 不存在的话，则新建一个styleLink = document.createElement('link');styleLink.type = 'text/css';styleLink.rel = 'stylesheet';styleLink.id = 'theme-style';if (this.theme1) {styleLink.href = '/theme/theme1.css';body.className = 'body-wrap-theme1';} else {styleLink.href = '/theme/theme2.css';body.className = 'body-wrap-theme2';}this.theme1 = !this.theme1;document.body.append(styleLink);}
};

【开发】3.6-动态主题相关推荐

虚拟研讨会:移动Web应用开发技术最新动态
虚拟研讨会:移动Web应用开发技术最新动态 2011年03月02日为了掌握移动Web应用开发的最新动态,InfoQ邀请一些该领域最流行的库.工具和框架的缔造者,组织了一场虚拟研讨会. Michael ...
连续时间动态主题模型（Continuous Time Dynamic Topic Models, cDTM）
用于分析和管理大量电子文档的工具变得越来越重要.近年来,离散数据的分层贝叶斯模型,已成为一种广泛使用的文本探索和预测分析方法. 主题模型,例如潜在Dirichlet分配(LDA)和更一般的离散分量分析 ...
基于less和sass在webpack或vite中的动态主题的实现方案
2021-12-26更新在线动态主题的实现,比原文中提到的方案六的插件更加易用,具有如下特点: 使用成本很低跟ui框架无关,Element-ui.iview.Ant-design 等等等(只要基于 ...
android 实现表格横向混动_Flutter混合开发和Android动态更新实践
Flutter混合开发和Android动态更新实践感谢闲鱼和csdn的文章给的思路: 本篇是实践性文章包含两部分将Flutter工程编译后的文件集成到Android项目将Flutter代码热更新 ...
iTOP-4418开发板支持动态调频,AXP228电源管理,预留锂电池接口，内置充放电电路及电量计...
iTOP-4418开发板支持动态调频,AXP228电源管理,预留锂电池接口,内置充放电电路及电量计核心板320PIN全引出,16G存储高配版本,核心板4418/6818全兼容,并跨行业大量应用系 ...
降低深度学习开发门槛，“动态图+高层API”能带来多大的便利？
"在深度学习技术面前,我感觉到深深的危机感." 已经有无数人曾经吐槽过这一点,因为深度学习趋势不可阻挡,但其入门门槛之高,落地难度之大,又往往会把开发者挡于门外. 如何降低深度学习 ...
Windows——插件：动态主题（轻量级每日自动换壁纸）
动态主题
系统主题修改桌面嵌入html,更换主题桌面主题 Win7桌面动态主题怎么更换
Win10怎么更换主题,win10怎么更换桌面背景 Win10系统更换主题方法在桌面空白区域点击右键,选择"个性化". 选择你喜欢的主题,点击"下载".下载后 ...
web开发(脚本和动态语言)
web开发(脚本和动态语言) _root.createTextField("mytext", 1, 50, 50, 100,20); mytext.multilance=false ...
android 加载三方so的方法_Android开发教程之动态加载so库文件的方法
Android开发教程之动态加载so库文件的方法,我想对于静态加载 so 库文件,大家都已经很熟悉了,这里就不多说了.在 Android 开发中调用动态库文件(*.so)都是通过 jni 的方式,而静 ...

【开发】3.6-动态主题

文章目录