README
forked form https://github.com/mzohaibqc/antd-theme-generator
源代码以及源文档: https://github.com/mzohaibqc/antd-theme-generator
更改部分代码以便适用于场景需求
theme-generator
提取源less文件中的颜色属性样式生成一个新的less文件,用于设置系统主题配置
目前针对antd库使用,后续增加可自定义的库以及系统自身使用
Example:
const { generateTheme } = require('theme-generator');
const options = {
antDir: path.join(__dirname, './node_modules/antd'), // antd的目录
stylesDir: path.join(__dirname, './src/styles'), // 项目的样式目录
varFile: path.join(__dirname, './src/styles/variables.less'), // 项目的变量定义文件路径
mainLessFile: path.join(__dirname, './src/styles/index.less'),
themeVariables: ['@primary-color'], // 需要设置主题配色修改的less颜色变量
outputFilePath: path.join(__dirname, './public/color.less'), // if provided, file will be created with generated less/styles
shadeVariables: ['@primary-color'], // 可选,默认@primary-color,生成多层次颜色
}
generateTheme(options).then(less => {
console.log('Theme generated successfully');
})
.catch(error => {
console.log('Error', error);
})
注意:不同变量不要使用同一颜色,不然会被覆盖,设置主题的颜色变量必须包含横线。
eg: @test-color: #ad12ad; // 有效 @test: #ad12ad; // 无效
在入口index.html文件中添加以下代码
<link rel="stylesheet/less" type="text/css" href="/color.less" />
<script>
window.less = {
async: false,
env: 'production'
};
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
你可以使用下面代码更新颜色配置
window.less.modifyVars({
'@primary-color': '#0035ff'
})