From 9e73f52dcf492c6e2dfa6c460a1ae861380d4ead Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Tue, 7 Nov 2023 16:31:58 +0800
Subject: [PATCH] fix: update style

---
 src/App.vue                      |  4 ++--
 src/layout/components/NavBar.vue | 12 ++++++++++--
 src/styles/theme.scss            |  8 +-------
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 93c3bce8..3591a9e9 100644
--- a/src/App.vue
+++ b/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;
   }
diff --git a/src/layout/components/NavBar.vue b/src/layout/components/NavBar.vue
index 1112823f..6fad8bf6 100644
--- a/src/layout/components/NavBar.vue
+++ b/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">
diff --git a/src/styles/theme.scss b/src/styles/theme.scss
index 550968e6..69c4fa8b 100644
--- a/src/styles/theme.scss
+++ b/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);
 }