https://github.com/mzohaibqc/antd-theme-generator

This script is to generate color.less file to update color related css in browser.
https://github.com/mzohaibqc/antd-theme-generator

Last synced: 6 days ago
JSON representation

This script is to generate color.less file to update color related css in browser.

• Host: GitHub
• URL: https://github.com/mzohaibqc/antd-theme-generator
• Owner: mzohaibqc
• Created: 2018-04-27T07:33:41.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-08T03:18:11.000Z (about 2 years ago)
• Last Synced: 2024-12-29T08:07:34.964Z (13 days ago)
• Language: JavaScript
• Homepage: https://mzohaibqc.github.io/antd-theme-generator/
• Size: 6.91 MB
• Stars: 358
• Watchers: 7
• Forks: 87
• Open Issues: 58
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

• awesome-ant-design - antd-theme-generator - A simple script to generate theme specific less file which can be used in any environment. (Theming)

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

```

  window.less = {

    async: true,

    env: 'production'

  };

```

Now you can update colors by updating less variables like this

```

window.less.modifyVars({

  '@primary-color': '#0035ff'

})

```