本文主要是基于 umi + antd 动态主题色 优化升级。
效果如下：
GitHub 源码：umi-antd-dynamic-theme master 分支
上一篇文章，动态主题色是有一些问题的，主要体现在：
1：开发人员根据流程操作配置，需要更改变化 4 个地方，
xxx.less，xxx.theme.less，public/styles/components.less 和 config/path.config.ts， 比较繁琐。2：编译之后，会产生多个 less 文件，请求几十个 less 文件，会有一定的性能影响；
3：每个 xxx.theme.less 文件都需要在头部引入对应的主题色变量；
4：首次请求 less.min.js 库会两次渲染执行
less.refresh（看源码可知），其中一次执行less.refresh，没有传 modifyVars 变量，导致有时候主题色无效问题。
接下来分别对上面几个问题进行优化解决：
问题一
1：开发人员根据流程操作配置，需要更改变化 4 个地方，
xxx.less，xxx.theme.less，public/styles/components.less 和 config/path.config.ts， 比较繁琐
针对 xxx.less 样式文件，拆分出来 xxx.theme.less主题色样式文件，我觉得是必须的，如果不拆分的话，其实也是可以的，但是，会导致一个问题，就是除了主题色之外的所有样式文件都会被编译，会有一定的性能，其实也是不必要的。
针对 public/styles/components.less 和 config/path.config.ts 的手动配置，这个是可以通过脚本自动完成，没有必要每个人都是手动配置，这是可以优化的地方，但是，还可以继续优化，就是根本就可以不用这两个文件配置了，看如下问题2。
问题二
2：编译之后，会产生多个 less 文件，请求几十个 less 文件，会有一定的性能影响
编译之后，会产生多个 less 文件，如下图所示：
要解决这个问题，思路就是将生成的所有 less 文件，全部统一打包为一个自定义的 less 文件，所以，编写了如下脚本，去扫描项目中所有的 xxx.theme.less文件。
新建 scripts/theme/themeScripts.js 文件，脚本如下：
// 主题色脚本
const fs = require('fs');
const path = require('path');
const chalk = require('chalk');
const { promisify } = require('util');
const themeVars = require('./../../config/theme');
const glob = promisify(require('glob'));
const root = './';
const customPath = './public/styles/custom.theme.less';
Main();
async function Main() {
init();
start();
}
function init() {
// 清空
fs.writeFileSync(customPath, '', 'utf8');
// 主题色变量初始值，跟 src/utils/index.ts 中 less.modifyVars 定义的变量相对应。
for(let key in themeVars) {
fs.appendFileSync(customPath, `${key}: ${themeVars[key]};\n`, 'utf8');
}
}
async function start() {
const rootPath = path.resolve(root);
const fileList = await glob('src/**/*.theme.less', { cwd: rootPath, ignore: ['node_modules/**', 'src/.umi/**', 'src/.umi-production/**'] });
// global.theme.less 在最前面，优先级最低
const otherList = [];
const globalFile = fileList.filter(file => {
if (file.indexOf('global.theme.less') > -1) {
return true;
}
otherList.push(file);
return false;
});
globalFile.concat(otherList).forEach((filePath) => {
writeFile(rootPath, filePath);
});
console.info(chalk.greenBright('恭喜您, 主题文件扫描完成！！！')); // eslint-disable-line
}
// 写文件
function writeFile(rootPath, filePath) {
const bufferContent = fs.readFileSync(path.resolve(rootPath, filePath));
const content = bufferContent.toString('utf8');
fs.appendFileSync(customPath, `\n// ${filePath}\n${content}`, 'utf8');
}
module.exports = Main;
该脚本其实把问题一、问题二、问题三都解决了，对该脚本说明如下：
- 1 node 使用的是 CommonJS 服务器端 js 模块化的规范，所以对模块化导入导出需要使用 module.exports，主题色变量直接使用了项目初始化配置的
config/theme.ts变量，所以，需要把文件从 ts 改为 js，同时config/theme.ts的导出需要改为module.exports导出，如下图：
2 脚本处理把
global.theme.less主题色写在最前面，优先级最低，页面可以覆盖全局样式；3 扫描所有的
xxx.theme.less，写入自定义的 less 文件：public/styles/custom.theme.less;4 需要在上一篇文章说的
public/styles/components.less文件引入custom.theme.less，如下图：
问题三
3：每个 xxx.theme.less 文件都需要在头部引入对应的主题色变量；
自定义的变量和主题色变量都在 config/theme.js 中定义，同时，通过上面的脚本，已经读取 config/theme.js 中所有定义的变量，写入了 custom.theme.less 文件的头部，所以，页面的 xxx.theme.less 文件就不需要再引入对应的主题色变量。
问题四
4：首次请求 less.min.js 库会两次渲染执行 less.refresh（看源码可知），其中一次执行 less.refresh，没有传 modifyVars 变量，导致有时候主题色无效问题
问题四是实际项目出现的问题，该问题是偶现的，有时候会出现主题色改变成功了，然后又失效了，网络慢的时候特别明显，也是很致命的一个问题，有些人会出现该问题，有些人不会。
查看 less.js 的源码，发现 less 会在页面加载完成时，调用 less.refresh 方法刷新，而该方法没有传 modifyVars 相关的变量，如下：
而在我们自定义的触发 less.modifyVars 方法是需要有主题色相关的变量，源码如下：
页面触发 less.modifyVars，跟 less.pageLoadFinished 的触发是随机，没有顺序的，才导致以上偶现的问题，解决方法就是把 less.pageLoadFinished 注释掉。
配置步骤
1：把 config/theme.ts 改 config/theme.js，把导出 export default 改为 module.exports
2：删除 config/path.config.ts 文件，同时，删除 config/config.ts 对该文件的引用
3：新建 public/styles/custom.theme.less 文件
4：把 public/styles/components.less 中的内容，更改为：
@import "./antd.theme.less";
@import "./custom.theme.less";
- 5：新建 scripts/theme/themeScripts.js 文件，编写如下脚本：
// 主题色脚本
const fs = require('fs');
const path = require('path');
const chalk = require('chalk');
const { promisify } = require('util');
const themeVars = require('./../../config/theme');
const glob = promisify(require('glob'));
const root = './';
const customPath = './public/styles/custom.theme.less';
Main();
async function Main() {
init();
start();
}
function init() {
// 清空
fs.writeFileSync(customPath, '', 'utf8');
// 主题色变量初始值，跟 src/utils/index.ts 中 less.modifyVars 定义的变量相对应。
for(let key in themeVars) {
fs.appendFileSync(customPath, `${key}: ${themeVars[key]};\n`, 'utf8');
}
}
async function start() {
const rootPath = path.resolve(root);
const fileList = await glob('src/**/*.theme.less', { cwd: rootPath, ignore: ['node_modules/**', 'src/.umi/**', 'src/.umi-production/**'] });
// global.theme.less 在最前面，优先级最低
const otherList = [];
const globalFile = fileList.filter(file => {
if (file.indexOf('global.theme.less') > -1) {
return true;
}
otherList.push(file);
return false;
});
globalFile.concat(otherList).forEach((filePath) => {
writeFile(rootPath, filePath);
});
console.info(chalk.greenBright('恭喜您, 主题文件扫描完成！！！')); // eslint-disable-line
}
// 写文件
function writeFile(rootPath, filePath) {
const bufferContent = fs.readFileSync(path.resolve(rootPath, filePath));
const content = bufferContent.toString('utf8');
fs.appendFileSync(customPath, `\n// ${filePath}\n${content}`, 'utf8');
}
module.exports = Main;
6：引入更改源码后的 less.min.js 库（less.4x.min.js），具体在本人 GitHub 代码库下载；
7：更改优化后的 utils 主题色方法，如下：
function _changeTheme(themeColor: string) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
if (!(window as any).less) return;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
(window as any).less.modifyVars({
'@primary-color': themeColor,
'@header-bar-visible': 'visible',
});
}
let lessNodesAppended: boolean = false;
/**
* 动态更改主题色
* @param {string} themeColor 主题颜色
*/
export function onChangeTheme(themeColor: string) {
if (!lessNodesAppended) {
// 插入 less.js，和 颜色主题.less
const lessConfigNode = document.createElement('script');
const lessScriptNode = document.createElement('script');
const lessStyleNode = document.createElement('link');
lessStyleNode.setAttribute('rel', 'stylesheet/less');
lessStyleNode.setAttribute('href', '/styles/components.less'); // public 目标下
// https://lesscss.org/usage/#api
// env: 'production' development
lessConfigNode.innerHTML = `
window.less = {
env: 'production',
async: true,
javascriptEnabled: true
};
`;
lessScriptNode.src = '/less.4x.min.js';
lessScriptNode.async = true;
lessScriptNode.onload = () => {
_changeTheme(themeColor);
lessScriptNode.onload = null;
};
document.body.appendChild(lessStyleNode);
document.body.appendChild(lessConfigNode);
document.body.appendChild(lessScriptNode);
lessNodesAppended = true;
} else {
_changeTheme(themeColor);
}
}
- 8：在 package.json 的 scripts 引入执行主题色脚本，同时，在 start 和 build 之前，每次自动执行扫描主题色，如下：
"scripts": {
"start": "npm run theme && umi dev",
"build": "npm run theme && umi build",
"theme": "node scripts/theme/themeScripts.js",
},
- 9：安装脚本需要的库，glob 和 chalk：
npm i glob -S
npm i chalk -S
-10：注意自定义文件 xxx.theme.less 使用 css 写法，而不是采用 @prefix 前缀变量写法，因为 @prefix 写法有时候会失效，正常样式写法示例如下：
.c-list-more{
color: @primary-color;
}
.c-list-more:hover{
color: @primary-color;
}
.c-list-item .title::before{
background-color: @primary-color;
}
.c-list-item .title:hover{
color: lighten(@primary-color, 15%);
}
.c-list-item .desc{
color: @primary-color;
}
开发人员主题色 less 样式编写
通过如上配置，开发人员只需要编写 xxx.theme.less 即可，不再需要编写其他配置文件。
