From 56d516108bbd05b00835b37b946c1afe0c913796 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Sun, 19 Sep 2021 17:15:25 +0800
Subject: [PATCH] fix(use-theme-vars): doesn't apply theme overrides, closes
 #1194, closes #1176

---
 CHANGELOG.en-US.md                |  1 +
 CHANGELOG.zh-CN.md                |  1 +
 src/composables/use-theme-vars.ts | 11 ++++++-----
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index 8e414a64e..0c7d8ca80 100644
--- 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
index 08c9e5c3b..13bd68658 100644
--- 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
index 20e06d117..6bde443ae 100644
--- 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
     }
   })
 }