umi-plugin-dynamic-antd-theme

With umi@3, Just install umi-plugin-dynamic-antd-theme, it shall be loaded by umi automatically.

Usage

Theme configuration

You should not use .umirc.ts, but with config/config.ts instead.

And add theme configure file config/theme.config.json with below content:

{
  "theme": [
    {
      "theme": "dark", // theme key
      "fileName": "dark.css", // theme file name, will be generated as static assets
      "modifyVars": {
        // variables that will be replaced in antd
        "@primary-color": "#F5222D"
      }
    },
    {
      "theme": "mingQing",
      "fileName": "mingQing.css",
      "modifyVars": {
        "@primary-color": "#13C2C2"
      }
    }
  ],
  // minify css
  "min": true,
  // css module
  "isModule": true,
  // ignore antd dependency
  "ignoreAntd": false,
  // ignore pro-layout dependency
  "ignoreProLayout": false,
  // no cache
  "cache": false
}

You can use this config via window.umi_plugin_ant_themeVar.

App-level theme variables

Define app-level theme variables(with prefix --) in global.less, for example:

.body-wrap-theme1 {
  --font-color: #000000;
  --bg-color: #011313;
}

.body-wrap-theme2 {
  --font-color: #ffffff;
  --bg-color: #ffffff;
}

theme1, theme2 is the theme key we mentioned in configuration

Use app-level theme variables(with var function) in your component .less file, for example:

.flatButton {
  color: var(--font-color);
  background: var(--bg-color);
}

Switch theme dynamically

Please refer to ThemeSwitch.tsx

LICENSE

MIT License