{"id":13805131,"url":"https://github.com/mzohaibqc/antd-theme-webpack-plugin","last_synced_at":"2025-05-16T09:03:07.971Z","repository":{"id":31876350,"uuid":"130117936","full_name":"mzohaibqc/antd-theme-webpack-plugin","owner":"mzohaibqc","description":"A webpack plugin for Dynamic theme generation for Ant Design","archived":false,"fork":false,"pushed_at":"2023-01-06T04:42:58.000Z","size":15917,"stargazers_count":367,"open_issues_count":73,"forks_count":78,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-05-09T14:07:07.791Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://mzohaibqc.github.io/antd-theme-webpack-plugin/index.html","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mzohaibqc.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-04-18T20:25:07.000Z","updated_at":"2025-04-14T02:27:12.000Z","dependencies_parsed_at":"2023-01-14T20:00:45.417Z","dependency_job_id":null,"html_url":"https://github.com/mzohaibqc/antd-theme-webpack-plugin","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mzohaibqc%2Fantd-theme-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mzohaibqc%2Fantd-theme-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mzohaibqc%2Fantd-theme-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mzohaibqc%2Fantd-theme-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mzohaibqc","download_url":"https://codeload.github.com/mzohaibqc/antd-theme-webpack-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254501555,"owners_count":22081528,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-04T01:00:57.802Z","updated_at":"2025-05-16T09:03:07.940Z","avatar_url":"https://github.com/mzohaibqc.png","language":"JavaScript","funding_links":[],"categories":["Theming"],"sub_categories":[],"readme":"# antd-theme-webpack-plugin\n\nThis webpack plugin is to  generate color specific less/css and inject into your `index.html` file so \nthat you can change Ant Design specific color theme in browser.\n\n## Live Theme Demo: \n\nhttps://mzohaibqc.github.io/antd-theme-webpack-plugin/index.html\n\nhttps://antd-live-theme.firebaseapp.com/\n\nIn order to integrate with your webpack configurations, install the package and add following code in your webpack config file.\n\n## Install\n  - npm install -D antd-theme-webpack-plugin\n\n```js\nconst AntDesignThemePlugin = require('antd-theme-webpack-plugin');\n\nconst options = {\n  antDir: path.join(__dirname, './node_modules/antd'),\n  stylesDir: path.join(__dirname, './src'),\n  varFile: path.join(__dirname, './src/styles/variables.less'),\n  themeVariables: ['@primary-color'],\n  indexFileName: 'index.html',\n  generateOnce: false,\n  lessUrl: \"https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js\",\n  publicPath: \"\",\n  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.\n}\n\nconst themePlugin = new AntDesignThemePlugin(options);\n// in config object\nplugins: [\n    themePlugin\n  ]\n```\nAdd this plugin in `plugins` array.\n\n\n| Property | Type | Default | Descript |\n| --- | --- | --- | --- |\n| antDir | string | - | This is path to antd directory in your node_modules |\n| 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  |\n| varFile | string | - | Path to your theme related variables file |\n| themeVariables | array | ['@primary-color'] | List of variables that you want to dynamically change |\n| indexFileName | string | index.html | File name of your main html file, in most cases it is `index.html` which is default |\n| lessUrl | string | https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js | less.js cdn or file path |\n| publicPath | string | '' | This string will be prepended to `/color.less` in `index.html` file in case |\n| 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 |\n| customColorRegexArray | array | ['color', 'lighten', 'darken', 'saturate', 'desaturate', 'fadein', 'fadeout', 'fade', 'spin', 'mix', 'hsv', 'tint', 'shade', 'greyscale', 'multiply', 'contrast', 'screen', 'overlay'].map(name =\u003e new RegExp(`${name}\\(.*\\)`))] | This array is to provide regex which will match your color value, most of the time you don't need this |\n\n\n```\n\nIf 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.\n\n```\n\u003clink rel=\"stylesheet/less\" type=\"text/css\" href=\"/color.less\" /\u003e\n\u003cscript\u003e\n  window.less = {\n    async: false,\n    env: 'production'\n  };\n\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js\"\u003e\u003c/script\u003e\n```\nDon't forget to add import Ant design default theme file i.e. antd/lib/style/themes/default.less in variables.less file.\n\n# Enable Javascript for less-loader\n\nYou need to enable javascript for less-loader.\n\n```\n{\n  javascriptEnabled: true\n}\n\n```\n\nFor those who are using `react-app-rewire-less` with `react-app-rewired`, enable javascript like this\n\n```\nmodule.exports = function override(config, env) {\n  config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config);\n  config = rewireLess.withLoaderOptions({\n    modifyVars: {\n      '@primary-color': '#002251'\n    },\n    javascriptEnabled: true\n  })(config, env);\n  config.plugins.push(new AntDesignThemePlugin(options));\n  return config;\n};\n```\n\n## Configurations using customize-cra\nhttps://github.com/mzohaibqc/antd-theme-webpack-plugin/blob/master/examples/customize-cra/config-overrides.js\n\n## Light/Dark Theme Switch\nHere is a demo to switch between light and dark themes dynamically.\nhttps://mzohaibqc.github.io/antd-theme-webpack-plugin/index.html\n\nAnd here is code for this demo\nhttps://github.com/mzohaibqc/antd-theme-webpack-plugin/tree/master/examples/customize-cra\n\nNote: you don't necessarily\n\n## [CHANGELOG](/CHNAGELOG.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmzohaibqc%2Fantd-theme-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmzohaibqc%2Fantd-theme-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmzohaibqc%2Fantd-theme-webpack-plugin/lists"}