ConfigProvider 通过 theme 修改主题

Version

4.2.1

Environment

Reproduction link

configprovider-config ConfigProvider 中配置主题

Steps to reproduce

先通过 a-config-provider标签设置了theme的token颜色圆角

随后设置暗色主题 algorithm: [theme.compactAlgorithm, theme.darkAlgorithm] 到这都是正常的

之后通过ConfigProvider.config() 里的theme属性设置主题色导致组件message, Modal, notification的暗色主题失效

<template> 
  <a-config-provider :theme="themeConfig">
    <div>
      <a-button type="primary" @click="handleModal">Modal Click</a-button>

      <!-- 点击确定后异步关闭对话框，例如提交表单。 -->
      <a-button type="primary" @click="showModal">
        Modal with async logic
      </a-button>
      <a-modal
        v-model:open="open"
        title="Title"
        :confirm-loading="confirmLoading"
        @ok="handleOk"
      >
        <p>{{ modalText }}</p>
      </a-modal>

      <a-tooltip placement="top">
        <template #title>
          <span>prompt text</span>
        </template>
        <a-button type="dashed" @click="handleClick">Message Click</a-button>
      </a-tooltip>
      <a-button type="default" @click="handleNotification">
        Notification box
      </a-button>
      <a-popconfirm
        title="Title"
        @confirm="handleConfirm"
        @cancel="handleCancel"
      >
        <a-button type="primary">Open Popconfirm with Promise</a-button>
      </a-popconfirm>
    </div>
    <div>
      <a-button type="primary" @click="handleConfigProvider"
        >Set ConfigProvider Theme</a-button
      >
    </div>
  </a-config-provider>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { message, Modal, notification } from "ant-design-vue";
import { ConfigProvider, theme } from "ant-design-vue";
import type { ThemeConfig } from "ant-design-vue/es/config-provider/context";

const themeConfig = reactive<ThemeConfig>({
  algorithm: [theme.compactAlgorithm, theme.darkAlgorithm],
  token: {
    // colorBgContainer: "#fff",
    colorPrimary: "#1668dc", // "#722ED1",
    borderRadius: 6,
  },
});

const handleConfigProvider = () => {
  ConfigProvider.config({
    theme: {
      primaryColor: "#722ED1",
    },
  });

  message.success("Message handleConfigProvider clicked!");
};

const handleClick = () => {
  console.log("handleClick");
  message.success("Message Button clicked!");
};

function handleModal() {
  Modal.confirm({
    title: "Are you sure Modal this task?",
    content: "Some descriptions",
    okText: "Yes",
    okType: "danger",
    cancelText: "No",
    onOk() {
      console.log("OK");
      message.warning("Modal Button clicked!");
    },
    onCancel() {
      console.log("Cancel");
    },
  });
}

const handleConfirm = (e: MouseEvent) => {
  console.log(e);
  return new Promise((resolve) => {
    setTimeout(() => resolve(true), 3000);
  });
};

const handleCancel = (e: MouseEvent) => {
  console.log(e);
  message.error("Click on No");
};

const handleNotification = () => {
  notification.open({
    message: "Notification Title",
    description:
      "This is the content of the notification. This is the content of the notification. This is the content of the notification.",
    onClick: () => {
      message.info("Notification Clicked!");
    },
  });
};

// 点击确定后异步关闭对话框，例如提交表单。
const modalText = ref<string>("Content of the modal");
const open = ref<boolean>(false);
const confirmLoading = ref<boolean>(false);
const showModal = () => {
  open.value = true;
};
const handleOk = () => {
  modalText.value = "The modal will be closed after two seconds";
  confirmLoading.value = true;
  setTimeout(() => {
    open.value = false;
    confirmLoading.value = false;
  }, 2000);
};
</script>

<style scoped lang="css"></style>

What is expected?

通过ConfigProvider.config() 里的theme属性会导致暗色主题失效

What is actually happening?

ConfigProvider.config()在文档上没对theme属性说明，不确定是不是废弃的属性。

若是废弃的属性能否给个注释说明，若是真的在v4中删除的就移除掉吧。

发现 ConfigProvider.config() 设置的颜色会生成 :root {} 的变量，v4是否还会使用css变量属性？

vueComponent / ant-design-vue