🌈 A simple plugin to dynamic change ant-design theme whether less or css.
A simple plugin to dynamic change ant-design theme whether less or css.
English | 简体中文
After gzip: 42.7kB
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.
| |
|
|
|
|
| --- | --- | --- | --- | --- |
| Chrome 39.0+ ✔ | Edge 12.0+ ✔ | Firefox 30.0+ ✔ | IE 11+ ✔ | Safari 9.1+ ✔ |
npm install dynamic-antd-themeor
yarn add dynamic-antd-theme
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 | 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. |
You can do this using the following four variables(just like scss):
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 | 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 |
function themeChangeCallback (color) { document.getElementById('my-header-bar').style.backgroundColor = color; }
// 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:
If u don't need the
color-picker,mini-dynamic-antd-theme is more suitable for you.
import { generateThemeColor, changeAntdTheme } from 'dynamic-antd-theme'; ...{ const color = 'blue'; changeAntdTheme(color); } } >Change Theme
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 antd version is higher than v3.19.0 you can also use it, if have some problems remember give me an issue.
v0.1.3
Fix the Slider Component.
v0.1.4
Fix repeat insert
tag.v0.1.5
Add placement props,
bottom, bottomRight, right, topRight, top, topLeft, left, bottomLeft. Default is
bottomRight.
v0.1.6
Add themeChangeCallback props, you can do something use themeColor when themeColor changed.
v0.2.0
Fix ant-design table tr background when cursor hovered.
v0.2.4
Support IE 11+.
v0.2.6
Fix DatePicker current date color.
v0.3.0
Export
{ generateThemeColor, changeAntdTheme }methods to help the developer who don't need react-colorPicker
v0.3.2
Fix
bug, when hover the font color is primary-color.v0.3.6
Fix DateRangePicker some bugs.
v0.3.7
Fix
table:hoverin antd^3.20.0+
v0.3.8
Fix
calendersome bugs.
v0.3.9
Fix
tree-table-iconbug.
v0.4.0
Add
/examplesfor users to use && look for bugs.
v0.5.0
Add
index.d.tsto support Typescript.
v0.6.0
Add
customCssProps to support user custom define css.
v0.7.0
Add
optionsin the
changeAntdTheme.
v0.8.0
Remove
generateThemeColor, now
changeAntdThemefirst param only need primary color.
border-color,
border-radius, etc.
If you're interested in this repository, Fork/PR/Issue all are welcome.