使用 useToken 获取不到最新的主题颜色

[songpeng154]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

4.0.0-beta.4

Environment

vite4.3.3 、vue3.2

Reproduction link

https://stackblitz.com/edit/vitejs-vite-vz6cxc?file=package.json,vite.config.ts,src%2FApp.vue&terminal=dev

Steps to reproduce

1、设置主题默认颜色后，通过 useToken 获取不到最新的主题颜色
2、切换到暗黑模式后，通过 useToken 获取不到最新的文本、背景...颜色

What is expected?

期望获取最新的主题颜色

What is actually happening?

获取不到最新的主要颜色

[songpeng154]

控制台打印的颜色还是组件库默认的颜色

[aibayanyu20]

按需加载使用非同一实例解决方案

[songpeng154]

按需加载使用非同一个实例解决方案

颜色如何同步呢？

[songpeng154]

按需加载使用非同一实例解决方案

哥们，你这个解决方案里颜色也没有同步呀

[aibayanyu20]

和config-provider同级使用的情况确实有些小问题参考用法

[CCherry07]

https://stackblitz.com/edit/vitejs-vite-27mn8y?file=package.json,src%2Fcomponents%2FHelloWorld.vue,src%2FApp.vue&terminal=dev

@aibayanyu20 @thikiiii

[aibayanyu20]

在config-provider同层级下建议使用方式：

import { theme } from 'ant-design-vue';
const token = computed(() => theme.useToken()?.token.value);

[aibayanyu20]

stackblitz.com/edit/vitejs-vite-27mn8y?file=package.json,src%2Fcomponents%2FHelloWorld.vue,src%2FApp.vue&terminal=dev

@aibayanyu20 @thikiiii

这种写法在和config-provider同层的情况下也是有点儿问题demo1

[CCherry07]

是变化的 @aibayanyu20
但是取 colorPrimary 是undefined

[aibayanyu20]

是变化的 @aibayanyu20 但是取 colorPrimary 是undefined

我测试了一下拿到的是默认值，useToken里面使用的是inject，在同层级下configprovider还没有注册provider导致的，不确定有什么好的方案可以解决这个问题

[Yacj]

同样的问题 监听token 不同主题 css var 都是一样的 有什么好办法解决

[songpeng154]

可以定义一个组件，当作 configprovider 的 子组件，专门用来获取 token 的，这样就可以监听到最新的值的

[songpeng154]

可以定义一个组件，当作 configprovider 的 子组件，专门用来获取 token 的，这样就可以监听到最新的值的

我测了一下这个办法，是可行的 @Yacj