Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: about 1 month 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 (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-11T07:09:48.000Z (over 1 year ago)
- Last Synced: 2024-04-25T03:02:06.143Z (5 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.