diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index cce7d11c..6b5d403b 100644
--- a/src/layout/components/AppMain.vue
+++ b/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>
diff --git a/src/layout/components/NavBar.vue b/src/layout/components/NavBar.vue
index 6fad8bf6..f4df5972 100644
--- a/src/layout/components/NavBar.vue
+++ b/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
-          v-model="theme"
-          active-text="D"
-          inactive-text="H"
-          size="small"
-          inactive-color="#999"
-          inline-prompt
-          @change="changeTheme"
-        />
+        <el-switch v-model="theme" active-text="D" inactive-text="H" 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">
@@ -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;
diff --git a/src/styles/theme.scss b/src/styles/theme.scss
index 69c4fa8b..1e6c36a4 100644
--- a/src/styles/theme.scss
+++ b/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);
diff --git a/src/views/dashboard/configuration/widget/metric/Index.vue b/src/views/dashboard/configuration/widget/metric/Index.vue
index ac316047..bb6ce642 100644
--- a/src/views/dashboard/configuration/widget/metric/Index.vue
+++ b/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;
diff --git a/src/views/dashboard/controls/ContinuousProfiling.vue b/src/views/dashboard/controls/ContinuousProfiling.vue
index a6e4e752..72bb7991 100644
--- a/src/views/dashboard/controls/ContinuousProfiling.vue
+++ b/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>
diff --git a/src/views/dashboard/controls/DemandLog.vue b/src/views/dashboard/controls/DemandLog.vue
index b6d30aec..b3ad3cbb 100644
--- a/src/views/dashboard/controls/DemandLog.vue
+++ b/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;
   }
 
diff --git a/src/views/dashboard/controls/Ebpf.vue b/src/views/dashboard/controls/Ebpf.vue
index 69398329..2c49002f 100644
--- a/src/views/dashboard/controls/Ebpf.vue
+++ b/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 {
diff --git a/src/views/dashboard/controls/Event.vue b/src/views/dashboard/controls/Event.vue
index 4cec0cde..ed03bba0 100644
--- a/src/views/dashboard/controls/Event.vue
+++ b/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;
   }
 
diff --git a/src/views/dashboard/controls/Log.vue b/src/views/dashboard/controls/Log.vue
index 0f966c2e..ed561cd4 100644
--- a/src/views/dashboard/controls/Log.vue
+++ b/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;
   }
 
diff --git a/src/views/dashboard/controls/NetworkProfiling.vue b/src/views/dashboard/controls/NetworkProfiling.vue
index c144f8ac..35ea9bcc 100644
--- a/src/views/dashboard/controls/NetworkProfiling.vue
+++ b/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>
diff --git a/src/views/dashboard/controls/Profile.vue b/src/views/dashboard/controls/Profile.vue
index 50871f5c..426e8ad3 100644
--- a/src/views/dashboard/controls/Profile.vue
+++ b/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 {
diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue
index 5574cd94..87b6767f 100644
--- a/src/views/dashboard/controls/Tab.vue
+++ b/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;
   }
 
diff --git a/src/views/dashboard/controls/TaskTimeline.vue b/src/views/dashboard/controls/TaskTimeline.vue
index 9a4be4c3..327e9bc5 100644
--- a/src/views/dashboard/controls/TaskTimeline.vue
+++ b/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>
diff --git a/src/views/dashboard/controls/Trace.vue b/src/views/dashboard/controls/Trace.vue
index ab1e8e86..8852861c 100644
--- a/src/views/dashboard/controls/Trace.vue
+++ b/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;
   }
 
diff --git a/src/views/dashboard/panel/Layout.vue b/src/views/dashboard/panel/Layout.vue
index c349bdea..1ca2fe1e 100644
--- a/src/views/dashboard/panel/Layout.vue
+++ b/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;
   }
 
diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue
index 594e29f5..5802faa7 100644
--- a/src/views/dashboard/panel/Tool.vue
+++ b/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;
   }
diff --git a/src/views/dashboard/related/continuous-profiling/components/Policy.vue b/src/views/dashboard/related/continuous-profiling/components/Policy.vue
index 386989cb..9437b458 100644
--- a/src/views/dashboard/related/continuous-profiling/components/Policy.vue
+++ b/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;
diff --git a/src/views/dashboard/related/ebpf/Header.vue b/src/views/dashboard/related/ebpf/Header.vue
index 289d1c89..0c3c10df 100644
--- a/src/views/dashboard/related/ebpf/Header.vue
+++ b/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;
   }
 
diff --git a/src/views/dashboard/related/profile/Header.vue b/src/views/dashboard/related/profile/Header.vue
index 1ea18eae..425b8cb7 100644
--- a/src/views/dashboard/related/profile/Header.vue
+++ b/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 {
diff --git a/src/views/dashboard/related/trace/Index.vue b/src/views/dashboard/related/trace/Index.vue
index 8f211f9b..e7f25de9 100644
--- a/src/views/dashboard/related/trace/Index.vue
+++ b/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;
   }