Ant Design Dynamic/Runtime Theme

3 min read · Apr 24, 2018

This article is continuation of [Ant Design Live Theme](https://medium.com/@mzohaib.qc/ant-design-live-theme-588233ea2bbc) 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.

Steps:

Install webpack plugin for dynamic theming

npm i antd-theme-webpack-plugin

Import this plugin in your webpack.config.js file, initialize with valid path params and add in plugins array in webpack config object.

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 ]

antDir path will be same if webpack.config.js file and node_modules directory are at root level in project directory structure.
Default stylesDir is /src/styles directory which contains your custom styles in less files.
mainLessFile is less file containing all imports of your custom styles

index.less

varFile is file containing your variables which includes variables from Ant Design that you are overriding. Make sure you have imported Ant Design theme file in your varFile file.

variables.less

themeVariables is an array of color specific variable names that you want to change in browser. Default is [ '@primary-color' ]
indexFileName this is just file name and not the path. If your build process is going to generate an html file then this is that name of html file. Mostly it is index.html . But if webpack does not generate that main html file then you need to manually insert few lines in your html file right after <body> tag like this

index.html

Now everything is setup. You need to write your code that will allow you to update less variables by calling less.modifyVar() function. You can simply call with any valid color value and theme will update. You can add a method in your React component like this

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 .

Run your app and you are good to go :)

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

Github: https://github.com/mzohaibqc/antd-theme-webpack-plugin

Examples: https://github.com/mzohaibqc/antd-theme-webpack-plugin/tree/master/examples

Live Demo: https://mzohaibqc.github.io/antd-theme-webpack-plugin/

Themes