ConfigProvider 通过 theme 修改主题 #7589
Description
Version
4.2.1
Environment
vue: 3.4
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变量属性？