1.1.1 • Published 2 years ago
umi-theme-generator v1.1.1
umi-theme-generator
This script generates color specific styles/less file which you can use to change theme dynamically in browser
Example:
const { generateTheme } = require('umi-theme-generator');
const options = {
antDir: path.join(__dirname, './node_modules/antd'),
stylesDir: path.join(__dirname, './src'), // all files with .less extension will be processed
varFile: path.join(__dirname, './src/styles/variables.less'), // default path is Ant Design default.less file
themeVariables: ['@primary-color'],
}
generateTheme(options).then(less => {
console.log('Theme generated successfully');
})
.catch(error => {
console.log('Error', error);
})| Property | Type | Default | Descript |
|---|---|---|---|
| antdDir | string | - | This is path to antd directory in your node_modules |
| stylesDir | string, string | - | Path/Paths to your custom styles directory containing .less files |
| varFile | string | - | Path to your theme related variables file |
| themeVariables | array | '@primary-color' | List of variables that you want to dynamically change |
| customCss | string | - | custom css,(like umi.css) |
Add following lines in your main html file
<link rel="stylesheet/less" type="text/css" href="/color.less" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>Now you can update colors by updating less variables like this
window.less.modifyVars({
'@primary-color': '#0035ff'
})