vant-theme-generator-new v1.0.3

描述

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

安装

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

入参描述

Example

setting vue.config.js

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

src/theme/default.less View corresponding file contents.

script theme.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', '@radio-checked-icon-color', '@mainColor', //custom style , customColorRegexArray: /^fade(.*)$/, };

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

> Add following lines in your main html file
```html
<link rel="stylesheet/less" type="text/css" href="/theme.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',
  '@radio-checked-icon-color': '#8C41FA',
  '@mainColor': '#FA733E',
});