Skip to content
This repository has been archived by the owner on Jan 11, 2023. It is now read-only.
/ dynamic-antd-theme Public archive

๐ŸŒˆ A simple plugin to dynamic change ant-design theme whether less or css.

License

Notifications You must be signed in to change notification settings

luffyZh/dynamic-antd-theme

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

build-passing release

A simple plugin to dynamic change ant-design theme whether less or css.

English | ็ฎ€ไฝ“ไธญๆ–‡

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.

๐Ÿ  HomePage

Dynamic-Antd-Theme-Demo

๐ŸŒ Browser Support

Chrome Edge Firefox IE Safari
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';
...

<div className='theme-container'>
  <span>Change antd theme: </span>
  <DynamicAntdTheme />
</div>

โœจ 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


<DynamicAntdTheme primaryColor='#77dd66' />

<DynamicAntdTheme storageName='my-custom-define-color' />

<DynamicAntdTheme style={{ display: 'margin: 10px' }} />

function themeChangeCallback (color) {
  document.getElementById('my-header-bar').style.backgroundColor = color;
}

<DynamicAntdTheme themeChangeCallback={this.themeChangeCallback} />

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;
  }
`;

<DynamicAntdTheme
  customCss={customCss}
/>

The effects as flow:

No Color-Picker

If u don't need the color-picker๏ผŒmini-dynamic-antd-theme is more suitable for you.

import { generateThemeColor, changeAntdTheme } from 'dynamic-antd-theme';
...

<Button
  onClick={
    () => {
      const color = 'blue';
      changeAntdTheme(color);
    }
  }
>Change Theme</Button>

โš ๏ธ 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

๐ŸŽ Follow-Up Plan

  • More custom type: border-color, border-radius, etc.

If you're interested in this repository, Fork/PR/Issue all are welcome.