feat: add border color

src/layout/components/AppMain.vue

@@ -24,7 +24,7 @@ limitations under the License. -->
 <style lang="scss" scoped>
   .app-main {
     height: calc(100% - 40px);
-    background: #f7f9fa;
+    background: $layout-background;
     overflow: auto;
   }
 </style>

src/layout/components/NavBar.vue

@@ -52,15 +52,7 @@ limitations under the License. -->
         <Icon iconName="retry" :loading="appStore.autoRefresh" class="middle" />
       </span>
       <span class="ml-5">
-        <el-switch
+        <el-switch v-model="theme" active-text="D" inactive-text="H" size="small" inline-prompt @change="changeTheme" />
-          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">
@@ -97,6 +89,7 @@ limitations under the License. -->
   const pageTitle = ref<string>("");
   const theme = ref<boolean>(false);
 
+  changeTheme();
   resetDuration();
   getVersion();
   getNavPaths();
@@ -317,12 +310,6 @@ limitations under the License. -->
     font-size: $font-size-smaller;
   }
 
-  .nav-bar.dark {
-    background-color: $theme-background;
-    border-bottom: 1px solid #252a2f;
-    color: $theme-background;
-  }
-
   .title {
     font-size: $font-size-normal;
     font-weight: 500;

src/styles/theme.scss

@@ -23,26 +23,36 @@
   --el-text-color-regular: #606266;
   --dashboard-tool-bg: rgb(240 242 245);
   --text-color-placeholder: #666;
-  --border-color: #dfe4e8;
+  --border-color: #dcdfe6;
+  --layout-background: #f7f9fa;
+  --el-switch-off: #999;
 }
 
 .dark {
   --el-color-primary: #409eff;
-  --theme-background: #000;
+  --theme-background: #36383d;
   --font-color: #fafbfc;
   --disabled-color: #ccc;
   --el-text-color-regular: #fafbfc;
-  --dashboard-tool-bg: #212224;
+  --dashboard-tool-bg: #000;
   --text-color-placeholder: #ccc;
-  --border-color: #222;
+  --border-color: #262629;
+  --layout-background: #000;
+  --el-switch-off: #999;
+}
+
+.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);
 }
 
+$layout-background: var(--layout-background);
 $border-color: var(--border-color);
-$dashboard-tool-bg: var(--dashboard-tool-bg);
+$dashboard-tool-bg-color: var(--dashboard-tool-bg);
 $font-color: var(--font-color);
 $text-color: var(--theme-background);
 $disabled-color: var(--disabled-color);

src/views/dashboard/configuration/widget/metric/Index.vue

@@ -630,7 +630,7 @@ limitations under the License. -->
   .expression-param {
     display: inline-block;
     width: 400px;
-    border: 1px solid #dcdfe6;
+    border: 1px solid $border-color;
     cursor: text;
     padding: 0 5px;
     border-radius: 3px;

src/views/dashboard/controls/ContinuousProfiling.vue

@@ -75,7 +75,7 @@ limitations under the License. -->
   .header {
     padding: 10px;
     font-size: $font-size-smaller;
-    border-bottom: 1px solid #dcdfe6;
+    border-bottom: 1px solid $border-color;
   }
 
   .tools {
@@ -95,6 +95,6 @@ limitations under the License. -->
     font-weight: bold;
     line-height: 40px;
     padding: 0 10px;
-    border-bottom: 1px solid #dcdfe6;
+    border-bottom: 1px solid $border-color;
   }
 </style>

src/views/dashboard/controls/DemandLog.vue

@@ -69,7 +69,7 @@ limitations under the License. -->
   .header {
     padding: 10px;
     font-size: $font-size-smaller;
-    border-bottom: 1px solid #dcdfe6;
+    border-bottom: 1px solid $border-color;
     min-width: 1024px;
   }
 

src/views/dashboard/controls/Ebpf.vue

@@ -68,7 +68,7 @@ limitations under the License. -->
   .header {
     padding: 10px;
     font-size: $font-size-smaller;
-    border-bottom: 1px solid #dcdfe6;
+    border-bottom: 1px solid $border-color;
   }
 
   .tools {

src/views/dashboard/controls/Event.vue

@@ -80,7 +80,7 @@ limitations under the License. -->
   .header {
     padding: 10px;
     font-size: $font-size-smaller;
-    border-bottom: 1px solid #dcdfe6;
+    border-bottom: 1px solid $border-color;
     min-width: 1024px;
   }
 

src/views/dashboard/controls/Log.vue

@@ -77,7 +77,7 @@ limitations under the License. -->
   .header {
     padding: 10px;
     font-size: $font-size-smaller;
-    border-bottom: 1px solid #dcdfe6;
+    border-bottom: 1px solid $border-color;
     min-width: 1024px;
   }
 

src/views/dashboard/controls/NetworkProfiling.vue

@@ -67,7 +67,7 @@ limitations under the License. -->
   .header {
     padding: 10px;
     font-size: $font-size-smaller;
-    border-bottom: 1px solid #dcdfe6;
+    border-bottom: 1px solid $border-color;
   }
 
   .tools {
@@ -87,6 +87,6 @@ limitations under the License. -->
     font-weight: bold;
     line-height: 40px;
     padding: 0 10px;
-    border-bottom: 1px solid #dcdfe6;
+    border-bottom: 1px solid $border-color;
   }
 </style>

src/views/dashboard/controls/Profile.vue

@@ -68,7 +68,7 @@ limitations under the License. -->
   .header {
     padding: 10px;
     font-size: $font-size-smaller;
-    border-bottom: 1px solid #dcdfe6;
+    border-bottom: 1px solid $border-color;
   }
 
   .tools {

src/views/dashboard/controls/Tab.vue

@@ -354,7 +354,7 @@ limitations under the License. -->
   }
 
   .vue-grid-layout {
-    background: #f7f9fa;
+    background: $layout-background;
     height: auto !important;
   }
 

src/views/dashboard/controls/TaskTimeline.vue

@@ -67,7 +67,7 @@ limitations under the License. -->
   .header {
     padding: 10px;
     font-size: $font-size-smaller;
-    border-bottom: 1px solid #dcdfe6;
+    border-bottom: 1px solid $border-color;
   }
 
   .tools {
@@ -87,6 +87,6 @@ limitations under the License. -->
     font-weight: bold;
     line-height: 40px;
     padding: 0 10px;
-    border-bottom: 1px solid #dcdfe6;
+    border-bottom: 1px solid $border-color;
   }
 </style>

src/views/dashboard/controls/Trace.vue

@@ -76,7 +76,7 @@ limitations under the License. -->
   .header {
     padding: 10px;
     font-size: $font-size-smaller;
-    border-bottom: 1px solid #dcdfe6;
+    border-bottom: 1px solid $border-color;
     min-width: 1200px;
   }
 

src/views/dashboard/panel/Layout.vue

@@ -80,7 +80,7 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   .vue-grid-layout {
-    background: #f7f9fa;
+    background: $layout-background;
     height: auto !important;
   }
 

src/views/dashboard/panel/Tool.vue

@@ -122,8 +122,6 @@ limitations under the License. -->
           inactive-text="V"
           size="small"
           inline-prompt
-          active-color="#409eff"
-          inactive-color="#999"
           @change="changeMode"
         />
       </div>
@@ -739,7 +737,7 @@ limitations under the License. -->
   .dashboard-tool {
     text-align: right;
     padding: 3px 5px 5px;
-    background: $dashboard-tool-bg;
+    background: $dashboard-tool-bg-color;
     border-bottom: 1px solid $border-color;
     justify-content: space-between;
   }

src/views/dashboard/related/continuous-profiling/components/Policy.vue

@@ -212,7 +212,7 @@ limitations under the License. -->
   }
 
   #uri-param {
-    border: 1px solid #dcdfe6;
+    border: 1px solid $border-color;
     cursor: text;
     padding: 0 5px;
     border-radius: 4px;

src/views/dashboard/related/ebpf/Header.vue

@@ -90,7 +90,7 @@ limitations under the License. -->
   .header {
     padding: 5px 20px 5px 10px;
     font-size: $font-size-smaller;
-    border-bottom: 1px solid #dcdfe6;
+    border-bottom: 1px solid $border-color;
     justify-content: space-between;
   }
 

src/views/dashboard/related/profile/Header.vue

@@ -119,7 +119,7 @@ limitations under the License. -->
   .header {
     padding: 10px;
     font-size: $font-size-smaller;
-    border-bottom: 1px solid #dcdfe6;
+    border-bottom: 1px solid $border-color;
   }
 
   .name {

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

@@ -51,7 +51,7 @@ limitations under the License. -->
   .header {
     padding: 10px;
     font-size: $font-size-smaller;
-    border-bottom: 1px solid #dcdfe6;
+    border-bottom: 1px solid $border-color;
     min-width: 1200px;
   }