antd-theme-generator
Generate dynamic theme files for Ant Design by processing LESS variables to enable runtime color changes.
What is antd-theme-generator?
antd-theme-generator is a Node.js script that generates a color.less file from Ant Design's LESS variables, enabling dynamic theme changes in the browser. It processes custom LESS files and extracts theme variables to create a stylesheet that can be updated at runtime without a full rebuild.
Frontend developers using Ant Design who need to implement dynamic theme switching or runtime color customization in their applications.
It provides a lightweight solution for dynamic theming with Ant Design by generating optimized color stylesheets, avoiding the need for complex build processes or manual LESS compilation during runtime theme updates.
Overview
This script is to generate color.less file to update color related css in browser.
Use Cases
Best For
- Implementing dynamic theme switching in Ant Design applications
- Generating runtime-updatable color stylesheets from LESS variables
- Customizing Ant Design themes without rebuilding the entire CSS
- Creating theme preview features with live color changes
- Extracting color-related styles from custom LESS files for dynamic theming
- Building applications with user-selectable color schemes using Ant Design
Not Ideal For
- Projects not using Ant Design or LESS for styling
- Applications requiring server-side rendering without client-side JavaScript for themes
- Teams seeking a zero-configuration theme solution with minimal setup
- High-performance apps where client-side LESS compilation overhead is unacceptable
Pros & Cons
Pros
Enables live theme color changes in the browser using less.js, as shown with window.less.modifyVars, allowing users to update themes without rebuilding CSS.
Processes user-defined LESS files and variables through options like varFile and themeVariables, facilitating deep customization of Ant Design themes.
Includes default regex for color functions and allows customColorRegexArray, ensuring accurate extraction of complex color values from LESS files.
Can write generated styles to outputFilePath or return them programmatically, offering adaptability for various build and deployment workflows.
Cons
Requires loading less.js in the browser for runtime updates, adding JavaScript overhead and potential compatibility issues with modern frameworks.
Only works with LESS-based projects, making it unsuitable for teams using SASS, CSS-in-JS, or vanilla CSS, which limits its versatility.
Manual setup of paths, variable files, and regex patterns can be error-prone and requires a good understanding of Ant Design and LESS structure.
Frequently Asked Questions
Related Projects
antd-theme-webpack-pluginA webpack plugin for Dynamic theme generation for Ant Design
dynamic-antd-theme🌈 A simple plugin to dynamic change ant-design theme whether less or css.
storybook-addon-customize-antd-themea Storybook addon help you visually customize an ant design theme
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.