{"id":19915320,"url":"https://github.com/emeks-studio/antd-custom-theme-generator","last_synced_at":"2025-05-03T05:32:04.742Z","repository":{"id":37749335,"uuid":"279109967","full_name":"emeks-studio/antd-custom-theme-generator","owner":"emeks-studio","description":"A simple way to create an antd theme css file with zero configuration.","archived":false,"fork":false,"pushed_at":"2022-07-18T07:05:14.000Z","size":373,"stargazers_count":30,"open_issues_count":5,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-12T21:50:57.677Z","etag":null,"topics":["antd","antdesign","css","custom-theme","javascript","react","reactjs"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@emeks/antd-custom-theme-generator","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/emeks-studio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-07-12T17:03:49.000Z","updated_at":"2023-05-10T21:13:10.000Z","dependencies_parsed_at":"2022-08-21T11:00:21.534Z","dependency_job_id":null,"html_url":"https://github.com/emeks-studio/antd-custom-theme-generator","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emeks-studio%2Fantd-custom-theme-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emeks-studio%2Fantd-custom-theme-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emeks-studio%2Fantd-custom-theme-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emeks-studio%2Fantd-custom-theme-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/emeks-studio","download_url":"https://codeload.github.com/emeks-studio/antd-custom-theme-generator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224354258,"owners_count":17297402,"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":["antd","antdesign","css","custom-theme","javascript","react","reactjs"],"created_at":"2024-11-12T21:39:33.592Z","updated_at":"2024-11-12T21:39:34.272Z","avatar_url":"https://github.com/emeks-studio.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Antd custom theme generator\n\nA simple way to create an antd theme css file with zero configuration.\n\n[Ant Design](https://ant.design/) provides plenty of UI components, styled with less.\nYou can customize the default theme modifying less variables (check [their doc](https://ant.design/docs/react/customize-theme) for multiple ways to achieve this), but the main issue being that you don't have a simple way to create a static `.css` file with zero configuration.\n\nThis package was created with `Antd Design v4.6.6` and aims to ease the theme's customization process without having to install more dependencies yourself, set up [less](https://lesscss.org/) or eject your [React](reactjs.org) project.\n\n## Usage\n\n### Generate custom theme styles\n\n1. Define your custom theme creating a `.less` file overriding Antd's variables (by default: `./custom-theme.less`).\n   - _Example:_\n     ```less\n     @primary-color: #9063cd;\n     @success-color: #a8d3c4;\n     ```\n\n2. Generate custom theme's `.css` file.\n   - _Option A:_\\\n    Without installing this package:\n     ```sh\n     $ npx @emeks/antd-custom-theme-generator\n\n     output \u003e ./custom-theme.css\n     ```\n   - _Option B:_\\\n     Installing this package as a dev dependency:\n     ```sh\n     $ npm i -E --save-dev @emeks/antd-custom-theme-generator\n     ```\n     Then generating your theme:\n     ```sh\n     $ generate-theme\n\n     default output \u003e ./custom-theme.css\n     ```\n3. Replace `\"antd/dist/antd.css\"` import in your project, with the output file of your custom theme generated by this script (by default: `./custom-theme.css`).\n\n### Options\n\n| Name | Default | Description |\n| --- | --- | --- |\n| `--verbose` or `-v` | | Prints a little bit more info for debugging purposes |\n| `--watch` or `-w` | | Keeps script running, recompile on `\u003ccustomThemeFilePath\u003e` change |\n| `--antd` | ./node_modules/antd | Path to the antd library directory |\n| `--theme` | default | Antd theme you want to use as base (e.g. `dark` or `compact`) - [Check available options](https://github.com/ant-design/ant-design/tree/master/components/style/themes) |\n| `\u003ccustomThemeFilePath\u003e` | ./custom-theme.less | Path to the custom `.less` file with Antd variables overriden |\n| `\u003cgeneratedThemeFilePath\u003e` | ./custom-theme.css | Output Path to the compiled `.css` file containing your new theme |\n\n\u003e **Notes**:\\\n\u003e The order of paths **is** important.\n```sh\n  $ generate-theme [--verbose] [--watch] [--antd \u003cdir\u003e] [--theme \u003ctheme\u003e] [\u003ccustomThemeFilePath\u003e] [\u003cgeneratedThemeFilePath\u003e]\n```\n\n#### Examples\n- Generate a custom theme using dark theme as base:\n  ```sh\n  $ npx @emeks/antd-custom-theme-generator --theme dark\n  ```\n- Generate a custom theme using default theme as base specifying non default paths:\n  ```sh\n  $ npx @emeks/antd-custom-theme-generator ./styles/custom-theme.less ./styles/custom-theme.css\n  ```\n\n### FAQ\n\u003e **Q1: Which variables can I override?**\n\nYou may override any variable exposed by Antd in [this file](https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less).\n\n\u003e **Q2: Should I run this command every time I change my `custom-theme.less` file?**\n\nNo, you could pass the `-w` argument to let the script observe `\u003ccustomThemeFilePath\u003e` file and recompile it if it changes.\n\n## Development\n- Inside package folder, link it globally:\n  ```sh\n  $ npm link\n  ```\n- Use the package in your project (with antd already installed and a `\u003ccustomThemeFilePath\u003e` file created as well):\n  ```sh\n  $ generate-theme\n  ```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femeks-studio%2Fantd-custom-theme-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Femeks-studio%2Fantd-custom-theme-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femeks-studio%2Fantd-custom-theme-generator/lists"}