fix: update style

src/App.vue

@@ -27,9 +27,9 @@ limitations under the License. -->
     }
   }, 500);
 </script>
-<style>
+<style lang="scss">
   #app {
-    color: #2c3e50;
+    color: $font-color;
     height: 100%;
     overflow: hidden;
   }

src/layout/components/NavBar.vue

@@ -51,8 +51,16 @@ limitations under the License. -->
       <span title="refresh" class="ghost ml-5 cp" @click="handleReload">
         <Icon iconName="retry" :loading="appStore.autoRefresh" class="middle" />
       </span>
-      <span class="ghost ml-5">
-        <el-switch v-model="theme" @change="changeTheme" />
+      <span class="ml-5">
+        <el-switch
+          v-model="theme"
+          active-text="D"
+          inactive-text="H"
+          size="small"
+          inactive-color="#999"
+          inline-prompt
+          @change="changeTheme"
+        />
       </span>
       <span class="version ml-5 cp">
         <el-popover trigger="hover" width="250" placement="bottom" effect="light" :content="appStore.version">

src/styles/theme.scss

@@ -20,7 +20,6 @@
   --theme-background: #fff;
   --font-color: #3d444f;
   --disabled-color: #ccc;
-  --el-switch-off: #999;
   --el-text-color-regular: #606266;
   --dashboard-tool-bg: rgb(240 242 245);
   --text-color-placeholder: #666;
@@ -28,21 +27,16 @@
 }
 
 .dark {
-  --el-color-primary: #1c2022;
+  --el-color-primary: #409eff;
   --theme-background: #000;
   --font-color: #fafbfc;
   --disabled-color: #ccc;
-  --el-switch-off: #bbb;
   --el-text-color-regular: #fafbfc;
   --dashboard-tool-bg: #212224;
   --text-color-placeholder: #ccc;
   --border-color: #222;
 }
 
-.el-switch {
-  --el-switch-on-color: var(--el-color-primary);
-  --el-switch-off-color: var(--el-switch-off);
-}
 .el-breadcrumb__separator {
   --el-text-color-placeholder: var(--text-color-placeholder);
 }