vite Ant Design Vue 动态主题

简单记录一下。

官网地址：https://www.antdv.com/docs/vue/customize-theme-cn

antd全局化配置：https://www.antdv.com/components/config-provider-cn

开始没懂怎么去使用，查了资料也没有实现ConfigProvider配置的效果。

整理一下思路，使用ConfigProvider进行配置，不考虑动态的情况下静态配置怎么生效？

配置App.vue

<!-- APP.vue -->
<template>
  <a-config-provider>
    <router-view />
  </a-config-provider>
</template>
<script setup>
import { reactive } from "vue";
import { ConfigProvider } from "ant-design-vue";

// 直接官网复制的代码
const colorState = reactive({
  primaryColor: "#25b864",
  errorColor: "#ff4d4f",
  warningColor: "#faad14",
  successColor: "#52c41a",
  infoColor: "#1890ff",
});
ConfigProvider.config({
  theme: colorState,
});
</script>

HelloWorld.vue：

<template>
  <a-card>
    <a-row justify="center">
      <a-col>
        <input type="color" :value="colorState.primaryColor" @input="e => onColorChange('primaryColor', e)" />
      </a-col>
    </a-row>
    <br />
    <a-row gutter="20" align="middle" justify="center">
      <a-col>
        <a-checkbox v-model:checked="checked">Checkbox</a-checkbox>
      </a-col>
      <a-col>
        <a-button type="primary">Primary</a-button>
      </a-col>
      <a-col>
        <a-button>Default</a-button>
      </a-col>
      <a-col>
        <a-button type="dashed">Dashed</a-button>
      </a-col>
      <a-col>
        <a-button type="text">Text</a-button>
      </a-col>
      <a-col>
        <a-button type="link">Link</a-button>
      </a-col>
      <a-col>
        <a-button type="primary" @click="info">HelloWorld</a-button>
      </a-col>
      <a-col>
        <a-checkable-tag checked>CheckableTag</a-checkable-tag>
      </a-col>
    </a-row>
  </a-card>

</template>
<script setup>
// 引入配置
import {  ConfigProvider } from "ant-design-vue";
import { ref, reactive } from "vue";

const checked = ref(false);

//与app.vue一致
const colorState = reactive({
  primaryColor: "#25b864",
});
const onColorChange = (type, e) => {
  console.log(type, e.target.value, "颜色");
  Object.assign(colorState, {
    [type]: e.target.value,
  });
  ConfigProvider.config({
    theme: colorState,
  });
};

</script>

但是没得效果：

生效：

文档：需要引入替换当前项目引入样式文件为 CSS Variable 版本。

引入：

// main.js
import "ant-design-vue/dist/antd.variable.min.css";

引入后在vite.config.中修改

  AntDesignVueResolver({  importStyle: false }) 

刷新： 此时主题就生效了。

 

最后：colorState 参数放进状态管理里面。

 

 

antd 4.0更改less 为css in js

配置更改引入.less 文件 删除。动态主题切换更改为

    <a-config-provider

      :theme="{

        token: {

          colorPrimary: themeColorState.themeColor,

        },

      }"

    ></a-config-provider>

themeColorState.themeColor:为状态管理的主题色。