Ant Design Runtime Theme Update

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

It allows one to update color specific theme in browser

There are guidelines to override Ant Design theme here https://ant.design/docs/react/customize-theme but these solutions need to be done at build time and one can’t change at runtime, in browser. There are multiple issues open or closed which want such functionality. In some web projects, we need different color scheme/theme, different logo for different customers. We can change logo url for each customer but creating a separate build with specific theme (colors) and deploying is not ideal. So why not just save color variables and their values and apply them at runtime while page is loading.

What does the proposed API look like?

Demo: https://mzohaibqc.github.io/antd-live-theme/ Guide: https://ant.design/docs/react/customize-theme

I’ve setup a guide and a github source repository for demo here https://github.com/mzohaibqc/antd-live-theme. There is a file generate-color.js which reads ant design less files, our own custom styless (less files), variables.less and theme.less to generate a color.less which actually contains only color related css rules to override theme of website or app. Similar technique is being used at Ant Design website but only for one color i.e @primary-color.

So point of this issue is to add this guide https://medium.com/@mzohaib.qc/ant-design-live-theme-588233ea2bbc in Customize Theme page https://ant.design/docs/react/customize-theme so that other people who want such functionality can benefit from this.

Thanks in advance 😃

[mzohaibqc]

@yesmeck I’ve created a webpack plugin called antd-theme-webpack-plugin

npm: https://www.npmjs.com/package/antd-theme-webpack-plugin Github: https://github.com/mzohaibqc/antd-theme-webpack-plugin to generate color.less and inject in index.html file. Now there is no need to add color.less and less.js in index.html manually. Plugin will add both reference automatically. We need to setup antd (e.g. less-loader etc) and then add this plugin in plugins array.

 
const options = {
  stylesDir: path.join(__dirname, './src/styles'),
  antDir: path.join(__dirname, './node_modules/antd'),
  varFile: path.join(__dirname, './src/styles/variables.less'),
  mainLessFile: path.join(__dirname, '../../src/styles/index.less'),
  themeVariables: ['@primary-color'],
  indexFileName: 'index.html'
}
 
const themePlugin = new AntDesignThemePlugin(options);
// in config object
plugins: [
    themePlugin
  ]

With app generated by create-react-app, we can add this plugin in config-overrides.js file

module.exports = function override(config, env) {
  config = rewireLess.withLoaderOptions({
    modifyVars: getLessVars(options.varFile)
  })(config, env);
  config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config);
  config.plugins.push(themePlugin);
  return config;
};

I’ll add example projects in github repository so it would be easier for others to follow, however it is very simple …

I hope you will like it 😃

[mzohaibqc]

@rezamorav I was in same situation when I was asked that we need dynamic theming and I was using sass alongside Ant Design. I could not find a solution so I created one with initial seed from Ant Design repo, how they were updating @primary-color. If you can migrate you sass styles to less then you can use https://github.com/mzohaibqc/antd-theme-webpack-plugin to update theme dynamically and if you don’t have luxury to take this decision the you can use https://github.com/mzohaibqc/css-runtime-theme post build. It will not be that good as antd-webpack-plugin but you can create a color.less file containing color specific css rules and colors will be repalced with respective color variables e.g. @primary-color.

const options = {
    source: path.join(__dirname, './src/index.css'), // File or css string,
    variables: { 
        '@primary-color': '#343312'
    },
    stylesDir: path.join(__dirname, './src'), // if your styles are in multiple files, specifiy the directory
    output: path.join(__dirname, './dist/color.less'), // output file path, filename should have .less extension and folder should be there,
    withoutGrey: false, // set to true to remove rules that only have grey colors
    withoutMonochrome: false, // set to true to remove rules that only have grey, black, or white colors
};

generateTheme(options).then(less => {
  console.log('Theme generated successfully');
})
.catch(error => {
  console.log('Error', error);
});

In order to handle different shades of @primary-color or any other color, you first need to calculate color for that shade and then add mapping here. e.g. By default Ant design @primary-color is @blue-6 which is equal to #1890ff. If you want to replace @blue-5 as well, you first need to calculate that color and then add mapping. e.g that turns out to be #1780fe then you can apply builtin less methods like soften, darken, spin to achieve that color. this color is spin(#1890ff, 4) = #1780fe . You can calculate this from here https://www.ofcodeandcolor.com/cuttle/. This is not that simple but possible

const options = {
    source: path.join(__dirname, './src/index.css'), // File or css string,
    variables: { 
        '@primary-color': '#1890ff',
       'spin(@primary-color, 4)': '#1780fe'
    },
    stylesDir: path.join(__dirname, './src'), // if your styles are in multiple files, specifiy the directory
    output: path.join(__dirname, './dist/color.less'), // output file path, filename should have .less extension and folder should be there,
    withoutGrey: false, // set to true to remove rules that only have grey colors
    withoutMonochrome: false, // set to true to remove rules that only have grey, black, or white colors
};