Ant Design Dynamic/Runtime Theme

3 min read · Apr 24, 2018

This article is continuation of [Ant Design Live Theme]( and it explains how we can achieve dynamic theming using Ant Design (less) with webpack. I’ve created a webpack plugin which will be used to process Ant Design’s styles and your custom styles to create a colors specific less file color.less to change colors in browser.


npm i antd-theme-webpack-plugin
onst AntDesignThemePlugin = require('antd-theme-webpack-plugin'); const options = { antDir: path.join(__dirname, './node_modules/antd'), stylesDir: path.join(__dirname, './src/styles'), varFile: path.join(__dirname, './src/styles/variables.less'), themeVariables: ['@primary-color'], indexFileName: 'index.html' } const themePlugin = new AntDesignThemePlugin(options);// In plugins section, add this plugin instance plugins: [ themePlugin, some other plugins ]




changeColor = (colorCode) => { window.less.modifyVars({ '@primary-color\`: colorCode }); }

Or you can even make it generic

changeColor = (variableName, colorCode) => { window.less.modifyVars({ [variableName]: colorCode, }); };

You can only update those color variables that you provided as themeVariables .

I am linking github repo for theming webpack plugin. It contains an examples directory which contains sample projects which you can try.



Live Demo: