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

A webpack plugin for Dynamic theme generation for Ant Design
https://github.com/mzohaibqc/antd-theme-webpack-plugin

Last synced: 5 days ago
JSON representation

A webpack plugin for Dynamic theme generation for Ant Design

• Host: GitHub
• URL: https://github.com/mzohaibqc/antd-theme-webpack-plugin
• Owner: mzohaibqc
• Created: 2018-04-18T20:25:07.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T04:42:58.000Z (almost 2 years ago)
• Last Synced: 2024-12-01T05:05:39.108Z (12 days ago)
• Language: JavaScript
• Homepage: https://mzohaibqc.github.io/antd-theme-webpack-plugin/index.html
• Size: 15.2 MB
• Stars: 368
• Watchers: 9
• Forks: 81
• Open Issues: 73
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

• awesome-ant-design - antd-theme-webpack-plugin - A webpack plugin to generate your custom theme file. (Theming)

README

        
# antd-theme-webpack-plugin

This webpack plugin is to  generate color specific less/css and inject into your `index.html` file so 

that you can change Ant Design specific color theme in browser.

## Live Theme Demo: 

https://mzohaibqc.github.io/antd-theme-webpack-plugin/index.html

https://antd-live-theme.firebaseapp.com/

In order to integrate with your webpack configurations, install the package and add following code in your webpack config file.

## Install

  - npm install -D antd-theme-webpack-plugin

```js

const AntDesignThemePlugin = require('antd-theme-webpack-plugin');

const options = {

  antDir: path.join(__dirname, './node_modules/antd'),

  stylesDir: path.join(__dirname, './src'),

  varFile: path.join(__dirname, './src/styles/variables.less'),

  themeVariables: ['@primary-color'],

  indexFileName: 'index.html',

  generateOnce: false,

  lessUrl: "https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js",

  publicPath: "",

  customColorRegexArray: [], // 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.

}

const themePlugin = new AntDesignThemePlugin(options);

// in config object

plugins: [

    themePlugin

  ]

```

Add this plugin in `plugins` array.

| Property | Type | Default | Descript |

| --- | --- | --- | --- |

| antDir | string | - | This is path to antd directory in your node_modules |

| stylesDir | string | - | This is path to your custom styles root directory, all files with .less extension in this folder and nested folders will be processed  |

| varFile | string | - | Path to your theme related variables file |

| themeVariables | array | ['@primary-color'] | List of variables that you want to dynamically change |

| indexFileName | string | index.html | File name of your main html file, in most cases it is `index.html` which is default |

| lessUrl | string | https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js | less.js cdn or file path |

| publicPath | string | '' | This string will be prepended to `/color.less` in `index.html` file in case |

| generateOnce | boolean | false | Everytime webpack will build new code due to some code changes in development, this plugin will run again unless you specify this flag as `true` which will just compile your styles once |

| 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 |

```

If you `index.html` file is not being generated by build process then add following code in your `index.html` or whatever is the name of html main file and add `indexFileName: false` in options/config. This way you can better place your below script in your html file according to your needs.

```

  window.less = {

    async: false,

    env: 'production'

  };

```

Don't forget to add import Ant design default theme file i.e. antd/lib/style/themes/default.less in variables.less file.

# Enable Javascript for less-loader

You need to enable javascript for less-loader.

```

{

  javascriptEnabled: true

}

```

For those who are using `react-app-rewire-less` with `react-app-rewired`, enable javascript like this

```

module.exports = function override(config, env) {

  config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config);

  config = rewireLess.withLoaderOptions({

    modifyVars: {

      '@primary-color': '#002251'

    },

    javascriptEnabled: true

  })(config, env);

  config.plugins.push(new AntDesignThemePlugin(options));

  return config;

};

```

## Configurations using customize-cra

https://github.com/mzohaibqc/antd-theme-webpack-plugin/blob/master/examples/customize-cra/config-overrides.js

## Light/Dark Theme Switch

Here is a demo to switch between light and dark themes dynamically.

https://mzohaibqc.github.io/antd-theme-webpack-plugin/index.html

And here is code for this demo

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

Note: you don't necessarily

## [CHANGELOG](/CHNAGELOG.md)