ant-design-vue 自定义配置颜色

Ant Design Vue (简称ADVue) 提供了一套基于 Vue 的 Ant Design UI 组件库，它允许用户通过自定义主题来自定义组件的颜色。要自定义 ADVue 的颜色配置，你需要在项目中创建或修改主题文件，通常这个文件被称为 `theme.js` 或者 `theme.config.ts`。

以下是基本步骤：

1. **安装依赖**：首先确保已经安装了 `@ant-design/vision-colors` 和 `vue-cli-plugin-theme` 等相关的依赖。

2. **配置主题**：
- 如果使用 JavaScript 配置：

     import { createTheme } from '@ant-design/colors';
     export default createTheme({
       // 配色方案的基础颜色列表，例如 primary, secondary, etc.
       palette: {
         ...createBasePalette(), // 使用默认基础配色
         custom: {
           // 添加或覆盖自定义颜色
           brandPrimary: '#custom-primary',
           brandSuccess: '#custom-success',
           //...
         }
       },
     });

- 如果使用 TypeScript 配置：

     import { createTheme } from '@ant-design/colors';
     const theme = createTheme({
       // ...
       palette: {
         ...createBasePalette(),
         custom: {
           brandPrimary: '#custom-primary',
           brandSuccess: '#custom-success',
         },
       },
     });
     export default theme;

3. **应用主题**：
在项目全局样式或入口文件中设置主题，比如在 `main.js` 或 `App.vue` 中：

   import { setTheme } from 'ant-design-vue';
   setTheme(theme); // 其中 theme 是上述自定义的主题对象

4. **覆盖内置颜色**：如果你只想改变某个特定组件的颜色，可以在组件内部使用 `style scoped` 来覆盖默认样式。

记得在每次更新主题后，需要重启应用才能看到新的颜色效果。