background

Company requirements: Support for changing themes at project runtime. The project vUE is version 3.0, antD version 2.0.0, some holes in antD-Theme-Generator tutorial are not written in detail, here is a summary

The principle of

Use modifyVars for less to change the theme.

The plug-in

Antd-theme-generator (only for color customization, not for other attributes such as font size, borders, margins, etc.) or antD-theme-webpack-plugin (a plugin developed based on ANTD-theme-Generator), This article focuses on the use of ANTD-Theme-generator

Antd theme — the generator plugin

Step 1: Install

Yarn add [email protected] – save

Step 2: Configure color.js

After the installation is complete, create a color.js file in the root directory and configure it as follows:

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

const options = {
  stylesDir: path.join(__dirname, './src/styles/theme'),   // The folder where the theme files are located
  antDir: path.join(__dirname, './node_modules/ant-design-vue'),  / / antd package location
  varFile: path.join(__dirname, './src/styles/theme/variables.less'), // Customize the default theme color
  mainLessFile: path.join(__dirname, './src/styles/theme/index.less'), // Other custom styles in the project (this file can be empty if no other styles need to be dynamically modified)
  themeVariables: [ '@primary-color'].// The topic variable to change
  indexFileName: 'index.html'.// Where index.html is located
  outputFilePath: path.join(__dirname, './public/theme.less'), // Whether to generate only once
}

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

Step 3: Run color.js

After the configuration is complete (choose one of the following methods)

(1) It can be obtained from vue.config.js

require('./color')
Copy the code

(2) Configure package.json scripts

Added to the serve(development environment) and Build (production environment) propertiesnode color &&

After adding the configuration, / SRC /styles/ creates a theme folder where the variable. less and index.less files will be created

Index. less File contents can be empty, variable. less file contents:

// This style introduction must be added
@import "~ant-design-vue/lib/style/themes/default.less";
@primary-color: #992777;
Copy the code

After the file is created, run the yarn run serve command to start the development environment. The package is successfully packaged. In the public folder, there will be a theme.

Step 4: write index.html

<head>
    ...
    <script>
        window.less = {
         'async': false.'env': 'production'//production development
       };
     </script>
     ...
 </head>
 <body>.<link rel="stylesheet/less" type="text/css" href="./theme.less" /> 
     <div id="app"></div>
     <script src="https://cdn.bootcss.com/less.js/2.7.3/less.min.js"></script>.</body>
Copy the code

use

      window.less.modifyVars({
          '@primary-color': 'red'
        })
        .then(() = > {
          console.log('success');
        })
        .catch((error: any) = > {
          alert('failure');
          console.log(error);
        });
Copy the code

Matters needing attention

1. The antD-theme-generator version is faulty

Yarn add [email protected] –save

If the [email protected] version is used, an error occurs:

error [LessError: error evaluating function `darken`: color.toHSL is not a function]
Copy the code

Solution:

Find/node_modules/ant – design – vue/lib/style/themes/default. The less the file

Find // Table and add the following code block to it:

@table-header-sort-active-bg: darken(@table-header-bg, 3%);
@table-header-filter-active-bg: darken(@table-header-sort-active-bg, 5%);
@table-selection-column-width: 60px;
Copy the code

As shown in figure: [email protected] version will have the same problem, can be solved in this way

2. Style coverage, style does not appear problems

  1. Note where the link tag for theme. Less should be placed in the first line of the body tag, because the style will be generated under the ling tag. If you put link in the head, the generated theme will be overwritten.

  2. We need in the theme. The less the link below into cdn.bootcss.com/less.js/2.7… (less version can not be more than 3.0) file, because we need to use to the window. The less the object in the method, but we can’t introduce less3.0 above, otherwise the browser console complains, style also won’t appear.

link

Antd-theme-generator:github.com/mzohaibqc/a…

Antd – theme – webpack – plugin: github.com/mzohaibqc/a…