
Security News
Meet Socket at Black Hat and DEF CON 2025 in Las Vegas
Meet Socket at Black Hat & DEF CON 2025 for 1:1s, insider security talks at Allegiant Stadium, and a private dinner with top minds in software supply chain security.
antd-theme-generator
Advanced tools
This a script to generate color specific styles less file and which you can use to change theme dynamically in browser
This script generates color specific styles/less file which you can use to change theme dynamically in browser
const { generateTheme } = require('antd-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'],
outputFilePath: path.join(__dirname, './public/color.less') // if provided, file will be created with generated less/styles
customColorRegexArray: [/^fade\(.*\)$/], // An array of regex codes to match your custom color variable values so that code can identify that it's a valid color. Make sure your regex does not adds false positives.
}
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 |
outputFilePath | string | - | Generated less content will be written to file path specified otherwise it will not be written. However, you can use returned output and write in any file as you want |
customColorRegexArray | array | ['color', 'lighten', 'darken', 'saturate', 'desaturate', 'fadein', 'fadeout', 'fade', 'spin', 'mix', 'hsv', 'tint', 'shade', 'greyscale', 'multiply', 'contrast', 'screen', 'overlay'].map(name => new RegExp(${name}\(.*\) ))] | This array is to provide regex which will match your color value, most of the time you don't need this |
Add following lines in your main html file
<link rel="stylesheet/less" type="text/css" href="/color.less" />
<script>
window.less = {
async: true,
env: 'production'
};
</script>
<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'
})
FAQs
This a script to generate color specific styles less file and which you can use to change theme dynamically in browser
The npm package antd-theme-generator receives a total of 7,723 weekly downloads. As such, antd-theme-generator popularity was classified as popular.
We found that antd-theme-generator demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Meet Socket at Black Hat & DEF CON 2025 for 1:1s, insider security talks at Allegiant Stadium, and a private dinner with top minds in software supply chain security.
Security News
CAI is a new open source AI framework that automates penetration testing tasks like scanning and exploitation up to 3,600× faster than humans.
Security News
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.