动态 Ant Design 主题插件使用教程

dynamic-antd-theme

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

1. 项目介绍

dynamic-antd-theme
是一个简单的插件，用于动态更改 Ant Design 的主题，无论是使用 Less 还是 CSS。该项目最初针对的是 React 项目，但其核心样式也适用于
ant-design-vue
和
ant-design-angular
。为了方便一键自动使用，项目中还打包了颜色选择器，但这也导致了项目体积较大。为了解决这个问题，开发者推出了一个新的版本
mini-dynamic-antd-theme
，去除了颜色选择器，更适合不需要颜色选择器的场景。

2. 项目快速启动

安装

首先，你需要安装
dynamic-antd-theme
插件：

npm install dynamic-antd-theme
# 或者使用 yarn
yarn add dynamic-antd-theme

使用

在你的应用中，通常在公共组件（如 Layout 或 Header）中使用
dynamic-antd-theme
：

import DynamicAntdTheme from 'dynamic-antd-theme';

function App() {
  return (
    <div className="theme-container">
      <span>Change antd theme: </span>
      <DynamicAntdTheme />
    </div>
  );
}

export default App;

自定义主题颜色

你可以通过
primaryColor
属性来设置初始主题颜色：

<DynamicAntdTheme primaryColor="#77dd66" />

自定义 CSS

你还可以通过
customCss
属性来定义自定义 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} />

3. 应用案例和最佳实践

基本使用

在应用的头部或侧边栏中添加主题切换器，用户可以动态更改应用的主题颜色：

<DynamicAntdTheme primaryColor="#77dd66" />

自定义存储名称

你可以通过
storageName
属性来设置存储在 localStorage 中的名称：

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

主题变化回调

你可以通过
themeChangeCallback
属性来定义主题颜色变化时的回调函数：

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

<DynamicAntdTheme themeChangeCallback={themeChangeCallback} />

4. 典型生态项目

Ant Design

dynamic-antd-theme
是基于 Ant Design 的插件，Ant Design 是一个广泛使用的企业级 UI 设计语言和 React 组件库。

React

该项目主要用于 React 项目，React 是一个用于构建用户界面的 JavaScript 库。

Ant Design Vue

虽然该项目最初是为 React 设计的，但其核心样式也适用于
ant-design-vue
，这是一个基于 Vue 的 Ant Design 实现。

Ant Design Angular

同样，该项目也适用于
ant-design-angular
，这是一个基于 Angular 的 Ant Design 实现。

通过这些生态项目，
dynamic-antd-theme
可以在不同的前端框架中实现动态主题切换，为用户提供一致的体验。

dynamic-antd-theme

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

动态 Ant Design 主题插件使用教程

由admin@wunen