{"id":13490915,"url":"https://github.com/luffyZh/dynamic-antd-theme","last_synced_at":"2025-03-28T07:31:35.292Z","repository":{"id":34932985,"uuid":"191863123","full_name":"luffyZh/dynamic-antd-theme","owner":"luffyZh","description":"🌈 A simple plugin to dynamic change ant-design theme whether less or css. ","archived":true,"fork":false,"pushed_at":"2023-01-11T07:09:48.000Z","size":2757,"stargazers_count":252,"open_issues_count":17,"forks_count":29,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-04-25T03:02:06.143Z","etag":null,"topics":["ant-design","antd","css","dynamic","theme"],"latest_commit_sha":null,"homepage":"https://dynamic-antd-theme.luffyzh.now.sh/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/luffyZh.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":"2019-06-14T02:27:33.000Z","updated_at":"2024-03-11T10:03:09.000Z","dependencies_parsed_at":"2023-01-15T10:45:28.026Z","dependency_job_id":null,"html_url":"https://github.com/luffyZh/dynamic-antd-theme","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luffyZh%2Fdynamic-antd-theme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luffyZh%2Fdynamic-antd-theme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luffyZh%2Fdynamic-antd-theme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luffyZh%2Fdynamic-antd-theme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/luffyZh","download_url":"https://codeload.github.com/luffyZh/dynamic-antd-theme/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245989143,"owners_count":20705767,"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":["ant-design","antd","css","dynamic","theme"],"created_at":"2024-07-31T19:00:52.044Z","updated_at":"2025-03-28T07:31:34.774Z","avatar_url":"https://github.com/luffyZh.png","language":"CSS","funding_links":[],"categories":["CSS","Theming"],"sub_categories":[],"readme":"![](./dynamic-antd-theme.png)\n\n[![build-passing](https://img.shields.io/badge/build-passing-brightgreen)](https://dynamic-antd-theme-luffyzh.vercel.app/)\n![release](https://badgen.net/github/release/luffyZh/dynamic-antd-theme/stable)\n\nA simple plugin to dynamic change [ant-design](https://ant.design) theme whether less or css. \n\nEnglish | [简体中文](./README_zh_CN.md)\n\n\u003e Ant Design V5 has very convenient's ability to support the dynamic change theme, so the warehouse is no longer maintained, relevant document reference: https://ant.design/docs/react/customize-theme-cn.\n\n**This project was initially targeted at 'ant-design', that means it's used in the React project. However, the core style was also applicable to 'ant-design-vue' || 'ant-design-angular'. In addition, for the convenience of one-key and auto use, the color-picker was also packaged into the project, resulting in too large a volume of the project. Aiming at this problem, I develope a new minor version —— [mini-dynamic-antd-theme](https://github.com/luffyZh/mini-dynamic-antd-theme).**\n\n## 🏠 HomePage\n[Dynamic-Antd-Theme-Demo](https://dynamic-antd-theme.luffyzh.now.sh/)\n\n## 🌍 Browser Support\n\n| ![Chrome](https://imgur.com/3C4iKO0.png) | ![Edge](https://imgur.com/vMcaXaw.png) | ![Firefox](https://imgur.com/ihXsdDO.png) | ![IE](https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_64x64.png) | ![Safari](https://imgur.com/ENbaWUu.png) |\n| --- | --- | --- | --- | --- |\n| Chrome 39.0+ ✔ | Edge 12.0+ ✔ | Firefox 30.0+ ✔ | IE 11+ ✔ | Safari 9.1+ ✔ |\n\n## 📦 Install\n\n`npm install dynamic-antd-theme` or `yarn add dynamic-antd-theme`\n\n\n## 🔨 Usage\n\nThe best usage of the dynamic-antd-theme is in the common compnent (Layout/Header etc...) of your application.\n\n```\n// Layout.js\n...\nimport DynamicAntdTheme from 'dynamic-antd-theme';\n...\n\n\u003cdiv className='theme-container'\u003e\n  \u003cspan\u003eChange antd theme: \u003c/span\u003e\n  \u003cDynamicAntdTheme /\u003e\n\u003c/div\u003e\n\n```\n\n## ✨ Props\n\n| Props       | Type   | Default                  | Description         |\n| ---------- | ------ | --------------------- | ------------ |\n| primaryColor   | String | #1890d5 |  your antd initial @primary-color      |\n| storageName   | String |   custom-antd-primary-color  | the name that is saved in the localStorage    |\n| style   | Object |  null  | you can custom the component style simply  |\n| placement   | String | bottomRight |  change the color-picker position, `bottom, bottomRight, right, topRight, top, topLeft, left, bottomLeft`|\n| themeChangeCallback   | Func | null | you can do something use themeColor when themeColor changed. |\n| customCss   | String | '' | you can define custom css effect any element. |\n\n### How to use the primaryColors in customCss?\n\nYou can do this using the following four variables（just like scss）：\n\n - $primary-color\n - $primary-hover-color\n - $primary-active-color\n - $primary-shadow-color\n\n```\nconst customCss = `\n  .ant-btn {\n    font-family: fantasy;\n  }\n  .custom-title {\n    color: $primary-color;\n  }\n  .custom-title:hover {\n    color: $primary-hover-color;\n    cursor: pointer;\n  }\n  #custom-id {\n    color: $primary-shadow-color;\n  }\n`;\n```\n\n## 🌞 Export\n| export       | Description         |\n| ---------- | ------------ |\n| default  | The \u003cDynamicAntdTheme /\u003e component   |\n| changeAntdTheme   | `param: (color, options)`, change the antd theme. The options specific attributes are as follows： - `storageName`: This can be configured to set storageName when not using picker . - `customCss`: custom Css |\n\n## 🌰 More Example\n\n### Basic Use\n\n```\n\n\u003cDynamicAntdTheme primaryColor='#77dd66' /\u003e\n\n\u003cDynamicAntdTheme storageName='my-custom-define-color' /\u003e\n\n\u003cDynamicAntdTheme style={{ display: 'margin: 10px' }} /\u003e\n\nfunction themeChangeCallback (color) {\n  document.getElementById('my-header-bar').style.backgroundColor = color;\n}\n\n\u003cDynamicAntdTheme themeChangeCallback={this.themeChangeCallback} /\u003e\n\n```\n\n### Define Custom CSS\n```\n// define custom css\nconst customCss = `\n  .ant-btn {\n    font-family: fantasy;\n  }\n  .custom-title {\n    color: $primary-color;\n  }\n  .custom-title:hover {\n    color: $primary-hover-color;\n    cursor: pointer;\n  }\n  #custom-id {\n    color: $primary-shadow-color;\n  }\n`;\n\n\u003cDynamicAntdTheme\n  customCss={customCss}\n/\u003e\n\n```\nThe effects as flow:\n\n![](./custom-css.gif)\n\n### No Color-Picker\n\n\u003e If u don't need the `color-picker`，[mini-dynamic-antd-theme](https://github.com/luffyZh/mini-dynamic-antd-theme) is more suitable for you.\n\n```\nimport { generateThemeColor, changeAntdTheme } from 'dynamic-antd-theme';\n...\n\n\u003cButton\n  onClick={\n    () =\u003e {\n      const color = 'blue';\n      changeAntdTheme(color);\n    }\n  }\n\u003eChange Theme\u003c/Button\u003e\n```\n\n## ⚠️ Attention\n\n**This solution is easy to use, so it is prone to problems. We hope you can give us timely feedback. For example, if there is a problem with any component, we will fix the updated version as soon as possible.**\n\n - The current version requires your antd version to be lower than v3.19.0\n   \n\u003e The antd version is higher than v3.19.0 you can also use it, if have some problems remember give me an issue. \n\n - ...Plugin versions are updated from time to time based on antd (new antd components are updated)\n\n## 🔗 Changelogs\n[CHANGELOG](./docs/CHANGELOG.md)\n\n## 🍎 Follow-Up Plan\n \n - More custom type: `border-color`, `border-radius`, etc.\n\n\u003e If you're interested in this repository, Fork/PR/Issue all are welcome.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FluffyZh%2Fdynamic-antd-theme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FluffyZh%2Fdynamic-antd-theme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FluffyZh%2Fdynamic-antd-theme/lists"}