1 Star 0 Fork 0

MT / antd-theme-generator

加入 Gitee
与超过 600 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README.md

antd-theme-generator

This script generates color specific styles/less file which you can use to change theme dynamically in browser

Example:

const { generateTheme } = require('antd-theme-generator');

const options = {
  antDir: path.join(__dirname, './node_modules/antd'),
  stylesDir: path.join(__dirname, './src'), // all files with .less extension will be processed
  varFile: path.join(__dirname, './src/styles/variables.less'), // default path is Ant Design default.less file
  themeVariables: ['@primary-color'],
  outputFilePath: path.join(__dirname, './public/color.less') // if provided, file will be created with generated less/styles
  customColorRegexArray: [/^fade\(.*\)$/], // An array of regex codes to match your custom color variable values so that code can identify that it's a valid color. Make sure your regex does not adds false positives.
}

generateTheme(options).then(less => {
  console.log('Theme generated successfully');
})
.catch(error => {
  console.log('Error', error);
})
Property Type Default Descript
antdDir string - This is path to antd directory in your node_modules
stylesDir string, [string] - Path/Paths to your custom styles directory containing .less files
varFile string - Path to your theme related variables file
themeVariables array ['@primary-color'] List of variables that you want to dynamically change
outputFilePath string - Generated less content will be written to file path specified otherwise it will not be written. However, you can use returned output and write in any file as you want
customColorRegexArray array ['color', 'lighten', 'darken', 'saturate', 'desaturate', 'fadein', 'fadeout', 'fade', 'spin', 'mix', 'hsv', 'tint', 'shade', 'greyscale', 'multiply', 'contrast', 'screen', 'overlay'].map(name => new RegExp(${name}\(.*\)))] This array is to provide regex which will match your color value, most of the time you don't need this

Add following lines in your main html file

<link rel="stylesheet/less" type="text/css" href="/color.less" />
<script>
  window.less = {
    async: true,
    env: 'production'
  };
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>

Now you can update colors by updating less variables like this

window.less.modifyVars({
  '@primary-color': '#0035ff'
})

仓库评论 ( 0 )

你可以在登录后,发表评论

简介

取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/MT007/antd-theme-generator.git
git@gitee.com:MT007/antd-theme-generator.git
MT007
antd-theme-generator
antd-theme-generator
master

搜索帮助