{"id":13492991,"url":"https://github.com/mzohaibqc/antd-theme-generator","last_synced_at":"2025-05-16T08:03:04.181Z","repository":{"id":32249902,"uuid":"131262247","full_name":"mzohaibqc/antd-theme-generator","owner":"mzohaibqc","description":"This script is to generate color.less file to update color related css in browser.","archived":false,"fork":false,"pushed_at":"2023-01-08T03:18:11.000Z","size":7241,"stargazers_count":359,"open_issues_count":58,"forks_count":85,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-05-16T08:01:52.166Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://mzohaibqc.github.io/antd-theme-generator/","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-27T07:33:41.000Z","updated_at":"2025-02-26T13:08:40.000Z","dependencies_parsed_at":"2023-01-14T21:01:15.329Z","dependency_job_id":null,"html_url":"https://github.com/mzohaibqc/antd-theme-generator","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-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mzohaibqc%2Fantd-theme-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mzohaibqc%2Fantd-theme-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mzohaibqc%2Fantd-theme-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mzohaibqc","download_url":"https://codeload.github.com/mzohaibqc/antd-theme-generator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254493381,"owners_count":22080126,"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-07-31T19:01:11.130Z","updated_at":"2025-05-16T08:03:04.163Z","avatar_url":"https://github.com/mzohaibqc.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Theming"],"sub_categories":[],"readme":"# antd-theme-generator\n\nThis script generates color specific styles/less file which you can use to change theme dynamically in browser\n\n## Example:\n\n```\nconst { generateTheme } = require('antd-theme-generator');\n\nconst options = {\n  antDir: path.join(__dirname, './node_modules/antd'),\n  stylesDir: path.join(__dirname, './src'), // all files with .less extension will be processed\n  varFile: path.join(__dirname, './src/styles/variables.less'), // default path is Ant Design default.less file\n  themeVariables: ['@primary-color'],\n  outputFilePath: path.join(__dirname, './public/color.less') // if provided, file will be created with generated less/styles\n  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.\n}\n\ngenerateTheme(options).then(less =\u003e {\n  console.log('Theme generated successfully');\n})\n.catch(error =\u003e {\n  console.log('Error', error);\n})\n```\n\n| Property | Type | Default | Descript |\n| --- | --- | --- | --- |\n| antdDir | string | - | This is path to antd directory in your node_modules |\n| stylesDir | string, [string] | - | Path/Paths to your custom styles directory containing .less files |\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| 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 |\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\nAdd following lines in your main html file\n\n```\n\u003clink rel=\"stylesheet/less\" type=\"text/css\" href=\"/color.less\" /\u003e\n\u003cscript\u003e\n  window.less = {\n    async: true,\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```\n\nNow you can update colors by updating less variables like this\n\n```\nwindow.less.modifyVars({\n  '@primary-color': '#0035ff'\n})\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmzohaibqc%2Fantd-theme-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmzohaibqc%2Fantd-theme-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmzohaibqc%2Fantd-theme-generator/lists"}