From da9fc065c34cfe528ce6702ac88a3852620a54d8 Mon Sep 17 00:00:00 2001
From: Frost-ZX <frost-zx@foxmail.com>
Date: Wed, 28 Aug 2024 13:42:06 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E8=B0=83=E6=95=B4=20Naive=20UI=20?=
 =?UTF-8?q?=E4=B8=BB=E9=A2=98=E5=8F=98=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                 | 20 ++++++++++++--------
 src/assets/js/naive-ui.js   | 26 ++++++++++++++++++++++++++
 src/components/AppAside.vue |  2 +-
 3 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 3a005d2..1b0cee8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,12 +4,13 @@
     :inline-theme-disabled="configProviderProps.inlineThemeDisabled"
     :locale="configProviderProps.locale"
     :style="{
-      '--color-error': themeVars.errorColor,
-      '--color-info': themeVars.infoColor,
-      '--color-primary': themeVars.primaryColor,
-      '--color-success': themeVars.successColor,
-      '--color-warning': themeVars.warningColor,
+      '--color-error': themeCommon.errorColor,
+      '--color-info': themeCommon.infoColor,
+      '--color-primary': themeCommon.primaryColor,
+      '--color-success': themeCommon.successColor,
+      '--color-warning': themeCommon.warningColor,
     }"
+    :theme-overrides="themeOverrides"
   >
 
     <!-- Naive UI 全局样式 -->
@@ -28,7 +29,7 @@
 
 <script setup>
 import {
-  NConfigProvider, NGlobalStyle, useThemeVars,
+  NConfigProvider, NGlobalStyle,
 } from 'naive-ui';
 
 import {
@@ -37,8 +38,11 @@ import {
 
 import AppAside from './components/AppAside.vue';
 
-/** 主题变量 */
-const themeVars = useThemeVars();
+/** 主题变量配置 */
+const themeOverrides = configProviderProps.themeOverrides;
+
+/** 主题变量配置 - common */
+const themeCommon = themeOverrides.common;
 </script>
 
 <style lang="less">
diff --git a/src/assets/js/naive-ui.js b/src/assets/js/naive-ui.js
index cd7e0ba..0715c64 100644
--- a/src/assets/js/naive-ui.js
+++ b/src/assets/js/naive-ui.js
@@ -10,4 +10,30 @@ export const configProviderProps = {
   // 禁用 inline 主题
   inlineThemeDisabled: true,
 
+  // 调整主题变量
+  themeOverrides: {
+    common: {
+      primaryColor: '#0894FA',
+      primaryColorHover: '#6BB2FF',
+      primaryColorPressed: '#007AD3',
+      primaryColorSuppl: '#6BB2FF',
+      infoColor: '#0052D9',
+      infoColorHover: '#366EF4',
+      infoColorPressed: '#003CAB',
+      infoColorSuppl: '#366EF4',
+      successColor: '#00A870',
+      successColorHover: '#48C79C',
+      successColorPressed: '#078D5C',
+      successColorSuppl: '#48C79C',
+      warningColor: '#ED7B2F',
+      warningColorHover: '#F2995F',
+      warningColorPressed: '#D35A21',
+      warningColorSuppl: '#F2995F',
+      errorColor: '#E34D59',
+      errorColorHover: '#F36D78',
+      errorColorPressed: '#C9353F',
+      errorColorSuppl: '#F36D78',
+    },
+  },
+
 };
diff --git a/src/components/AppAside.vue b/src/components/AppAside.vue
index 7b08bf3..bc2abb6 100644
--- a/src/components/AppAside.vue
+++ b/src/components/AppAside.vue
@@ -131,7 +131,7 @@ onBeforeMount(() => {
 
   &:hover, &.is-active {
     background-color: #F2F2F2;
-    color: var(--color-info);
+    color: var(--color-primary);
   }
 
   span {