feat(layouts): 添加侧边栏/头部的反转模式来增加对比度

src/layouts/common/GlobalHeader/components/FullScreen.vue

@@ -1,5 +1,5 @@
 <template>
-  <hover-container class="w-40px h-full" tooltip-content="全屏" @click="toggle">
+  <hover-container class="w-40px h-full" tooltip-content="全屏" content-class="hover:text-primary" @click="toggle">
     <icon-gridicons-fullscreen-exit v-if="isFullscreen" class="text-18px" />
     <icon-gridicons-fullscreen v-else class="text-18px" />
   </hover-container>

src/layouts/common/GlobalHeader/components/GithubSite.vue

@@ -1,7 +1,7 @@
 <template>
-  <hover-container tooltip-content="github" class="w-40px h-full">
+  <hover-container tooltip-content="github" class="w-40px h-full" content-class="hover:text-primary">
     <a href="https://github.com/honghuangdc/soybean-admin" target="_blank" class="flex-center">
-      <icon-mdi-github class="text-20px text-[#666]" />
+      <icon-mdi-github class="text-20px" />
     </a>
   </hover-container>
 </template>

src/layouts/common/GlobalHeader/components/HeaderMenu.vue

@@ -1,16 +1,23 @@
 <template>
-  <n-menu :value="activeKey" mode="horizontal" :options="menus" @update:value="handleUpdateMenu" />
+  <n-menu
+    :value="activeKey"
+    mode="horizontal"
+    :options="menus"
+    :inverted="theme.header.inverted"
+    @update:value="handleUpdateMenu"
+  />
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 import type { MenuOption } from 'naive-ui';
-import { useRouteStore } from '@/store';
+import { useRouteStore, useThemeStore } from '@/store';
 import { useRouterPush } from '@/composables';
 
 const route = useRoute();
 const routeStore = useRouteStore();
+const theme = useThemeStore();
 const { routerPush } = useRouterPush();
 
 const menus = computed(() => routeStore.menus as GlobalMenuOption[]);

src/layouts/common/GlobalHeader/components/UserAvatar.vue

@@ -1,6 +1,6 @@
 <template>
   <n-dropdown :options="options" @select="handleDropdown">
-    <hover-container class="px-12px">
+    <hover-container class="px-12px" content-class="hover:text-primary">
       <icon-custom-avatar class="text-32px" />
       <span class="pl-8px text-16px font-medium">{{ auth.userInfo.userName }}</span>
     </hover-container>