umi-plugin-antd-theme-generator
Generate theme css file by theme config.
Theme css are generated by following steps.
- Use less plugin post processor to collect less files in use.
- 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