[Opt] ⚡️ Use Global ThemeMode instead of Part's to Optimize Performance

Author: Harry-zklcdc

frontend/src/App.vue

@@ -1,6 +1,34 @@
 <script setup lang="ts">
-import { NMessageProvider, NConfigProvider, type GlobalThemeOverrides, NDialogProvider } from 'naive-ui';
+import { ref, onMounted, provide } from 'vue';
+import { NMessageProvider, NConfigProvider, lightTheme, darkTheme, type GlobalThemeOverrides, NDialogProvider } from 'naive-ui';
 import { RouterView } from 'vue-router';
+import { storeToRefs } from 'pinia';
+import { useUserStore } from '@/stores/modules/user';
+
+const userStore = useUserStore();
+const { themeMode } = storeToRefs(userStore);
+
+let theme = ref(lightTheme);
+provide('theme', theme);
+
+onMounted(() => {
+  const body = document.querySelector('body');
+  if (themeMode.value == 'light') {
+    theme.value = lightTheme;
+    body?.setAttribute('style', 'background-color: #f0f0f0');
+  } else if (themeMode.value == 'dark') {
+    theme.value = darkTheme;
+    body?.setAttribute('style', 'background-color: #111111');
+  } else if (themeMode.value == 'auto') {
+    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+      theme.value = darkTheme;
+      body?.setAttribute('style', 'background-color: #1d1d1d');
+    } else {
+      theme.value = lightTheme;
+      body?.setAttribute('style', 'background-color: #141414');
+    }
+  }
+})
 
 const themeOverrides: GlobalThemeOverrides = {
   common: {
@@ -13,10 +41,10 @@ const themeOverrides: GlobalThemeOverrides = {
 </script>
 
 <template>
-  <NConfigProvider :theme-overrides="themeOverrides">
+  <NConfigProvider :theme="theme" :theme-overrides="themeOverrides">
     <NDialogProvider>
       <NMessageProvider>
-        <RouterView />
+        <RouterView/>
       </NMessageProvider>
     </NDialogProvider>
   </NConfigProvider>