umi-plugin-antd-theme-generator v3.0.2

umi-plugin-antd-theme-generator

Generate theme css file by theme config.

Theme css are generated by following steps. 1. Use less plugin post processor to collect less files in use. 2. Convert less to css for each theme.

Configure

Add following antdThemeGenerator config to umi config file.

export default {
  antdThemeGenerator: {
    theme: [
      {
        key: 'dust',
        modifyVars: {
          '@primary-color': '#F5222D',
          '@border-radius-base': '5px',
        },
      },
      {
        key: 'volcano',
        modifyVars: {
          '@primary-color': '#FA541C',
        },
      },
    ],
    // compress css
    min: process.env.NODE_ENV === 'production',
    // css module
    generateScopedName：(filePath: string, className: string) => {
      const match = filePath.match(/src(.*)/);
      if (match && match[1]) {
        const basePath = match[1].replace('.less', '');
        const arr = winPath(basePath)
          .split('/')
          .map((a: string) => a.replace(/([A-Z])/g, '-$1'))
          .map((a: string) => a.toLowerCase());
        return `${arr.join('-')}-${className}`.replace(/--/g, '-');
      }
      return className;
    }
  },
}

We can use dark theme and compact theme of Ant Design like this.

const { getThemeVariables } = require('antd/dist/theme');

export default {
  antdThemeGenerator: {
    theme: [
      {
        key: 'dark',
        modifyVars: getThemeVariables({
          dark: true, // Enable dark mode
          compact: true, // Enable compact mode
        })
      },
    ],
  },
}

theme

Themes that will generate css file.

min

Compress css or not. Default is false.

generateScopedName

Used by css module to generate css className. Default is as the example above.

useCache

Use last generated css files and do not generate again. Default is false.

Generate css files usually very slow, you can set useCache to true to use cache files in .temp\.plugin-theme if your less files are not changed.

How to change theme

To change theme, you should invoke changeTheme with the key of theme.

import { changeTheme } from 'umi';

changeTheme("dust");

LICENSE

MIT