diff --git a/src/layout/components/NavBar.vue b/src/layout/components/NavBar.vue
index 598ca372..1112823f 100644
--- a/src/layout/components/NavBar.vue
+++ b/src/layout/components/NavBar.vue
@@ -303,16 +303,16 @@ limitations under the License. -->
     padding: 5px;
     text-align: left;
     justify-content: space-between;
-    background-color: #fafbfc;
-    border-bottom: 1px solid #dfe4e8;
-    color: #222;
+    background-color: $theme-background;
+    border-bottom: 1px solid $border-color;
+    color: $font-color;
     font-size: $font-size-smaller;
   }
 
   .nav-bar.dark {
-    background-color: #333840;
+    background-color: $theme-background;
     border-bottom: 1px solid #252a2f;
-    color: #fafbfc;
+    color: $theme-background;
   }
 
   .title {
diff --git a/src/styles/theme.scss b/src/styles/theme.scss
index d4090e81..550968e6 100644
--- a/src/styles/theme.scss
+++ b/src/styles/theme.scss
@@ -16,24 +16,44 @@
  */
 
 .light {
-  --primary-color: #409eff;
+  --el-color-primary: #409eff;
   --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;
+  --border-color: #dfe4e8;
 }
 
 .dark {
-  --primary-color: #1c2022;
+  --el-color-primary: #1c2022;
   --theme-background: #000;
-  --font-color: #3d444f;
+  --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);
+}
+
+$border-color: var(--border-color);
+$dashboard-tool-bg: var(--dashboard-tool-bg);
 $font-color: var(--font-color);
 $text-color: var(--theme-background);
 $disabled-color: var(--disabled-color);
-$active-color: var(--primary-color);
+$active-color: var(--el-color-primary);
 $theme-background: var(--theme-background);
-$active-background: var(--primary-color);
+$active-background: var(--el-color-primary);
 $font-size-smaller: 12px;
 $font-size-normal: 14px;
diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue
index aaf27fdd..594e29f5 100644
--- a/src/views/dashboard/panel/Tool.vue
+++ b/src/views/dashboard/panel/Tool.vue
@@ -739,8 +739,8 @@ limitations under the License. -->
   .dashboard-tool {
     text-align: right;
     padding: 3px 5px 5px;
-    background: rgb(240 242 245);
-    border-bottom: 1px solid #dfe4e8;
+    background: $dashboard-tool-bg;
+    border-bottom: 1px solid $border-color;
     justify-content: space-between;
   }