0.0.1 • Published 3 years ago

syr-test-plugin v0.0.1

Weekly downloads
-
License
ISC
Repository
github
Last release
3 years ago

ng-antd-theme-generator

此插件是在antd动态换肤的基础上修改,对ng-zorro-antd的动态换肤的实现; This script generates color specific styles/less file which you can use to change theme dynamically in browser

环境要求

  • angular 7.x
  • ng-zorro-antd 7.x

实例:

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

const options = {
  antDir: path.join(__dirname, "./node_modules/ng-zorro-antd"), //ng-zorro-antd包位置
  stylesDir: path.join(__dirname, "./src/theme"),               //指定皮肤文件夹
  varFile: path.join(__dirname, "./src/theme/variables.less"),  //自己设置默认的主题色,动态定义less变量值
  mainLessFile: path.join(__dirname, "./src/theme/index.less"),
  indexFileName: "./src/index.html",
  outputFilePath: path.join(__dirname, './src/assets/color.less'), //输出到什么地方
  themeVariables: [
    // 这里写要改变的主题变量
    '@primary-color',
    '@success-color',
    '@warning-color',
    '@error-color',
    '@info-color',
    '@layout-header-background'
  ],
  generateOnce: false
}

generateTheme(options);

Note: include all color variables in varFile that you want to change dynamically and assign them unique color codes. Don't assign same color to two or more variables and don't use #fff, #ffffff, #000 or #000000. If you still want white or black color as default, slightly change it e.g. #fffffe or #000001 which will not replace common background colors from other components.

Add following lines in your main html file

<body>
    <link rel="stylesheet/less" type="text/css" href="assets/color.less">
    <app-root>
    </app-root>
    <script src="assets/less.min.js"></script>
</body

Now you can update colors by updating less variables like this

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