# antd-theme-generator

> This a script to generate color specific styles less file and which you can use to change theme dynamically in browser

Latest version **1.2.11** (published 2022-01-03) · ISC license · 0 weekly downloads

## Install

```sh
npm install antd-theme-generator
pnpm add antd-theme-generator
yarn add antd-theme-generator
bun add antd-theme-generator
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.11 |
| Published | 2022-01-03 |
| First published | 2018-05-03 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 8.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 358 |
| Author | mzohaibqc |
| Maintainers | mzohaibqc |
| Keywords | antd, theme, less, dynamic-theme, css |

## Links

- npm: https://www.npmjs.com/package/antd-theme-generator
- Repository: https://github.com/mzohaibqc/antd-theme-generator
- Homepage: https://github.com/mzohaibqc/antd-theme-generator#readme
- Issues: https://github.com/mzohaibqc/antd-theme-generator/issues
- npm.io page: https://npm.io/package/antd-theme-generator

## Dependencies (8)

- [glob](https://npm.io/package/glob.md) *
- [less](https://npm.io/package/less.md) *
- [hash.js](https://npm.io/package/hash.js.md) *
- [postcss](https://npm.io/package/postcss.md) *
- [postcss-less](https://npm.io/package/postcss-less.md) ^3.1.4
- [strip-css-comments](https://npm.io/package/strip-css-comments.md) *
- [less-bundle-promise](https://npm.io/package/less-bundle-promise.md) ^1.0.11
- [less-plugin-npm-import](https://npm.io/package/less-plugin-npm-import.md) *

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 1.2.11 (latest) — 2022-01-03
- 1.2.10 — 2021-09-14
- 1.2.9 — 2021-09-14
- 1.2.8 — 2020-10-21
- 1.2.7 — 2020-10-18
- 1.2.6 — 2020-10-15
- 1.2.5 — 2020-10-10
- 1.2.4 — 2020-06-06
- 1.2.3 — 2020-05-19
- 1.2.2 — 2020-04-27
- 1.2.1 — 2020-04-25
- 1.2.0 — 2020-04-25
- 1.1.9 — 2020-01-10
- 1.1.8 — 2020-01-10
- 1.1.7 — 2019-06-15
- … 17 more at https://npm.io/package/antd-theme-generator/versions

## README

# antd-theme-generator

This script generates color specific styles/less file which you can use to change theme dynamically in browser

## Example:

```
const { generateTheme } = require('antd-theme-generator');

const options = {
  antDir: path.join(__dirname, './node_modules/antd'),
  stylesDir: path.join(__dirname, './src'), // all files with .less extension will be processed
  varFile: path.join(__dirname, './src/styles/variables.less'), // default path is Ant Design default.less file
  themeVariables: ['@primary-color'],
  outputFilePath: path.join(__dirname, './public/color.less') // if provided, file will be created with generated less/styles
  customColorRegexArray: [/^fade\(.*\)$/], // 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.
}

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

| Property | Type | Default | Descript |
| --- | --- | --- | --- |
| antdDir | string | - | This is path to antd directory in your node_modules |
| stylesDir | string, [string] | - | Path/Paths to your custom styles directory containing .less files |
| varFile | string | - | Path to your theme related variables file |
| themeVariables | array | ['@primary-color'] | List of variables that you want to dynamically change |
| outputFilePath | string | - | Generated less content will be written to file path specified otherwise it will not be written. However, you can use returned output and write in any file as you want |
| 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 |


Add following lines in your main html file

```
<link rel="stylesheet/less" type="text/css" href="/color.less" />
<script>
  window.less = {
    async: true,
    env: 'production'
  };
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
```

Now you can update colors by updating less variables like this

```
window.less.modifyVars({
  '@primary-color': '#0035ff'
})
```

---
_Source: https://npm.io/package/antd-theme-generator · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._