From f95015ad02bbb3ddde792040feae067eaf2435bd Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Fri, 10 Nov 2023 11:55:54 +0800
Subject: [PATCH] feat: update topology theme

---
 src/layout/components/NavBar.vue                 |  4 ++--
 src/styles/theme.scss                            |  9 +++++++--
 src/views/dashboard/panel/Tool.vue               |  1 -
 .../components/ProcessTopology.vue               |  2 +-
 .../related/topology/components/Graph.vue        | 16 ++++++----------
 .../related/topology/components/Settings.vue     |  4 ++--
 6 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/layout/components/NavBar.vue b/src/layout/components/NavBar.vue
index 3fe33470..8f16e0ee 100644
--- a/src/layout/components/NavBar.vue
+++ b/src/layout/components/NavBar.vue
@@ -52,7 +52,7 @@ limitations under the License. -->
         <Icon iconName="retry" :loading="appStore.autoRefresh" class="middle" />
       </span>
       <span class="ml-5">
-        <el-switch v-model="theme" active-text="D" inactive-text="L" size="small" inline-prompt @change="changeTheme" />
+        <el-switch v-model="theme" :active-icon="Moon" :inactive-icon="Sunny" inline-prompt @change="changeTheme" />
       </span>
       <span class="version ml-5 cp">
         <el-popover trigger="hover" width="250" placement="bottom" :content="appStore.version">
@@ -77,7 +77,7 @@ limitations under the License. -->
   import { MetricCatalog } from "@/views/dashboard/data";
   import type { DashboardItem } from "@/types/dashboard";
   import router from "@/router";
-  import { ArrowRight } from "@element-plus/icons-vue";
+  import { ArrowRight, Moon, Sunny } from "@element-plus/icons-vue";
 
   /*global Indexable */
   const { t, te } = useI18n();
diff --git a/src/styles/theme.scss b/src/styles/theme.scss
index f4be5436..7823221f 100644
--- a/src/styles/theme.scss
+++ b/src/styles/theme.scss
@@ -27,7 +27,6 @@ html {
   --border-color-primary: #eee;
   --layout-background: #f7f9fa;
   --box-shadow-color: #ccc;
-  --el-border: 1px solid #000000;
   --sw-bg-color-overlay: #fff;
   --sw-border-color-light: #e4e7ed;
   --popper-hover-bg: #eee;
@@ -40,6 +39,9 @@ html {
   --sw-topology-operations-bg: #f7f9fa;
   --vis-tooltip-bg: #fff;
   --sw-topology-switch-icon: rgba(0, 0, 0, 0.3);
+  --sw-topology-box-shadow: #eee 1px 2px 10px;
+  --sw-topology-setting-bg: #fff;
+  --sw-topology-border: 1px solid #000000;
 }
 
 html.dark {
@@ -64,7 +66,10 @@ html.dark {
   --sw-topology-color: #ccc;
   --sw-topology-operations-bg: #4b4b52;
   --vis-tooltip-bg: #414243;
-  --sw-topology-switch-icon: rgba(0, 0, 0, 0.3);
+  --sw-topology-switch-icon: #aaa;
+  --sw-topology-box-shadow: 0 0 2px 0 #444;
+  --sw-topology-setting-bg: #333;
+  --sw-topology-border: 1px solid #999;
 }
 
 .el-table tr {
diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue
index 619becdb..1541fb31 100644
--- a/src/views/dashboard/panel/Tool.vue
+++ b/src/views/dashboard/panel/Tool.vue
@@ -120,7 +120,6 @@ limitations under the License. -->
           v-model="dashboardStore.editMode"
           active-text="E"
           inactive-text="V"
-          size="small"
           inline-prompt
           @change="changeMode"
         />
diff --git a/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue b/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue
index b8afe084..41df88ed 100644
--- a/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue
+++ b/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue
@@ -568,7 +568,7 @@ limitations under the License. -->
     position: absolute;
     visibility: hidden;
     padding: 5px;
-    border: 1px solid #000;
+    border: var(--sw-topology-border);
     border-radius: 3px;
     background-color: $theme-background;
   }
diff --git a/src/views/dashboard/related/topology/components/Graph.vue b/src/views/dashboard/related/topology/components/Graph.vue
index f85249a7..b2f384ad 100644
--- a/src/views/dashboard/related/topology/components/Graph.vue
+++ b/src/views/dashboard/related/topology/components/Graph.vue
@@ -724,13 +724,9 @@ limitations under the License. -->
       border-radius: 3px;
       color: $disabled-color;
       border: 1px solid $border-color-primary;
-      background-color: $theme-background;
-      box-shadow: #eee 1px 2px 10px;
+      background-color: var(--sw-topology-setting-bg);
+      box-shadow: var(--sw-topology-box-shadow);
       transition: all 0.5ms linear;
-
-      &.dark {
-        background-color: #2b3037;
-      }
     }
 
     .label {
@@ -746,8 +742,8 @@ limitations under the License. -->
       background-color: var(--sw-topology-operations-bg);
       border-radius: 5px;
       padding: 10px 0;
-      border: 1px solid #999;
-      box-shadow: #ddd 1px 2px 10px;
+      border: 1px solid $border-color-primary;
+      box-shadow: --sw-topology-box-shadow;
 
       span {
         display: block;
@@ -772,7 +768,7 @@ limitations under the License. -->
     .switch-icon {
       cursor: pointer;
       transition: all 0.5ms linear;
-      background: rgb(0 0 0 / 30%);
+      background: var(--sw-topology-switch-icon);
       color: $text-color;
       display: inline-block;
       padding: 2px 4px;
@@ -810,7 +806,7 @@ limitations under the License. -->
     position: absolute;
     visibility: hidden;
     padding: 5px;
-    border: 1px solid #000;
+    border: var(--sw-topology-border);
     border-radius: 3px;
     background-color: $theme-background;
   }
diff --git a/src/views/dashboard/related/topology/components/Settings.vue b/src/views/dashboard/related/topology/components/Settings.vue
index d2074f36..5fbea92b 100644
--- a/src/views/dashboard/related/topology/components/Settings.vue
+++ b/src/views/dashboard/related/topology/components/Settings.vue
@@ -640,14 +640,14 @@ limitations under the License. -->
   }
 
   .title {
-    color: #666;
+    color: var(--sw-topology-color);
     margin-bottom: 0;
   }
 
   .label {
     font-size: $font-size-smaller;
     margin-top: 10px;
-    color: #666;
+    color: var(--sw-topology-color);
   }
 
   .legend-btn {