feat: add border primary color

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="H" size="small" inline-prompt @change="changeTheme" />
+        <el-switch v-model="theme" active-text="D" inactive-text="L" size="small" 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

@@ -24,6 +24,7 @@
   --dashboard-tool-bg: rgb(240 242 245);
   --text-color-placeholder: #666;
   --border-color: #dcdfe6;
+  --border-color-primary: #eee;
   --layout-background: #f7f9fa;
   --el-switch-off: #999;
 }
@@ -37,6 +38,7 @@
   --dashboard-tool-bg: #000;
   --text-color-placeholder: #ccc;
   --border-color: #262629;
+  --border-color-primary: #666;
   --layout-background: #000;
   --el-switch-off: #999;
 }
@@ -50,6 +52,7 @@
   --el-text-color-placeholder: var(--text-color-placeholder);
 }
 
+$border-color-primary: var(--border-color-primary);
 $layout-background: var(--layout-background);
 $border-color: var(--border-color);
 $dashboard-tool-bg-color: var(--dashboard-tool-bg);

src/views/dashboard/Widget.vue

@@ -186,7 +186,7 @@ limitations under the License. -->
 <style lang="scss" scoped>
   .content {
     min-width: 100px;
-    border: 1px solid #eee;
+    border: 1px solid $border-color-primary;
     background-color: $theme-background;
     position: relative;
   }

src/views/dashboard/configuration/ContinuousProfiling.vue

@@ -91,7 +91,7 @@ limitations under the License. -->
     position: fixed;
     bottom: 0;
     right: 0;
-    border-top: 1px solid #eee;
+    border-top: 1px solid $border-color;
     padding: 10px;
     text-align: right;
     width: 100%;

src/views/dashboard/configuration/Event.vue

@@ -68,7 +68,7 @@ limitations under the License. -->
     position: fixed;
     bottom: 0;
     right: 0;
-    border-top: 1px solid #eee;
+    border-top: 1px solid $border-color-primary;
     padding: 10px;
     text-align: right;
     width: 100%;

src/views/dashboard/configuration/Text.vue

@@ -151,7 +151,7 @@ limitations under the License. -->
     position: fixed;
     bottom: 0;
     right: 0;
-    border-top: 1px solid #eee;
+    border-top: 1px solid $border-color-primary;
     padding: 10px;
     text-align: right;
     width: 100%;

src/views/dashboard/configuration/ThirdPartyApp.vue

@@ -80,7 +80,7 @@ limitations under the License. -->
     position: fixed;
     bottom: 0;
     right: 0;
-    border-top: 1px solid #eee;
+    border-top: 1px solid $border-color-primary;
     padding: 10px;
     text-align: right;
     width: 100%;

src/views/dashboard/configuration/TimeRange.vue

@@ -147,7 +147,7 @@ limitations under the License. -->
     position: fixed;
     bottom: 0;
     right: 0;
-    border-top: 1px solid #eee;
+    border-top: 1px solid $border-color-primary;
     padding: 10px;
     text-align: right;
     width: 100%;

src/views/dashboard/configuration/Topology.vue

@@ -63,7 +63,7 @@ limitations under the License. -->
     position: fixed;
     bottom: 0;
     right: 0;
-    border-top: 1px solid #eee;
+    border-top: 1px solid $border-color-primary;
     padding: 10px;
     text-align: right;
     width: 100%;

src/views/dashboard/configuration/Widget.vue

@@ -201,7 +201,7 @@ limitations under the License. -->
   .graph {
     position: relative;
     min-width: 1280px;
-    border: 1px solid #eee;
+    border: 1px solid $border-color-primary;
     background-color: $theme-background;
   }
 
@@ -249,7 +249,7 @@ limitations under the License. -->
     position: fixed;
     bottom: 0;
     right: 0;
-    border-top: 1px solid #eee;
+    border-top: 1px solid $border-color-primary;
     padding: 10px;
     text-align: right;
     width: 100%;

src/views/dashboard/controls/Tab.vue

@@ -350,7 +350,7 @@ limitations under the License. -->
   .tab-header {
     justify-content: space-between;
     width: 100%;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid $border-color-primary;
   }
 
   .vue-grid-layout {

src/views/dashboard/controls/Widget.vue

@@ -277,7 +277,7 @@ limitations under the License. -->
     height: 30px;
     padding: 5px;
     width: 100%;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid $border-color-primary;
     justify-content: space-between;
   }
 

src/views/dashboard/related/log/LogTable/Index.vue

@@ -74,7 +74,7 @@ limitations under the License. -->
   .log {
     font-size: $font-size-smaller;
     height: 100%;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid $border-color-primary;
     width: 100%;
     overflow: auto;
   }

src/views/dashboard/related/topology/components/Graph.vue

@@ -716,7 +716,7 @@ limitations under the License. -->
       padding: 0 15px;
       border-radius: 3px;
       color: $disabled-color;
-      border: 1px solid #eee;
+      border: 1px solid $border-color-primary;
       background-color: $theme-background;
       box-shadow: #eee 1px 2px 10px;
       transition: all 0.5ms linear;

src/views/dashboard/related/topology/components/PodTopology.vue

@@ -281,7 +281,7 @@ limitations under the License. -->
     right: 10px;
     width: 400px;
     height: 600px;
-    border: 1px solid #eee;
+    border: 1px solid $border-color-primary;
     background-color: $theme-background;
     overflow: auto;
     padding: 10px 15px;

src/views/dashboard/related/trace/Detail.vue

@@ -173,13 +173,13 @@ limitations under the License. -->
   .trace-detail-wrapper {
     font-size: $font-size-smaller;
     padding: 5px 10px;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid $border-color-primary;
     width: 100%;
     height: 95px;
 
     .grey {
       color: $text-color;
-      background-color: #448dfe;
+      background-color: $active-background;
     }
 
     .ghost {