README
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