https://github.com/luffyZh/dynamic-antd-theme
🌈 A simple plugin to dynamic change ant-design theme whether less or css.
https://github.com/luffyZh/dynamic-antd-theme
ant-design antd css dynamic theme
Last synced: 22 days ago
JSON representation
🌈 A simple plugin to dynamic change ant-design theme whether less or css.
- Host: GitHub
- URL: https://github.com/luffyZh/dynamic-antd-theme
- Owner: luffyZh
- License: mit
- Archived: true
- Created: 2019-06-14T02:27:33.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-11T07:09:48.000Z (over 2 years ago)
- Last Synced: 2024-04-25T03:02:06.143Z (12 months ago)
- Topics: ant-design, antd, css, dynamic, theme
- Language: CSS
- Homepage: https://dynamic-antd-theme.luffyzh.now.sh/
- Size: 2.63 MB
- Stars: 252
- Watchers: 5
- Forks: 29
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-ant-design - dynamic-antd-theme - A simple plugin to dynamic change ant-design theme whether less or css. (Theming)
README
[](https://dynamic-antd-theme-luffyzh.vercel.app/)
A simple plugin to dynamic change [ant-design](https://ant.design) theme whether less or css.
English | [简体中文](./README_zh_CN.md)
> 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.
**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).**
## 🏠 HomePage
[Dynamic-Antd-Theme-Demo](https://dynamic-antd-theme.luffyzh.now.sh/)
## 🌍 Browser Support
|  |  |  |  |  |
| --- | --- | --- | --- | --- |
| Chrome 39.0+ ✔ | Edge 12.0+ ✔ | Firefox 30.0+ ✔ | IE 11+ ✔ | Safari 9.1+ ✔ |
## 📦 Install
`npm install dynamic-antd-theme` or `yarn add dynamic-antd-theme`
## 🔨 Usage
The best usage of the dynamic-antd-theme is in the common compnent (Layout/Header etc...) of your application.
```
// Layout.js
...
import DynamicAntdTheme from 'dynamic-antd-theme';
...
Change antd theme:
```
## ✨ Props
| Props | Type | Default | Description |
| ---------- | ------ | --------------------- | ------------ |
| primaryColor | String | #1890d5 | your antd initial @primary-color |
| storageName | String | custom-antd-primary-color | the name that is saved in the localStorage |
| style | Object | null | you can custom the component style simply |
| placement | String | bottomRight | change the color-picker position, `bottom, bottomRight, right, topRight, top, topLeft, left, bottomLeft`|
| themeChangeCallback | Func | null | you can do something use themeColor when themeColor changed. |
| customCss | String | '' | you can define custom css effect any element. |
### How to use the primaryColors in customCss?
You can do this using the following four variables（just like scss）：
- $primary-color
- $primary-hover-color
- $primary-active-color
- $primary-shadow-color
```
const customCss = `
.ant-btn {
font-family: fantasy;
}
.custom-title {
color: $primary-color;
}
.custom-title:hover {
color: $primary-hover-color;
cursor: pointer;
}
#custom-id {
color: $primary-shadow-color;
}
`;
```
## 🌞 Export
| export | Description |
| ---------- | ------------ |
| default | The component |
| 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 |
## 🌰 More Example
### Basic Use
```
function themeChangeCallback (color) {
document.getElementById('my-header-bar').style.backgroundColor = color;
}
```
### Define Custom CSS
```
// define custom css
const customCss = `
.ant-btn {
font-family: fantasy;
}
.custom-title {
color: $primary-color;
}
.custom-title:hover {
color: $primary-hover-color;
cursor: pointer;
}
#custom-id {
color: $primary-shadow-color;
}
`;
```
The effects as flow:
### No Color-Picker
> 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.
```
import { generateThemeColor, changeAntdTheme } from 'dynamic-antd-theme';
...
{
const color = 'blue';
changeAntdTheme(color);
}
}
>Change Theme
```
## ⚠️ Attention
**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.**
- The current version requires your antd version to be lower than v3.19.0
> The antd version is higher than v3.19.0 you can also use it, if have some problems remember give me an issue.
- ...Plugin versions are updated from time to time based on antd (new antd components are updated)
## 🔗 Changelogs
[CHANGELOG](./docs/CHANGELOG.md)
## 🍎 Follow-Up Plan
- More custom type: `border-color`, `border-radius`, etc.
> If you're interested in this repository, Fork/PR/Issue all are welcome.