vant-theme-generator

安装

npm i -D vant-theme-generator
# or
yarn add -D vant-theme-generator

入参描述

属性	类型	默认值	描述
vantDir	string	-	vant路径
vantStylesDir	string	vant/lib/style/*.less	vant中less所在目录
stylesDir	string	-	项目less
themeVarFile	string	-	color default文件
outputFilePath	string	-	输出文件目录
themeVariables	string	-	需要替换的颜色变量
customColorRegexArray	Array<string>	[]	自定义颜色正则

Example

setting vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: {},
          javascriptEnabled: true,
        },
      },
    },
  },
};

script color.js

const path = require('path');
const { generateTheme } = require('../../index');
const join = (p) => path.join(__dirname, p);

const options = {
  vantDir: join('./node_modules/vant'),
  stylesDir: join('./src/styles'),
  themeVarFile: join('./src/theme/default.less'),
  outputFilePath: join('./public/color.less'),
  themeVariables: [
    '@button-default-color',
    '@button-default-background-color',
    '@button-default-border-color',
    '@button-primary-color',
    '@button-primary-background-color',
    '@button-primary-border-color',
    '@button-info-color',
    '@button-info-background-color',
    '@button-info-border-color',
    '@button-danger-color',
    '@button-danger-background-color',
    '@button-danger-border-color',
    '@button-warning-color',
    '@button-warning-background-color',
    '@button-warning-border-color',
    '@button-plain-background-color',
  ],
  customColorRegexArray: [/^fade\(.*\)$/],
};

generateTheme(options)
  .then(() => {
    console.log('Theme generated successfully');
  })
  .catch((error) => {
    console.log('Error', error);
  });

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({
  '@button-default-color': 'red',
  '@button-default-background-color': 'green',
});