feat: 优化背景，增加暗黑模式自动判断

src/layout/routerView/parent.vue

@@ -3,7 +3,7 @@
     <router-view v-slot="{ Component }">
       <transition :name="setTransitionName" mode="out-in">
         <keep-alive :include="keepAliveNameList">
-          <component :is="Component" :key="refreshRouterViewKey" class="w100" :style="{ minHeight }" />
+          <component :is="Component" :key="refreshRouterViewKey" class="page-wrapper w100" :style="{ minHeight }" />
         </keep-alive>
       </transition>
     </router-view>

src/main.ts

@@ -33,18 +33,32 @@ other.elSvg(app);
 
 app.component('pagination', pagination)
 app.use(router)
-    .use(store, key)
-    .use(ElementPlus, { i18n: i18n.global.t })
-    .use(i18n)
-    .use(JsonViewer)
-    .use(VueGridLayout)
-    .use(VForm3)
-    // .use(BaiduMap, { ak: 'Kp8XHK81HSF6rfRkYP7OxYKtK8IaG51d', type: 'WebGl', v: '2.0' })
-    .mount('#app');
+  .use(store, key)
+  .use(ElementPlus, { i18n: i18n.global.t })
+  .use(i18n)
+  .use(JsonViewer)
+  .use(VueGridLayout)
+  .use(VForm3)
+  // .use(BaiduMap, { ak: 'Kp8XHK81HSF6rfRkYP7OxYKtK8IaG51d', type: 'WebGl', v: '2.0' })
+  .mount('#app');
 
 // 全局挂载
 app.config.globalProperties.getUpFileUrl = getUpFileUrl
 app.config.globalProperties.handleTree = handleTree
 app.config.globalProperties.useDict = useDict
 app.config.globalProperties.selectDictLabel = selectDictLabel
-app.config.globalProperties.mittBus = mitt();
+app.config.globalProperties.mittBus = mitt();
+
+
+const matchMedia = window.matchMedia('(prefers-color-scheme: light)')
+
+matchMedia.addEventListener('change', function () {
+  // console.log(`当前的主题是:${this.matches ? 'light' : 'dark'}`)
+  setTheme(this.matches)
+})
+
+function setTheme(matches: Boolean) {
+  const body = document.documentElement as HTMLElement;
+  body.setAttribute('data-theme', matches ? '' : 'dark');
+  document.querySelector('html')!.className = matches ? '' : 'dark'
+}

src/store/modules/themeConfig.ts

@@ -89,8 +89,8 @@ const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
 			isGrayscale: false,
 			// 是否开启色弱模式
 			isInvert: false,
-			// 是否开启深色模式
-			isIsDark: false,
+			// 是否开启深色模式, 自动获取当前模式
+			isIsDark: window.matchMedia('(prefers-color-scheme: light)').matches,
 			// 是否开启水印
 			isWartermark: false,
 			// 水印文案

src/theme/fast.scss

@@ -1,4 +1,8 @@
 // 全局页面，适配双色
+.dark .page-wrapper {
+	background: var(--next-bg-main-color);
+}
+
 .page {
 	height       : 100%;
 	overflow-y   : auto;
@@ -7,6 +11,7 @@
 	color        : var(--el-text-color-primary);
 	border-radius: var(--el-card-border-radius);
 
+
 	&.padding {
 		padding: 20px;
 	}

src/views/system/monitor/server/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="page" v-loading="loading">
+  <div class="" v-loading="loading">
     <el-row :gutter="15">
       <el-col :xs="24" :sm="12" :md="8" class="mb-4">
         <el-card shadow="nover" class="box-card-meter">