fix(use-theme-vars): doesn't apply theme overrides, closes #1194, closes

#1176
tusen-ai · Sep 19, 2021 · 56d5161 · 56d5161
1 parent d0ba4ff
commit 56d5161
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -24,6 +24,7 @@
 - Fix `n-select` focus input when closing tag with `filterable` , closes [#1170](https://github.com/TuSimple/naive-ui/issues/1170).
 - Fix `n-button` border on hover conflicts with `n-badge`, closes [#1195](https://github.com/TuSimple/naive-ui/issues/1195).
 - Fix `n-upload` prop `v-model:file-list` dosen't work well when prop `multiple` is `true`, closes [#418](https://github.com/TuSimple/naive-ui/issues/418).
+- Fix `useThemeVars` doesn't apply theme overrides, closes [#1194](https://github.com/TuSimple/naive-ui/issues/1194), [#1176](https://github.com/TuSimple/naive-ui/issues/1176).
 
 ## 2.18.2 (2021-09-14)
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -24,6 +24,7 @@
 - 修复 `n-select` `filterable` 下关闭标签 input 光标聚焦问题，关闭 [#1170](https://github.com/TuSimple/naive-ui/issues/1170)
 - 修复 `n-button` 在 hover 状态下边框与 `n-badge` 冲突，关闭 [#1195](https://github.com/TuSimple/naive-ui/issues/1195)
 - 修复 `n-upload` 的 `v-model:file-list` 属性在 `multiple` 属性设为 `true` 的时候没有正确更新，关闭 [#418](https://github.com/TuSimple/naive-ui/issues/418)
+- 修复 `useThemeVars` 未应用覆盖的变量值，关闭 [#1194](https://github.com/TuSimple/naive-ui/issues/1194), [#1176](https://github.com/TuSimple/naive-ui/issues/1176)
 
 ## 2.18.2 (2021-09-14)
 

diff --git a/src/composables/use-theme-vars.ts b/src/composables/use-theme-vars.ts
@@ -8,13 +8,14 @@ export function useThemeVars (): ComputedRef<ThemeCommonVars> {
     const configProviderInjection = inject(configProviderInjectionKey, null)
     if (configProviderInjection === null) return commonLight
     const {
-      mergedThemeRef: { value: mergedTheme }
+      mergedThemeRef: { value: mergedTheme },
+      mergedThemeOverridesRef: { value: mergedThemeOverrides }
     } = configProviderInjection
-    if (mergedTheme) {
-      const { common } = mergedTheme
-      return common || commonLight
+    const currentThemeVars = mergedTheme?.common || commonLight
+    if (mergedThemeOverrides?.common) {
+      return Object.assign({}, currentThemeVars, mergedThemeOverrides.common)
     } else {
-      return commonLight
+      return currentThemeVars
     }
   })
 }