diff --git a/src/components/DateCalendar.vue b/src/components/DateCalendar.vue
index f5d9bc4e..822ac88d 100755
--- a/src/components/DateCalendar.vue
+++ b/src/components/DateCalendar.vue
@@ -443,11 +443,11 @@ limitations under the License. -->
   });
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
   .calendar {
     float: left;
     user-select: none;
-    color: #3d444f;
+    color: $font-color;
   }
 
   .calendar + .calendar {
@@ -479,7 +479,7 @@ limitations under the License. -->
 
   .calendar-head .calendar-year-select,
   .calendar-head .calendar-month-select {
-    font-size: 12px;
+    font-size: $font-size-smaller;
     padding: 0 2px;
     position: relative;
   }
@@ -524,8 +524,8 @@ limitations under the License. -->
     float: left;
   }
 
-  .calendar-week:before,
-  .calendar-date:before {
+  .calendar-week::before,
+  .calendar-date::before {
     content: "";
     display: inline-block;
     height: 100%;
@@ -539,27 +539,27 @@ limitations under the License. -->
   }
 
   .calendar-date-out {
-    color: #ccc;
+    color: $disabled-color;
   }
 
   .calendar-date:hover,
   .calendar-date-on {
-    color: #3f97e3;
-    background-color: #f8f8f8;
+    color: $font-color;
+    background-color: $theme-background;
   }
 
   .calendar-date-selected,
   .calendar-date-selected:hover {
-    color: #fff;
+    color: $text-color;
     font-weight: bold;
     border-radius: 14px;
-    background: #3f97e3;
+    background: $active-background;
   }
 
   .calendar-date-disabled {
     cursor: not-allowed !important;
-    color: #ccc !important;
-    background: #fff !important;
+    color: $disabled-color !important;
+    background: $theme-background !important;
   }
 
   .calendar-foot {
@@ -591,7 +591,7 @@ limitations under the License. -->
     width: 100%;
     height: 100%;
     position: absolute;
-    background: #fff;
+    background: $theme-background;
     left: 0;
     top: 0;
   }
@@ -626,7 +626,7 @@ limitations under the License. -->
     margin-top: -30px;
     height: 30px;
     line-height: 30px;
-    background: #fff;
+    background: $theme-background;
     text-align: center;
     font-weight: bold;
   }
diff --git a/src/components/Graph.vue b/src/components/Graph.vue
index c4f0556d..2ad0b48f 100644
--- a/src/components/Graph.vue
+++ b/src/components/Graph.vue
@@ -232,7 +232,7 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   .no-data {
-    font-size: 12px;
+    font-size: $font-size-smaller;
     height: 100%;
     box-sizing: border-box;
     display: -webkit-box;
@@ -254,9 +254,9 @@ limitations under the License. -->
     z-index: 9999999;
     box-shadow: #ddd 1px 2px 10px;
     transition: all cubic-bezier(0.075, 0.82, 0.165, 1) linear;
-    background-color: rgb(255, 255, 255);
+    background-color: rgb(255 255 255);
     border-radius: 4px;
-    color: rgb(51, 51, 51);
+    color: rgb(51 51 51);
     padding: 5px;
   }
 
@@ -266,7 +266,7 @@ limitations under the License. -->
     cursor: pointer;
 
     &:hover {
-      color: #409eff;
+      color: $active-color;
       background-color: #eee;
     }
   }
diff --git a/src/components/SelectSingle.vue b/src/components/SelectSingle.vue
index 37731451..1ff98576 100644
--- a/src/components/SelectSingle.vue
+++ b/src/components/SelectSingle.vue
@@ -86,17 +86,17 @@ limitations under the License. -->
     position: relative;
     justify-content: space-between;
     border: 1px solid #ddd;
-    background: #fff;
+    background: $theme-background;
     border-radius: 3px;
     color: #000;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     height: 24px;
 
     .selected {
       padding: 0 3px;
       border-radius: 3px;
       margin: 3px;
-      color: #409eff;
+      color: $active-color;
       background-color: #fafafa;
       border: 1px solid #e8e8e8;
       text-align: center;
@@ -126,7 +126,7 @@ limitations under the License. -->
     position: absolute;
     right: 5px;
     top: 0;
-    font-size: 14px;
+    font-size: $font-size-normal;
     display: none;
     color: #aaa;
     cursor: pointer;
@@ -137,8 +137,8 @@ limitations under the License. -->
     position: absolute;
     top: 26px;
     left: 0;
-    background: #fff;
-    box-shadow: 0 1px 6px rgba(99, 99, 99, 0.2);
+    background-color: $theme-background;
+    box-shadow: 0 1px 6px rgb(99 99 99 / 20%);
     border: 1px solid #ddd;
     width: 100%;
     border-radius: 0 0 3px 3px;
@@ -164,7 +164,7 @@ limitations under the License. -->
     padding: 7px 15px;
 
     &.select-disabled {
-      color: #409eff;
+      color: $active-color;
       cursor: not-allowed;
     }
 
diff --git a/src/components/TimePicker.vue b/src/components/TimePicker.vue
index a69d3af9..b7d71b3e 100755
--- a/src/components/TimePicker.vue
+++ b/src/components/TimePicker.vue
@@ -302,7 +302,7 @@ limitations under the License. -->
       transform: scaleY(0.8);
     }
 
-    to {
+    100% {
       opacity: 1;
       transform: scaleY(1);
     }
@@ -314,7 +314,7 @@ limitations under the License. -->
       transform: scaleY(1);
     }
 
-    to {
+    100% {
       opacity: 0;
       transform: scaleY(0.8);
     }
@@ -343,7 +343,7 @@ limitations under the License. -->
     cursor: pointer;
   }
 
-  .datepicker-close:before {
+  .datepicker-close::before {
     display: block;
     content: "";
     position: absolute;
@@ -354,14 +354,14 @@ limitations under the License. -->
     margin-left: -8px;
     margin-top: -8px;
     text-align: center;
-    color: #fff;
+    color: $text-color;
     border-radius: 50%;
-    background: #ccc
+    background: $disabled-color
       url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3IDciIHdpZHRoPSI3IiBoZWlnaHQ9IjciPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik01LjU4LDVsMi44LTIuODFBLjQxLjQxLDAsMSwwLDcuOCwxLjZMNSw0LjQxLDIuMiwxLjZhLjQxLjQxLDAsMCwwLS41OC41OGgwTDQuNDIsNSwxLjYyLDcuOGEuNDEuNDEsMCwwLDAsLjU4LjU4TDUsNS41OCw3LjgsOC4zOWEuNDEuNDEsMCwwLDAsLjU4LS41OGgwWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEuNSAtMS40OCkiIHN0eWxlPSJmaWxsOiNmZmYiLz48L3N2Zz4NCg==")
       no-repeat 50% 50%;
   }
 
-  .datepicker__clearable:hover:before {
+  .datepicker__clearable:hover::before {
     display: none;
   }
 
@@ -369,7 +369,7 @@ limitations under the License. -->
     display: block;
   }
 
-  .datepicker-close:hover:before {
+  .datepicker-close:hover::before {
     background-color: #afafaf;
   }
 
@@ -385,7 +385,7 @@ limitations under the License. -->
     padding: 0 5px;
     width: 100%;
     user-select: none;
-    font-family: "Monaco";
+    font-family: Monaco;
     letter-spacing: -0.7px;
   }
 
@@ -399,7 +399,6 @@ limitations under the License. -->
     cursor: not-allowed;
     background-color: #ebebe4;
     border-color: #e5e5e5;
-    -webkit-box-shadow: none;
     box-shadow: none;
   }
 
@@ -409,9 +408,9 @@ limitations under the License. -->
     transition: all 200ms ease;
     opacity: 1;
     transform: scaleY(1);
-    font-size: 12px;
-    background: #fff;
-    box-shadow: 0 1px 6px rgba(99, 99, 99, 0.2);
+    font-size: $font-size-smaller;
+    background: $theme-background;
+    box-shadow: 0 1px 6px rgb(99 99 99 / 20%);
     margin-top: 2px;
     outline: 0;
     padding: 5px;
@@ -457,7 +456,7 @@ limitations under the License. -->
       border: 0;
       background-color: transparent;
       line-height: 34px;
-      font-size: 12px;
+      font-size: $font-size-smaller;
       color: #666;
       text-align: left;
       outline: none;
@@ -497,7 +496,7 @@ limitations under the License. -->
   .datepicker-btn {
     padding: 5px 10px;
     background: #3f97e3;
-    color: #fff;
+    color: $text-color;
     border-radius: 2px;
     display: inline-block;
     cursor: pointer;
@@ -525,7 +524,7 @@ limitations under the License. -->
     cursor: pointer;
     margin: 10px 0 0 5px;
     padding: 5px 15px;
-    color: #ffffff;
+    color: $text-color;
   }
 
   .datepicker__buttons .datepicker__button-select {
diff --git a/src/layout/components/NavBar.vue b/src/layout/components/NavBar.vue
index 7615294e..f5576306 100644
--- a/src/layout/components/NavBar.vue
+++ b/src/layout/components/NavBar.vue
@@ -108,7 +108,7 @@ limitations under the License. -->
     background-color: #fafbfc;
     border-bottom: 1px solid #dfe4e8;
     color: #222;
-    font-size: 12px;
+    font-size: $font-size-smaller;
   }
 
   .nav-bar.dark {
@@ -118,7 +118,7 @@ limitations under the License. -->
   }
 
   .title {
-    font-size: 14px;
+    font-size: $font-size-normal;
     font-weight: 500;
     height: 28px;
     line-height: 28px;
diff --git a/src/layout/components/SideBar.vue b/src/layout/components/SideBar.vue
index 0ad4655a..b88476ae 100644
--- a/src/layout/components/SideBar.vue
+++ b/src/layout/components/SideBar.vue
@@ -132,12 +132,12 @@ limitations under the License. -->
 
   .el-menu-vertical:not(.el-menu--collapse) {
     width: 220px;
-    font-size: 14px;
+    font-size: $font-size-normal;
   }
 
   .logo-icon-collapse {
     width: 65px;
-    margin: 5px 0 10px 0;
+    margin: 5px 0 10px;
     text-align: center;
   }
 
@@ -169,7 +169,7 @@ limitations under the License. -->
 
   .version {
     color: #eee;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     cursor: pointer;
     padding-left: 23px;
     margin-bottom: 10px;
diff --git a/src/styles/lib.scss b/src/styles/lib.scss
index 9ea6b3d2..7ca6a229 100644
--- a/src/styles/lib.scss
+++ b/src/styles/lib.scss
@@ -189,12 +189,12 @@
 .scroll_bar_style::-webkit-scrollbar-track {
   background-color: #eee;
   border-radius: 3px;
-  box-shadow: inset 0 0 6px #ccc;
+  box-shadow: inset 0 0 6px $disabled-color;
 }
 
 .scroll_bar_style::-webkit-scrollbar-thumb {
   border-radius: 3px;
-  box-shadow: inset 0 0 6px #ccc;
+  box-shadow: inset 0 0 6px $disabled-color;
   background-color: #aaa;
 }
 
@@ -220,7 +220,7 @@
   padding: 8px;
   color: #eee;
   border-radius: 4px;
-  font-size: 12px;
+  font-size: $font-size-smaller;
 }
 .d3-tip {
   background: #252a2f;
diff --git a/src/styles/light.scss b/src/styles/light.scss
new file mode 100644
index 00000000..ef6be368
--- /dev/null
+++ b/src/styles/light.scss
@@ -0,0 +1,25 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+$font-color: #3d444f;
+$text-color: #fff;
+$disabled-color: #ccc;
+$active-color: #409eff;
+$theme-background: #fff;
+$active-background: #409eff;
+$font-size-smaller: 12px;
+$font-size-normal: 14px;
diff --git a/src/styles/reset.scss b/src/styles/reset.scss
index f483bdc4..c447ec45 100644
--- a/src/styles/reset.scss
+++ b/src/styles/reset.scss
@@ -18,8 +18,8 @@
 body {
   margin: 0;
   line-height: 1.5;
-  font-size: 14px;
-  color: #3d444f;
+  font-size: $font-size-normal;
+  color: $font-color;
   font-family: Helvetica, Arial, "Source Han Sans CN", "Microsoft YaHei", sans-serif;
   text-rendering: optimizelegibility;
   text-size-adjust: 100%;
@@ -81,7 +81,7 @@ h4 {
 }
 
 h5 {
-  font-size: 14px;
+  font-size: $font-size-normal;
 }
 
 h6 {
@@ -153,7 +153,7 @@ pre {
 }
 
 .el-switch__label * {
-  font-size: 12px;
+  font-size: $font-size-smaller;
 }
 
 .el-drawer__header {
@@ -173,9 +173,9 @@ pre {
 div.vis-tooltip {
   max-width: 600px;
   overflow: hidden;
-  background-color: #fff !important;
+  background-color: $theme-background !important;
   white-space: normal !important;
-  font-size: 12px !important;
+  font-size: $font-size-smaller !important;
 }
 
 .vis-item {
@@ -187,7 +187,7 @@ div.vis-tooltip {
   background-color: #e66;
   opacity: 0.8;
   border-color: #e66;
-  color: #fff !important;
+  color: $text-color !important;
 }
 
 .vis-item.Normal {
diff --git a/src/views/Alarm.vue b/src/views/Alarm.vue
index 9fe35454..236e7e18 100644
--- a/src/views/Alarm.vue
+++ b/src/views/Alarm.vue
@@ -30,6 +30,6 @@ limitations under the License. -->
   .alarm {
     flex-grow: 1;
     height: 100%;
-    font-size: 12px;
+    font-size: $font-size-smaller;
   }
 </style>
diff --git a/src/views/Event.vue b/src/views/Event.vue
index c26b90a3..5fcd39df 100644
--- a/src/views/Event.vue
+++ b/src/views/Event.vue
@@ -31,6 +31,6 @@ limitations under the License. -->
   .event {
     flex-grow: 1;
     height: 100%;
-    font-size: 12px;
+    font-size: $font-size-smaller;
   }
 </style>
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 0ff46106..00beb5e1 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -146,7 +146,7 @@ limitations under the License. -->
 
   .auto-select {
     border-radius: 3px;
-    background-color: #fff;
+    background-color: $theme-background;
     padding: 1px;
 
     input {
@@ -169,7 +169,7 @@ limitations under the License. -->
       outline: 0;
       width: 50px;
       border-radius: 3px;
-      border: 1px solid #ccc;
+      border: 1px solid $disabled-color;
       text-align: center;
       height: 25px;
     }
diff --git a/src/views/alarm/Content.vue b/src/views/alarm/Content.vue
index a107a399..90bf50ee 100644
--- a/src/views/alarm/Content.vue
+++ b/src/views/alarm/Content.vue
@@ -142,12 +142,12 @@ limitations under the License. -->
   }
 </script>
 <style lang="scss" scoped>
-  @import "../components/style.scss";
+  @import url("../components/style.scss");
 
   .tips {
     width: 100%;
     margin: 20px 0;
     text-align: center;
-    font-size: 14px;
+    font-size: $font-size-normal;
   }
 </style>
diff --git a/src/views/alarm/Header.vue b/src/views/alarm/Header.vue
index 8c006914..8704c876 100644
--- a/src/views/alarm/Header.vue
+++ b/src/views/alarm/Header.vue
@@ -98,7 +98,7 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   .alarm-tool {
-    font-size: 12px;
+    font-size: $font-size-smaller;
     border-bottom: 1px solid #c1c5ca41;
     background-color: #f0f2f5;
     padding: 10px;
diff --git a/src/views/components/ConditionTags.vue b/src/views/components/ConditionTags.vue
index a7b2078b..f62629c2 100644
--- a/src/views/components/ConditionTags.vue
+++ b/src/views/components/ConditionTags.vue
@@ -221,8 +221,8 @@ limitations under the License. -->
     border-radius: 3px;
     overflow: hidden;
     border: 1px dashed #aaa;
-    font-size: 12px;
-    margin: 3px 2px 0 2px;
+    font-size: $font-size-smaller;
+    margin: 3px 2px 0;
   }
 
   .trace-new-tag {
@@ -246,7 +246,7 @@ limitations under the License. -->
     margin-top: 10px;
 
     &:hover {
-      color: #409eff;
+      color: $active-color;
     }
   }
 
@@ -259,14 +259,14 @@ limitations under the License. -->
   }
 
   .light {
-    color: #3d444f;
+    color: $font-color;
 
     input {
-      border: 1px solid #ccc;
+      border: 1px solid $disabled-color;
     }
 
     .selected {
-      color: #3d444f;
+      color: $font-color;
     }
   }
 
diff --git a/src/views/components/style.scss b/src/views/components/style.scss
index bfdb5017..179e9fb1 100644
--- a/src/views/components/style.scss
+++ b/src/views/components/style.scss
@@ -90,7 +90,7 @@
       line-height: 20px;
       text-align: center;
       display: inline-block;
-      border-bottom: 1px solid #ccc;
+      border-bottom: 1px solid $disabled-color;
       overflow: hidden;
     }
   }
diff --git a/src/views/dashboard/List.vue b/src/views/dashboard/List.vue
index d81fe692..89f9eac0 100644
--- a/src/views/dashboard/List.vue
+++ b/src/views/dashboard/List.vue
@@ -55,7 +55,7 @@ limitations under the License. -->
             </span>
           </template>
         </el-table-column>
-        <el-table-column prop="layer" label="Layer" width="120" />
+        <el-table-column prop="layer" label="Layer" width="160" />
         <el-table-column prop="entity" label="Entity" width="200" />
         <el-table-column prop="isRoot" label="Root" width="60">
           <template #default="scope">
@@ -480,8 +480,8 @@ limitations under the License. -->
 
   .table {
     padding: 20px 10px;
-    background-color: #fff;
-    box-shadow: 0px 1px 4px 0px #00000029;
+    background-color: $theme-background;
+    box-shadow: 0 1px 4px 0 #00000029;
     border-radius: 5px;
     width: 100%;
     height: 100%;
@@ -490,7 +490,7 @@ limitations under the License. -->
 
   .toggle-selection {
     margin-top: 20px;
-    background-color: #fff;
+    background-color: $theme-background;
   }
 
   .pagination {
@@ -514,7 +514,7 @@ limitations under the License. -->
   }
 
   .name {
-    color: #409eff;
+    color: $active-color;
   }
 
   .reload {
diff --git a/src/views/dashboard/Widget.vue b/src/views/dashboard/Widget.vue
index 44ee041f..0b8acaf8 100644
--- a/src/views/dashboard/Widget.vue
+++ b/src/views/dashboard/Widget.vue
@@ -185,12 +185,12 @@ limitations under the License. -->
   .content {
     min-width: 100px;
     border: 1px solid #eee;
-    background-color: #fff;
+    background-color: $theme-background;
     position: relative;
   }
 
   .widget-chart {
-    background: #fff;
+    background-color: $theme-background;
     box-shadow: 0 1px 4px 0 #00000029;
     border-radius: 3px;
     padding: 5px;
@@ -198,7 +198,7 @@ limitations under the License. -->
   }
 
   .no-data {
-    font-size: 14px;
+    font-size: $font-size-normal;
     text-align: center;
     line-height: 400px;
   }
@@ -208,7 +208,7 @@ limitations under the License. -->
     line-height: 25px;
     text-align: center;
     background-color: aliceblue;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     position: relative;
   }
 
diff --git a/src/views/dashboard/components/WidgetLink.vue b/src/views/dashboard/components/WidgetLink.vue
index c92d4411..6a6b6c85 100644
--- a/src/views/dashboard/components/WidgetLink.vue
+++ b/src/views/dashboard/components/WidgetLink.vue
@@ -154,13 +154,13 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   .link {
-    color: #409eff;
+    color: $active-color;
     cursor: pointer;
   }
 
   .link-content {
     height: 300px;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     overflow: auto;
     padding-bottom: 50px;
   }
diff --git a/src/views/dashboard/configuration/ContinuousProfiling.vue b/src/views/dashboard/configuration/ContinuousProfiling.vue
index 77b77846..7b8b9c60 100644
--- a/src/views/dashboard/configuration/ContinuousProfiling.vue
+++ b/src/views/dashboard/configuration/ContinuousProfiling.vue
@@ -95,7 +95,7 @@ limitations under the License. -->
     padding: 10px;
     text-align: right;
     width: 100%;
-    background-color: #fff;
+    background-color: $theme-background;
   }
 
   .item {
diff --git a/src/views/dashboard/configuration/Event.vue b/src/views/dashboard/configuration/Event.vue
index 002deb09..23fe8d16 100644
--- a/src/views/dashboard/configuration/Event.vue
+++ b/src/views/dashboard/configuration/Event.vue
@@ -72,6 +72,6 @@ limitations under the License. -->
     padding: 10px;
     text-align: right;
     width: 100%;
-    background-color: #fff;
+    background-color: $theme-background;
   }
 </style>
diff --git a/src/views/dashboard/configuration/Text.vue b/src/views/dashboard/configuration/Text.vue
index 35ea7c11..f70cc1be 100644
--- a/src/views/dashboard/configuration/Text.vue
+++ b/src/views/dashboard/configuration/Text.vue
@@ -155,6 +155,6 @@ limitations under the License. -->
     padding: 10px;
     text-align: right;
     width: 100%;
-    background-color: #fff;
+    background-color: $theme-background;
   }
 </style>
diff --git a/src/views/dashboard/configuration/ThirdPartyApp.vue b/src/views/dashboard/configuration/ThirdPartyApp.vue
index da700dc2..cbfe9314 100644
--- a/src/views/dashboard/configuration/ThirdPartyApp.vue
+++ b/src/views/dashboard/configuration/ThirdPartyApp.vue
@@ -84,6 +84,6 @@ limitations under the License. -->
     padding: 10px;
     text-align: right;
     width: 100%;
-    background-color: #fff;
+    background-color: $theme-background;
   }
 </style>
diff --git a/src/views/dashboard/configuration/TimeRange.vue b/src/views/dashboard/configuration/TimeRange.vue
index 07a595a8..d1eed12a 100644
--- a/src/views/dashboard/configuration/TimeRange.vue
+++ b/src/views/dashboard/configuration/TimeRange.vue
@@ -151,6 +151,6 @@ limitations under the License. -->
     padding: 10px;
     text-align: right;
     width: 100%;
-    background-color: #fff;
+    background-color: $theme-background;
   }
 </style>
diff --git a/src/views/dashboard/configuration/Topology.vue b/src/views/dashboard/configuration/Topology.vue
index 663f7b86..374e5938 100644
--- a/src/views/dashboard/configuration/Topology.vue
+++ b/src/views/dashboard/configuration/Topology.vue
@@ -67,7 +67,7 @@ limitations under the License. -->
     padding: 10px;
     text-align: right;
     width: 100%;
-    background-color: #fff;
+    background-color: $theme-background;
   }
 
   .label {
diff --git a/src/views/dashboard/configuration/Widget.vue b/src/views/dashboard/configuration/Widget.vue
index 63c3f4f3..0c9dc4c5 100644
--- a/src/views/dashboard/configuration/Widget.vue
+++ b/src/views/dashboard/configuration/Widget.vue
@@ -202,7 +202,7 @@ limitations under the License. -->
     position: relative;
     min-width: 1280px;
     border: 1px solid #eee;
-    background-color: #fff;
+    background-color: $theme-background;
   }
 
   .header {
@@ -210,7 +210,7 @@ limitations under the License. -->
     line-height: 25px;
     text-align: center;
     background-color: aliceblue;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     position: relative;
   }
 
@@ -240,7 +240,7 @@ limitations under the License. -->
   }
 
   .no-data {
-    font-size: 14px;
+    font-size: $font-size-normal;
     text-align: center;
     line-height: 400px;
   }
@@ -253,7 +253,7 @@ limitations under the License. -->
     padding: 10px;
     text-align: right;
     width: 100%;
-    background-color: #fff;
+    background-color: $theme-background;
   }
 
   .collapse {
diff --git a/src/views/dashboard/configuration/widget/graph-styles/components/Legend.vue b/src/views/dashboard/configuration/widget/graph-styles/components/Legend.vue
index 9ff2dc6f..4c340eb9 100644
--- a/src/views/dashboard/configuration/widget/graph-styles/components/Legend.vue
+++ b/src/views/dashboard/configuration/widget/graph-styles/components/Legend.vue
@@ -125,7 +125,7 @@ limitations under the License. -->
   }
 
   .title {
-    font-size: 12px;
+    font-size: $font-size-smaller;
     display: inline-flex;
     height: 32px;
     line-height: 34px;
diff --git a/src/views/dashboard/configuration/widget/metric/Index.vue b/src/views/dashboard/configuration/widget/metric/Index.vue
index d7c34533..5882f67e 100644
--- a/src/views/dashboard/configuration/widget/metric/Index.vue
+++ b/src/views/dashboard/configuration/widget/metric/Index.vue
@@ -611,20 +611,20 @@ limitations under the License. -->
     span {
       display: inline-block;
       padding: 2px 10px;
-      border: 1px solid #ccc;
-      background-color: #fff;
+      border: 1px solid $disabled-color;
+      background-color: $theme-background;
       border-right: 0;
       cursor: pointer;
     }
 
     span:nth-last-child(1) {
-      border-right: 1px solid #ccc;
+      border-right: 1px solid $disabled-color;
     }
   }
 
   span.active {
-    background-color: #409eff;
-    color: #fff;
+    background-color: $active-color;
+    color: $theme-background;
   }
 
   .expression-param {
@@ -640,7 +640,7 @@ limitations under the License. -->
     min-height: 26px;
 
     &:focus {
-      border-color: #409eff;
+      border-color: $active-color;
     }
   }
 
@@ -651,6 +651,6 @@ limitations under the License. -->
 
   .link {
     cursor: pointer;
-    color: #409eff;
+    color: $active-color;
   }
 </style>
diff --git a/src/views/dashboard/configuration/widget/metric/Standard.vue b/src/views/dashboard/configuration/widget/metric/Standard.vue
index 4e7ad7ec..5b88699b 100644
--- a/src/views/dashboard/configuration/widget/metric/Standard.vue
+++ b/src/views/dashboard/configuration/widget/metric/Standard.vue
@@ -187,7 +187,7 @@ limitations under the License. -->
   .label {
     width: 150px;
     display: inline-block;
-    font-size: 12px;
+    font-size: $font-size-smaller;
   }
 
   .close {
diff --git a/src/views/dashboard/controls/ContinuousProfiling.vue b/src/views/dashboard/controls/ContinuousProfiling.vue
index ee1c1650..a6e4e752 100644
--- a/src/views/dashboard/controls/ContinuousProfiling.vue
+++ b/src/views/dashboard/controls/ContinuousProfiling.vue
@@ -62,7 +62,7 @@ limitations under the License. -->
   .profile-wrapper {
     width: 100%;
     height: 100%;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     position: relative;
   }
 
@@ -74,7 +74,7 @@ limitations under the License. -->
 
   .header {
     padding: 10px;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     border-bottom: 1px solid #dcdfe6;
   }
 
@@ -86,7 +86,7 @@ limitations under the License. -->
     text-align: center;
 
     &:hover {
-      color: #409eff;
+      color: $active-color;
       background-color: #eee;
     }
   }
diff --git a/src/views/dashboard/controls/DemandLog.vue b/src/views/dashboard/controls/DemandLog.vue
index 57c5262b..b6d30aec 100644
--- a/src/views/dashboard/controls/DemandLog.vue
+++ b/src/views/dashboard/controls/DemandLog.vue
@@ -55,7 +55,7 @@ limitations under the License. -->
   .log-wrapper {
     width: 100%;
     height: 100%;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     position: relative;
     overflow: auto;
   }
@@ -68,7 +68,7 @@ limitations under the License. -->
 
   .header {
     padding: 10px;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     border-bottom: 1px solid #dcdfe6;
     min-width: 1024px;
   }
@@ -81,7 +81,7 @@ limitations under the License. -->
     text-align: center;
 
     &:hover {
-      color: #409eff;
+      color: $active-color;
       background-color: #eee;
     }
   }
diff --git a/src/views/dashboard/controls/Ebpf.vue b/src/views/dashboard/controls/Ebpf.vue
index d9a0b45c..69398329 100644
--- a/src/views/dashboard/controls/Ebpf.vue
+++ b/src/views/dashboard/controls/Ebpf.vue
@@ -55,7 +55,7 @@ limitations under the License. -->
   .profile-wrapper {
     width: 100%;
     height: 100%;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     position: relative;
   }
 
@@ -67,7 +67,7 @@ limitations under the License. -->
 
   .header {
     padding: 10px;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     border-bottom: 1px solid #dcdfe6;
   }
 
@@ -79,7 +79,7 @@ limitations under the License. -->
     text-align: center;
 
     &:hover {
-      color: #409eff;
+      color: $active-color;
       background-color: #eee;
     }
   }
diff --git a/src/views/dashboard/controls/Event.vue b/src/views/dashboard/controls/Event.vue
index cf05e916..4cec0cde 100644
--- a/src/views/dashboard/controls/Event.vue
+++ b/src/views/dashboard/controls/Event.vue
@@ -65,7 +65,7 @@ limitations under the License. -->
   .event-wrapper {
     width: 100%;
     height: 100%;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     position: relative;
     overflow: auto;
   }
@@ -79,7 +79,7 @@ limitations under the License. -->
 
   .header {
     padding: 10px;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     border-bottom: 1px solid #dcdfe6;
     min-width: 1024px;
   }
@@ -92,7 +92,7 @@ limitations under the License. -->
     text-align: center;
 
     &:hover {
-      color: #409eff;
+      color: $active-color;
       background-color: #eee;
     }
   }
diff --git a/src/views/dashboard/controls/Log.vue b/src/views/dashboard/controls/Log.vue
index 74498bf3..0f966c2e 100644
--- a/src/views/dashboard/controls/Log.vue
+++ b/src/views/dashboard/controls/Log.vue
@@ -62,7 +62,7 @@ limitations under the License. -->
   .log-wrapper {
     width: 100%;
     height: 100%;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     position: relative;
     overflow: auto;
   }
@@ -76,7 +76,7 @@ limitations under the License. -->
 
   .header {
     padding: 10px;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     border-bottom: 1px solid #dcdfe6;
     min-width: 1024px;
   }
@@ -89,7 +89,7 @@ limitations under the License. -->
     text-align: center;
 
     &:hover {
-      color: #409eff;
+      color: $active-color;
       background-color: #eee;
     }
   }
diff --git a/src/views/dashboard/controls/NetworkProfiling.vue b/src/views/dashboard/controls/NetworkProfiling.vue
index 6461d7d9..c144f8ac 100644
--- a/src/views/dashboard/controls/NetworkProfiling.vue
+++ b/src/views/dashboard/controls/NetworkProfiling.vue
@@ -54,7 +54,7 @@ limitations under the License. -->
   .profile-wrapper {
     width: 100%;
     height: 100%;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     position: relative;
   }
 
@@ -66,7 +66,7 @@ limitations under the License. -->
 
   .header {
     padding: 10px;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     border-bottom: 1px solid #dcdfe6;
   }
 
@@ -78,7 +78,7 @@ limitations under the License. -->
     text-align: center;
 
     &:hover {
-      color: #409eff;
+      color: $active-color;
       background-color: #eee;
     }
   }
diff --git a/src/views/dashboard/controls/Profile.vue b/src/views/dashboard/controls/Profile.vue
index 5b376ff3..50871f5c 100644
--- a/src/views/dashboard/controls/Profile.vue
+++ b/src/views/dashboard/controls/Profile.vue
@@ -55,7 +55,7 @@ limitations under the License. -->
   .profile-wrapper {
     width: 100%;
     height: 100%;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     position: relative;
   }
 
@@ -67,7 +67,7 @@ limitations under the License. -->
 
   .header {
     padding: 10px;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     border-bottom: 1px solid #dcdfe6;
   }
 
@@ -79,7 +79,7 @@ limitations under the License. -->
     text-align: center;
 
     &:hover {
-      color: #409eff;
+      color: $active-color;
       background-color: #eee;
     }
   }
diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue
index 94148e07..5574cd94 100644
--- a/src/views/dashboard/controls/Tab.vue
+++ b/src/views/dashboard/controls/Tab.vue
@@ -282,7 +282,7 @@ limitations under the License. -->
 <style lang="scss" scoped>
   .tabs {
     height: 40px;
-    color: #ccc;
+    color: $disabled-color;
     width: 100%;
     overflow-x: auto;
     white-space: nowrap;
@@ -326,10 +326,10 @@ limitations under the License. -->
     }
 
     span.active {
-      border-bottom: 1px solid #409eff;
+      border-bottom: 1px solid $active-color;
 
       .tab-name {
-        color: #409eff;
+        color: $active-color;
       }
     }
   }
@@ -359,7 +359,7 @@ limitations under the License. -->
   }
 
   .vue-grid-item:not(.vue-grid-placeholder) {
-    background: #fff;
+    background: $theme-background;
     box-shadow: 0 1px 4px 0 #00000029;
     border-radius: 3px;
   }
@@ -374,13 +374,13 @@ limitations under the License. -->
   }
 
   .vue-grid-item.active {
-    border: 1px solid #409eff;
+    border: 1px solid $active-color;
   }
 
   .no-data-tips {
     width: 100%;
     text-align: center;
-    font-size: 14px;
+    font-size: $font-size-normal;
     padding-top: 30px;
     color: #888;
   }
diff --git a/src/views/dashboard/controls/TaskTimeline.vue b/src/views/dashboard/controls/TaskTimeline.vue
index 4651abe6..9a4be4c3 100644
--- a/src/views/dashboard/controls/TaskTimeline.vue
+++ b/src/views/dashboard/controls/TaskTimeline.vue
@@ -54,7 +54,7 @@ limitations under the License. -->
   .content-wrapper {
     width: 100%;
     height: 100%;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     position: relative;
   }
 
@@ -66,7 +66,7 @@ limitations under the License. -->
 
   .header {
     padding: 10px;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     border-bottom: 1px solid #dcdfe6;
   }
 
@@ -78,7 +78,7 @@ limitations under the License. -->
     text-align: center;
 
     &:hover {
-      color: #409eff;
+      color: $active-color;
       background-color: #eee;
     }
   }
diff --git a/src/views/dashboard/controls/Text.vue b/src/views/dashboard/controls/Text.vue
index 3c637c76..c66e68bf 100644
--- a/src/views/dashboard/controls/Text.vue
+++ b/src/views/dashboard/controls/Text.vue
@@ -78,7 +78,7 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   .text {
-    font-size: 12px;
+    font-size: $font-size-smaller;
     height: 100%;
     position: relative;
   }
@@ -111,7 +111,7 @@ limitations under the License. -->
     text-align: center;
 
     &:hover {
-      color: #409eff;
+      color: $active-color;
       background-color: #eee;
     }
   }
diff --git a/src/views/dashboard/controls/ThirdPartyApp.vue b/src/views/dashboard/controls/ThirdPartyApp.vue
index 81b476dc..5eac036c 100644
--- a/src/views/dashboard/controls/ThirdPartyApp.vue
+++ b/src/views/dashboard/controls/ThirdPartyApp.vue
@@ -70,7 +70,7 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   .text {
-    font-size: 12px;
+    font-size: $font-size-smaller;
     height: 100%;
     position: relative;
   }
@@ -102,13 +102,13 @@ limitations under the License. -->
     text-align: center;
 
     &:hover {
-      color: #409eff;
+      color: $active-color;
       background-color: #eee;
     }
   }
 
   .tips {
-    font-size: 14px;
+    font-size: $font-size-normal;
     color: #888;
     width: 100%;
     text-align: center;
diff --git a/src/views/dashboard/controls/TimeRange.vue b/src/views/dashboard/controls/TimeRange.vue
index da171441..ccdea213 100644
--- a/src/views/dashboard/controls/TimeRange.vue
+++ b/src/views/dashboard/controls/TimeRange.vue
@@ -141,7 +141,7 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   .time-range {
-    font-size: 12px;
+    font-size: $font-size-smaller;
     height: 100%;
     position: relative;
   }
@@ -175,7 +175,7 @@ limitations under the License. -->
     text-align: center;
 
     &:hover {
-      color: #409eff;
+      color: $active-color;
       background-color: #eee;
     }
   }
diff --git a/src/views/dashboard/controls/Topology.vue b/src/views/dashboard/controls/Topology.vue
index 9766ab1e..ff2553f5 100644
--- a/src/views/dashboard/controls/Topology.vue
+++ b/src/views/dashboard/controls/Topology.vue
@@ -62,7 +62,7 @@ limitations under the License. -->
     // background-color: #333840;
     width: 100%;
     height: 100%;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     position: relative;
   }
 
@@ -81,13 +81,13 @@ limitations under the License. -->
     text-align: center;
 
     &:hover {
-      color: #409eff;
+      color: $active-color;
       background-color: #eee;
     }
   }
 
   .no-data {
-    font-size: 14px;
+    font-size: $font-size-normal;
     color: #888;
     width: 100%;
     text-align: center;
diff --git a/src/views/dashboard/controls/Trace.vue b/src/views/dashboard/controls/Trace.vue
index 4d4bee6b..48efd5d8 100644
--- a/src/views/dashboard/controls/Trace.vue
+++ b/src/views/dashboard/controls/Trace.vue
@@ -62,7 +62,7 @@ limitations under the License. -->
   .trace-wrapper {
     width: 100%;
     height: 100%;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     position: relative;
     overflow: auto;
   }
@@ -75,7 +75,7 @@ limitations under the License. -->
 
   .header {
     padding: 10px;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     border-bottom: 1px solid #dcdfe6;
     min-width: 1200px;
   }
@@ -88,7 +88,7 @@ limitations under the License. -->
     text-align: center;
 
     &:hover {
-      color: #409eff;
+      color: $active-color;
       background-color: #eee;
     }
   }
diff --git a/src/views/dashboard/controls/Widget.vue b/src/views/dashboard/controls/Widget.vue
index c13f90fa..72b8d870 100644
--- a/src/views/dashboard/controls/Widget.vue
+++ b/src/views/dashboard/controls/Widget.vue
@@ -269,7 +269,7 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   .widget {
-    font-size: 12px;
+    font-size: $font-size-smaller;
     height: 100%;
   }
 
@@ -293,7 +293,7 @@ limitations under the License. -->
     text-align: center;
 
     &:hover {
-      color: #409eff;
+      color: $active-color;
       background-color: #eee;
     }
   }
@@ -305,7 +305,7 @@ limitations under the License. -->
   }
 
   .no-data {
-    font-size: 14px;
+    font-size: $font-size-normal;
     color: #888;
     width: 100%;
     text-align: center;
diff --git a/src/views/dashboard/graphs/Card.vue b/src/views/dashboard/graphs/Card.vue
index b9670cd4..197dcb44 100644
--- a/src/views/dashboard/graphs/Card.vue
+++ b/src/views/dashboard/graphs/Card.vue
@@ -73,7 +73,7 @@ limitations under the License. -->
     color: #666;
     display: flex;
     align-items: center;
-    font-size: 14px;
+    font-size: $font-size-normal;
   }
 
   .unit {
diff --git a/src/views/dashboard/graphs/EndpointList.vue b/src/views/dashboard/graphs/EndpointList.vue
index 7921abe0..4f07cd6d 100644
--- a/src/views/dashboard/graphs/EndpointList.vue
+++ b/src/views/dashboard/graphs/EndpointList.vue
@@ -241,4 +241,8 @@ limitations under the License. -->
   .tips {
     color: rgb(255 0 0 / 50%);
   }
+
+  .link {
+    color: $active-color;
+  }
 </style>
diff --git a/src/views/dashboard/graphs/ServiceList.vue b/src/views/dashboard/graphs/ServiceList.vue
index 787602f0..5917f1aa 100644
--- a/src/views/dashboard/graphs/ServiceList.vue
+++ b/src/views/dashboard/graphs/ServiceList.vue
@@ -335,4 +335,8 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   @import url("./style.scss");
+
+  .link {
+    color: $active-color;
+  }
 </style>
diff --git a/src/views/dashboard/graphs/Table.vue b/src/views/dashboard/graphs/Table.vue
index 78f9f2ab..a03827a5 100644
--- a/src/views/dashboard/graphs/Table.vue
+++ b/src/views/dashboard/graphs/Table.vue
@@ -76,14 +76,14 @@ limitations under the License. -->
     }
 
     .row {
-      border-left: 1px solid #ccc;
+      border-left: 1px solid $disabled-color;
       height: 20px;
       width: 100%;
 
       div {
         overflow: hidden;
         text-overflow: ellipsis;
-        border-right: 1px solid #ccc;
+        border-right: 1px solid $disabled-color;
         text-align: center;
         height: 20px;
         line-height: 20px;
@@ -91,11 +91,11 @@ limitations under the License. -->
       }
 
       div:last-child {
-        border-bottom: 1px solid #ccc;
+        border-bottom: 1px solid $disabled-color;
       }
 
       div:nth-last-child(2) {
-        border-bottom: 1px solid #ccc;
+        border-bottom: 1px solid $disabled-color;
       }
     }
 
@@ -105,7 +105,7 @@ limitations under the License. -->
 
     .row:first-child {
       div {
-        border-top: 1px solid #ccc;
+        border-top: 1px solid $disabled-color;
         background: #eee;
       }
     }
diff --git a/src/views/dashboard/graphs/TopList.vue b/src/views/dashboard/graphs/TopList.vue
index f8b05109..336c0892 100644
--- a/src/views/dashboard/graphs/TopList.vue
+++ b/src/views/dashboard/graphs/TopList.vue
@@ -140,7 +140,7 @@ limitations under the License. -->
   }
 
   .progress-bar {
-    font-size: 12px;
+    font-size: $font-size-smaller;
     color: #333;
   }
 
@@ -159,7 +159,7 @@ limitations under the License. -->
   }
 
   .calls {
-    font-size: 12px;
+    font-size: $font-size-smaller;
     padding: 0 5px;
     display: inline-block;
     background-color: #40454e;
@@ -172,7 +172,7 @@ limitations under the License. -->
     border-radius: 4px;
     border: 1px solid #ddd;
     color: #333;
-    background-color: #fff;
+    background-color: $theme-background;
     will-change: opacity, background-color;
     transition: opacity 0.3s, background-color 0.3s;
   }
@@ -197,10 +197,10 @@ limitations under the License. -->
     cursor: pointer;
     position: relative;
     text-align: center;
-    font-size: 12px;
+    font-size: $font-size-smaller;
 
     &:hover {
-      color: #409eff;
+      color: $active-color;
       background-color: #eee;
     }
   }
diff --git a/src/views/dashboard/graphs/components/ColumnGraph.vue b/src/views/dashboard/graphs/components/ColumnGraph.vue
index 4eae8c89..0e57216e 100644
--- a/src/views/dashboard/graphs/components/ColumnGraph.vue
+++ b/src/views/dashboard/graphs/components/ColumnGraph.vue
@@ -42,7 +42,7 @@ limitations under the License. -->
           <el-popover placement="left" :width="400" trigger="click">
             <template #reference>
               <span class="trend">
-                <Icon iconName="timeline" size="middle" style="color: #409eff" />
+                <Icon iconName="timeline" size="middle" />
               </span>
             </template>
             <div class="view-line">
@@ -159,6 +159,7 @@ limitations under the License. -->
     display: inline-block;
     height: 100%;
     cursor: pointer;
+    color: $active-color;
   }
 
   .value {
diff --git a/src/views/dashboard/graphs/components/Legend.vue b/src/views/dashboard/graphs/components/Legend.vue
index 65903bcf..268c1b28 100644
--- a/src/views/dashboard/graphs/components/Legend.vue
+++ b/src/views/dashboard/graphs/components/Legend.vue
@@ -118,7 +118,7 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   table {
-    font-size: 12px;
+    font-size: $font-size-smaller;
     white-space: nowrap;
     margin: 0;
     border: none;
@@ -136,7 +136,7 @@ limitations under the License. -->
     top: 0;
     z-index: 1;
     width: 25vw;
-    background: #fff;
+    background: $theme-background;
     text-align: left;
   }
 
@@ -158,7 +158,7 @@ limitations under the License. -->
     font-weight: bold;
     font-style: normal;
     text-align: left;
-    background: #fff;
+    background-color: $theme-background;
     position: sticky;
     left: 0;
     z-index: 1;
diff --git a/src/views/dashboard/graphs/style.scss b/src/views/dashboard/graphs/style.scss
index 656da757..e117b5e4 100644
--- a/src/views/dashboard/graphs/style.scss
+++ b/src/views/dashboard/graphs/style.scss
@@ -35,7 +35,6 @@
 
 .link {
   cursor: pointer;
-  color: #409eff;
   display: inline-block;
   width: 100%;
   text-decoration: underline;
diff --git a/src/views/dashboard/panel/Layout.vue b/src/views/dashboard/panel/Layout.vue
index bc9fb710..c349bdea 100644
--- a/src/views/dashboard/panel/Layout.vue
+++ b/src/views/dashboard/panel/Layout.vue
@@ -85,19 +85,19 @@ limitations under the License. -->
   }
 
   .vue-grid-item:not(.vue-grid-placeholder) {
-    background: #fff;
-    box-shadow: 0px 1px 4px 0px #00000029;
+    background-color: $theme-background;
+    box-shadow: 0 1px 4px 0 #00000029;
     border-radius: 3px;
   }
 
   .vue-grid-item.active {
-    border: 1px solid #409eff;
+    border: 1px solid $active-color;
   }
 
   .no-data-tips {
     width: 100%;
     text-align: center;
-    font-size: 14px;
+    font-size: $font-size-normal;
     padding-top: 30px;
     color: #888;
   }
diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue
index c3f4dc1a..ea3d29fb 100644
--- a/src/views/dashboard/panel/Tool.vue
+++ b/src/views/dashboard/panel/Tool.vue
@@ -750,7 +750,7 @@ limitations under the License. -->
   }
 
   .label {
-    font-size: 12px;
+    font-size: $font-size-smaller;
     display: inline-block;
     padding: 4px 2px;
   }
@@ -768,13 +768,13 @@ limitations under the License. -->
     display: inline-block;
     padding: 3px;
     text-align: center;
-    border: 1px solid #ccc;
+    border: 1px solid $disabled-color;
     border-radius: 3px;
     margin-left: 6px;
     cursor: pointer;
     background-color: #eee;
     color: #666;
-    font-size: 12px;
+    font-size: $font-size-smaller;
   }
 
   .selectors {
diff --git a/src/views/dashboard/related/continuous-profiling/components/InstanceList.vue b/src/views/dashboard/related/continuous-profiling/components/InstanceList.vue
index bb8d641f..fc70ed4d 100644
--- a/src/views/dashboard/related/continuous-profiling/components/InstanceList.vue
+++ b/src/views/dashboard/related/continuous-profiling/components/InstanceList.vue
@@ -137,7 +137,7 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   .title {
-    font-size: 12px;
+    font-size: $font-size-smaller;
     font-weight: bold;
   }
 
@@ -163,7 +163,7 @@ limitations under the License. -->
 
   .link {
     cursor: pointer;
-    color: #409eff;
+    color: $active-color;
     text-decoration: underline;
   }
 </style>
diff --git a/src/views/dashboard/related/continuous-profiling/components/Policy.vue b/src/views/dashboard/related/continuous-profiling/components/Policy.vue
index 09ecc35d..386989cb 100644
--- a/src/views/dashboard/related/continuous-profiling/components/Policy.vue
+++ b/src/views/dashboard/related/continuous-profiling/components/Policy.vue
@@ -221,12 +221,12 @@ limitations under the License. -->
     height: 100px;
 
     &:focus {
-      border-color: #409eff;
+      border-color: $active-color;
     }
   }
 
   .item-title {
     margin-bottom: 5px;
-    font-size: 14px;
+    font-size: $font-size-normal;
   }
 </style>
diff --git a/src/views/dashboard/related/demand-log/Header.vue b/src/views/dashboard/related/demand-log/Header.vue
index f2c9a5eb..5a2c6f48 100644
--- a/src/views/dashboard/related/demand-log/Header.vue
+++ b/src/views/dashboard/related/demand-log/Header.vue
@@ -353,7 +353,7 @@ limitations under the License. -->
     width: 30%;
     border-style: unset;
     outline: 0;
-    border: 1px solid #ccc;
+    border: 1px solid $disabled-color;
     height: 30px;
     padding: 0 5px;
   }
@@ -371,9 +371,9 @@ limitations under the License. -->
     padding: 0 3px;
     border-radius: 3px;
     overflow: hidden;
-    color: #3d444f;
+    color: $font-color;
     border: 1px dashed #aaa;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     margin: 0 2px;
   }
 
diff --git a/src/views/dashboard/related/ebpf/Content.vue b/src/views/dashboard/related/ebpf/Content.vue
index 9834b9e4..3678db0b 100644
--- a/src/views/dashboard/related/ebpf/Content.vue
+++ b/src/views/dashboard/related/ebpf/Content.vue
@@ -52,7 +52,7 @@ limitations under the License. -->
 
   .schedules {
     height: 90px;
-    border-bottom: 1px solid #ccc;
+    border-bottom: 1px solid $disabled-color;
     padding-right: 10px;
   }
 </style>
diff --git a/src/views/dashboard/related/ebpf/Header.vue b/src/views/dashboard/related/ebpf/Header.vue
index 989feb7f..289d1c89 100644
--- a/src/views/dashboard/related/ebpf/Header.vue
+++ b/src/views/dashboard/related/ebpf/Header.vue
@@ -89,7 +89,7 @@ limitations under the License. -->
 <style lang="scss" scoped>
   .header {
     padding: 5px 20px 5px 10px;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     border-bottom: 1px solid #dcdfe6;
     justify-content: space-between;
   }
diff --git a/src/views/dashboard/related/ebpf/components/NewTask.vue b/src/views/dashboard/related/ebpf/components/NewTask.vue
index aa667ebb..87b87705 100644
--- a/src/views/dashboard/related/ebpf/components/NewTask.vue
+++ b/src/views/dashboard/related/ebpf/components/NewTask.vue
@@ -140,12 +140,12 @@ limitations under the License. -->
   }
 
   .date {
-    font-size: 12px;
+    font-size: $font-size-smaller;
   }
 
   .label {
     margin-top: 10px;
-    font-size: 14px;
+    font-size: $font-size-normal;
   }
 
   .profile-input {
diff --git a/src/views/dashboard/related/ebpf/components/TaskList.vue b/src/views/dashboard/related/ebpf/components/TaskList.vue
index e9dc4ee7..7e50238f 100644
--- a/src/views/dashboard/related/ebpf/components/TaskList.vue
+++ b/src/views/dashboard/related/ebpf/components/TaskList.vue
@@ -80,7 +80,7 @@ limitations under the License. -->
     width: 300px;
     height: calc(100% - 10px);
     overflow: auto;
-    border-right: 1px solid rgba(0, 0, 0, 0.1);
+    border-right: 1px solid rgb(0 0 0 / 10%);
   }
 
   .item span {
@@ -89,7 +89,7 @@ limitations under the License. -->
 
   .profile-td {
     padding: 5px 10px;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+    border-bottom: 1px solid rgb(0 0 0 / 7%);
 
     &.selected {
       background-color: #ededed;
@@ -117,23 +117,23 @@ limitations under the License. -->
 
   .profile-tr {
     &:hover {
-      background-color: rgba(0, 0, 0, 0.04);
+      background-color: rgb(0 0 0 / 4%);
     }
   }
 
   .profile-t-tool {
     padding: 5px 10px;
     font-weight: bold;
-    border-right: 1px solid rgba(0, 0, 0, 0.07);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+    border-right: 1px solid rgb(0 0 0 / 7%);
+    border-bottom: 1px solid rgb(0 0 0 / 7%);
     background: #f3f4f9;
   }
 
   .profile-btn {
-    color: #3d444f;
+    color: $font-color;
     padding: 1px 3px;
     border-radius: 2px;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     float: right;
   }
 </style>
diff --git a/src/views/dashboard/related/event/Header.vue b/src/views/dashboard/related/event/Header.vue
index d571baea..702fb1ec 100644
--- a/src/views/dashboard/related/event/Header.vue
+++ b/src/views/dashboard/related/event/Header.vue
@@ -226,9 +226,9 @@ limitations under the License. -->
     padding: 0 3px;
     border-radius: 3px;
     overflow: hidden;
-    color: #3d444f;
+    color: $font-color;
     border: 1px dashed #aaa;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     margin: 0 2px;
   }
 </style>
diff --git a/src/views/dashboard/related/log/Header.vue b/src/views/dashboard/related/log/Header.vue
index 3520802d..8afc0a1b 100644
--- a/src/views/dashboard/related/log/Header.vue
+++ b/src/views/dashboard/related/log/Header.vue
@@ -397,7 +397,7 @@ limitations under the License. -->
     width: 30%;
     border-style: unset;
     outline: 0;
-    border: 1px solid #ccc;
+    border: 1px solid $disabled-color;
     height: 30px;
     padding: 0 5px;
   }
@@ -415,9 +415,9 @@ limitations under the License. -->
     padding: 0 3px;
     border-radius: 3px;
     overflow: hidden;
-    color: #3d444f;
+    color: $font-color;
     border: 1px dashed #aaa;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     margin: 0 2px;
   }
 
diff --git a/src/views/dashboard/related/log/LogTable/Index.vue b/src/views/dashboard/related/log/LogTable/Index.vue
index 144c2eef..266b119e 100644
--- a/src/views/dashboard/related/log/LogTable/Index.vue
+++ b/src/views/dashboard/related/log/LogTable/Index.vue
@@ -72,7 +72,7 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   .log {
-    font-size: 12px;
+    font-size: $font-size-smaller;
     height: 100%;
     border-bottom: 1px solid #eee;
     width: 100%;
@@ -84,7 +84,7 @@ limitations under the License. -->
     user-select: none;
     border-left: 0;
     border-right: 0;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    border-bottom: 1px solid rgb(0 0 0 / 10%);
 
     .traceId {
       width: 390px;
diff --git a/src/views/dashboard/related/log/LogTable/LogDetail.vue b/src/views/dashboard/related/log/LogTable/LogDetail.vue
index 6d4cc704..b8c8a758 100644
--- a/src/views/dashboard/related/log/LogTable/LogDetail.vue
+++ b/src/views/dashboard/related/log/LogTable/LogDetail.vue
@@ -72,7 +72,7 @@ limitations under the License. -->
     min-height: 500px;
     border: none;
     outline: none;
-    color: #3d444f;
+    color: $font-color;
     overflow: auto;
   }
 </style>
diff --git a/src/views/dashboard/related/network-profiling/components/NewConditions.vue b/src/views/dashboard/related/network-profiling/components/NewConditions.vue
index 9c9b71b4..d4b08e75 100644
--- a/src/views/dashboard/related/network-profiling/components/NewConditions.vue
+++ b/src/views/dashboard/related/network-profiling/components/NewConditions.vue
@@ -66,12 +66,12 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   .date {
-    font-size: 12px;
+    font-size: $font-size-smaller;
   }
 
   .label {
     margin-top: 10px;
-    font-size: 14px;
+    font-size: $font-size-normal;
   }
 
   .profile-input {
diff --git a/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue b/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue
index 427cb923..b8afe084 100644
--- a/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue
+++ b/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue
@@ -523,7 +523,7 @@ limitations under the License. -->
   .switch-icon-edit {
     cursor: pointer;
     transition: all 0.5ms linear;
-    border: 1px solid #ccc;
+    border: 1px solid $disabled-color;
     color: #666;
     display: inline-block;
     padding: 5px;
@@ -570,6 +570,6 @@ limitations under the License. -->
     padding: 5px;
     border: 1px solid #000;
     border-radius: 3px;
-    background-color: #fff;
+    background-color: $theme-background;
   }
 </style>
diff --git a/src/views/dashboard/related/network-profiling/components/Settings.vue b/src/views/dashboard/related/network-profiling/components/Settings.vue
index fcfa56cd..a16a3f81 100644
--- a/src/views/dashboard/related/network-profiling/components/Settings.vue
+++ b/src/views/dashboard/related/network-profiling/components/Settings.vue
@@ -66,7 +66,7 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   .label {
-    font-size: 12px;
+    font-size: $font-size-smaller;
     margin-top: 10px;
   }
 
diff --git a/src/views/dashboard/related/network-profiling/components/TimeLine.vue b/src/views/dashboard/related/network-profiling/components/TimeLine.vue
index fbaf3024..e645439c 100644
--- a/src/views/dashboard/related/network-profiling/components/TimeLine.vue
+++ b/src/views/dashboard/related/network-profiling/components/TimeLine.vue
@@ -141,7 +141,7 @@ limitations under the License. -->
   .switch-icon-edit {
     cursor: pointer;
     transition: all 0.5ms linear;
-    border: 1px solid #ccc;
+    border: 1px solid $disabled-color;
     color: #666;
     display: inline-block;
     padding: 5px;
diff --git a/src/views/dashboard/related/profile/Header.vue b/src/views/dashboard/related/profile/Header.vue
index 53c72970..1ea18eae 100644
--- a/src/views/dashboard/related/profile/Header.vue
+++ b/src/views/dashboard/related/profile/Header.vue
@@ -118,7 +118,7 @@ limitations under the License. -->
 <style lang="scss" scoped>
   .header {
     padding: 10px;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     border-bottom: 1px solid #dcdfe6;
   }
 
diff --git a/src/views/dashboard/related/profile/components/NewTask.vue b/src/views/dashboard/related/profile/components/NewTask.vue
index 94b780d7..fdcf8ea4 100644
--- a/src/views/dashboard/related/profile/components/NewTask.vue
+++ b/src/views/dashboard/related/profile/components/NewTask.vue
@@ -163,12 +163,12 @@ limitations under the License. -->
   }
 
   .date {
-    font-size: 12px;
+    font-size: $font-size-smaller;
   }
 
   .label {
     margin-top: 10px;
-    font-size: 14px;
+    font-size: $font-size-normal;
   }
 
   .profile-input {
diff --git a/src/views/dashboard/related/profile/components/SegmentList.vue b/src/views/dashboard/related/profile/components/SegmentList.vue
index 23be2152..1addee6a 100644
--- a/src/views/dashboard/related/profile/components/SegmentList.vue
+++ b/src/views/dashboard/related/profile/components/SegmentList.vue
@@ -82,7 +82,7 @@ limitations under the License. -->
     .profile-t-wrapper {
       overflow: auto;
       flex-grow: 1;
-      border-right: 1px solid rgba(0, 0, 0, 0.1);
+      border-right: 1px solid rgb(0 0 0 / 10%);
     }
 
     .profile-t-loading {
@@ -110,13 +110,13 @@ limitations under the License. -->
 
     .profile-tr {
       &:hover {
-        background-color: rgba(0, 0, 0, 0.04);
+        background-color: rgb(0 0 0 / 4%);
       }
     }
 
     .profile-td {
       padding: 5px 10px;
-      border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+      border-bottom: 1px solid rgb(0 0 0 / 7%);
 
       &.selected {
         background-color: #ededed;
@@ -126,8 +126,8 @@ limitations under the License. -->
     .profile-t-tool {
       padding: 5px 10px;
       font-weight: bold;
-      border-right: 1px solid rgba(0, 0, 0, 0.07);
-      border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+      border-right: 1px solid rgb(0 0 0 / 7%);
+      border-bottom: 1px solid rgb(0 0 0 / 7%);
       background: #f3f4f9;
     }
 
@@ -136,14 +136,14 @@ limitations under the License. -->
     }
 
     .profile-btn {
-      color: #3d444f;
+      color: $font-color;
       padding: 1px 3px;
       border-radius: 2px;
-      font-size: 12px;
+      font-size: $font-size-smaller;
     }
   }
 
   .profile-segment {
-    border-top: 1px solid rgba(0, 0, 0, 0.07);
+    border-top: 1px solid rgb(0 0 0 / 7%);
   }
 </style>
diff --git a/src/views/dashboard/related/profile/components/Stack/Container.vue b/src/views/dashboard/related/profile/components/Stack/Container.vue
index f03f123c..e510eddd 100644
--- a/src/views/dashboard/related/profile/components/Stack/Container.vue
+++ b/src/views/dashboard/related/profile/components/Stack/Container.vue
@@ -75,19 +75,19 @@ limitations under the License. -->
   }
 </script>
 <style lang="scss" scoped>
-  @import "./profile.scss";
+  @import url("./profile.scss");
 
   .dragger {
     float: right;
   }
 
   .profile {
-    font-size: 12px;
+    font-size: $font-size-smaller;
     height: 100%;
 
     .profile-set-btn {
-      font-size: 12px;
-      border: 1px solid #ccc;
+      font-size: $font-size-smaller;
+      border: 1px solid $disabled-color;
       border-radius: 3px;
       text-align: center;
       width: 57px;
@@ -107,7 +107,7 @@ limitations under the License. -->
     user-select: none;
     border-left: 0;
     border-right: 0;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    border-bottom: 1px solid rgb(0 0 0 / 10%);
   }
 
   .profile-header div {
diff --git a/src/views/dashboard/related/profile/components/TaskList.vue b/src/views/dashboard/related/profile/components/TaskList.vue
index a3854227..7ebe29b8 100644
--- a/src/views/dashboard/related/profile/components/TaskList.vue
+++ b/src/views/dashboard/related/profile/components/TaskList.vue
@@ -168,7 +168,7 @@ limitations under the License. -->
 
   .profile-td {
     padding: 5px 10px;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+    border-bottom: 1px solid rgb(0 0 0 / 7%);
 
     &.selected {
       background-color: #ededed;
@@ -183,7 +183,7 @@ limitations under the License. -->
   .profile-t-wrapper {
     overflow: auto;
     flex-grow: 1;
-    border-right: 1px solid rgba(0, 0, 0, 0.1);
+    border-right: 1px solid rgb(0 0 0 / 10%);
   }
 
   .profile-t {
@@ -196,19 +196,19 @@ limitations under the License. -->
 
   .profile-tr {
     &:hover {
-      background-color: rgba(0, 0, 0, 0.04);
+      background-color: rgb(0 0 0 / 4%);
     }
   }
 
   .profile-segment {
-    border-top: 1px solid rgba(0, 0, 0, 0.07);
+    border-top: 1px solid rgb(0 0 0 / 7%);
   }
 
   .profile-t-tool {
     padding: 5px 10px;
     font-weight: bold;
-    border-right: 1px solid rgba(0, 0, 0, 0.07);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+    border-right: 1px solid rgb(0 0 0 / 7%);
+    border-bottom: 1px solid rgb(0 0 0 / 7%);
     background: #f3f4f9;
   }
 
@@ -217,10 +217,10 @@ limitations under the License. -->
   }
 
   .profile-btn {
-    color: #3d444f;
+    color: $font-color;
     padding: 1px 3px;
     border-radius: 2px;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     float: right;
   }
 </style>
diff --git a/src/views/dashboard/related/task-timeline/components/ProfilingPanel.vue b/src/views/dashboard/related/task-timeline/components/ProfilingPanel.vue
index 1c1af5e4..1fbf78a4 100644
--- a/src/views/dashboard/related/task-timeline/components/ProfilingPanel.vue
+++ b/src/views/dashboard/related/task-timeline/components/ProfilingPanel.vue
@@ -77,7 +77,7 @@ limitations under the License. -->
 
   .schedules {
     height: 90px;
-    border-bottom: 1px solid #ccc;
+    border-bottom: 1px solid $disabled-color;
     padding-right: 10px;
   }
 </style>
diff --git a/src/views/dashboard/related/topology/components/Graph.vue b/src/views/dashboard/related/topology/components/Graph.vue
index 3382af85..22fc4078 100644
--- a/src/views/dashboard/related/topology/components/Graph.vue
+++ b/src/views/dashboard/related/topology/components/Graph.vue
@@ -20,7 +20,7 @@ limitations under the License. -->
     element-loading-background="rgba(0, 0, 0, 0)"
     :style="`height: ${height}px`"
   >
-    <svg class="svg-topology" :width="width - 100" :height="height" style="background-color: #fff" @click="svgEvent">
+    <svg class="svg-topology" :width="width - 100" :height="height" @click="svgEvent">
       <g class="svg-graph" :transform="`translate(${diff[0]}, ${diff[1]})`">
         <g
           class="topo-node"
@@ -631,6 +631,7 @@ limitations under the License. -->
 
     .svg-topology {
       cursor: move;
+      background-color: $theme-background;
     }
 
     .legend {
@@ -665,9 +666,9 @@ limitations under the License. -->
       overflow: auto;
       padding: 0 15px;
       border-radius: 3px;
-      color: #ccc;
-      border: 1px solid #ccc;
-      background-color: #fff;
+      color: $disabled-color;
+      border: 1px solid $disabled-color;
+      background-color: $theme-background;
       box-shadow: #eee 1px 2px 10px;
       transition: all 0.5ms linear;
 
@@ -686,7 +687,7 @@ limitations under the License. -->
       position: absolute;
       color: #333;
       cursor: pointer;
-      background-color: #fff;
+      background-color: $theme-background;
       border-radius: 5px;
       padding: 10px 0;
       border: 1px solid #999;
@@ -701,7 +702,7 @@ limitations under the License. -->
       }
 
       span:hover {
-        color: #409eff;
+        color: $active-color;
         background-color: #eee;
       }
     }
@@ -715,8 +716,8 @@ limitations under the License. -->
     .switch-icon {
       cursor: pointer;
       transition: all 0.5ms linear;
-      background: rgba(0, 0, 0, 0.3);
-      color: #fff;
+      background: rgb(0 0 0 / 30%);
+      color: $text-color;
       display: inline-block;
       padding: 2px 4px;
       border-radius: 3px;
@@ -736,7 +737,7 @@ limitations under the License. -->
     }
 
     .topo-text {
-      font-family: "Lato", "Source Han Sans CN", "Microsoft YaHei", sans-serif;
+      font-family: Lato, "Source Han Sans CN", "Microsoft YaHei", sans-serif;
       fill: #ddd;
       font-size: 11px;
       opacity: 0.8;
@@ -762,6 +763,6 @@ limitations under the License. -->
     padding: 5px;
     border: 1px solid #000;
     border-radius: 3px;
-    background-color: #fff;
+    background-color: $theme-background;
   }
 </style>
diff --git a/src/views/dashboard/related/topology/components/Metrics.vue b/src/views/dashboard/related/topology/components/Metrics.vue
index a1775057..3296e13e 100644
--- a/src/views/dashboard/related/topology/components/Metrics.vue
+++ b/src/views/dashboard/related/topology/components/Metrics.vue
@@ -149,7 +149,7 @@ limitations under the License. -->
   .label {
     width: 150px;
     display: inline-block;
-    font-size: 12px;
+    font-size: $font-size-smaller;
   }
 
   .close {
diff --git a/src/views/dashboard/related/topology/components/PodTopology.vue b/src/views/dashboard/related/topology/components/PodTopology.vue
index cc63d346..114570c4 100644
--- a/src/views/dashboard/related/topology/components/PodTopology.vue
+++ b/src/views/dashboard/related/topology/components/PodTopology.vue
@@ -279,7 +279,7 @@ limitations under the License. -->
     overflow: auto;
     padding: 10px 15px;
     border-radius: 3px;
-    color: #ccc;
+    color: $disabled-color;
     transition: all 0.5ms linear;
     z-index: 99;
     text-align: left;
@@ -306,7 +306,7 @@ limitations under the License. -->
   }
 
   .label {
-    color: #ccc;
+    color: $disabled-color;
     display: inline-block;
     margin-right: 5px;
   }
@@ -316,7 +316,7 @@ limitations under the License. -->
     padding: 10px 0;
     color: #333;
     cursor: pointer;
-    background-color: #fff;
+    background-color: $theme-background;
     border-radius: 3px;
 
     span {
@@ -329,7 +329,7 @@ limitations under the License. -->
     }
 
     span:hover {
-      color: #409eff;
+      color: $active-color;
       background-color: #eee;
     }
 
diff --git a/src/views/dashboard/related/topology/components/Settings.vue b/src/views/dashboard/related/topology/components/Settings.vue
index e0c9d4c1..95d47668 100644
--- a/src/views/dashboard/related/topology/components/Settings.vue
+++ b/src/views/dashboard/related/topology/components/Settings.vue
@@ -458,7 +458,7 @@ limitations under the License. -->
   }
 
   .label {
-    font-size: 12px;
+    font-size: $font-size-smaller;
     margin-top: 10px;
   }
 
diff --git a/src/views/dashboard/related/trace/Detail.vue b/src/views/dashboard/related/trace/Detail.vue
index cdaf111c..d85b5b40 100644
--- a/src/views/dashboard/related/trace/Detail.vue
+++ b/src/views/dashboard/related/trace/Detail.vue
@@ -171,20 +171,20 @@ limitations under the License. -->
   }
 
   .trace-detail-wrapper {
-    font-size: 12px;
+    font-size: $font-size-smaller;
     padding: 5px 10px;
     border-bottom: 1px solid #eee;
     width: 100%;
     height: 95px;
 
     .grey {
-      color: #fff;
+      color: $text-color;
       background-color: #448dfe;
     }
 
     .ghost {
       cursor: pointer;
-      background: rgba(0, 0, 0, 0.3);
+      background: rgb(0 0 0 / 30%);
     }
   }
 
@@ -193,7 +193,7 @@ limitations under the License. -->
   }
 
   .trace-detail-ids {
-    background-color: rgba(0, 0, 0, 0);
+    background-color: rgb(0 0 0 / 0%);
     outline: 0;
     border-style: unset;
     color: inherit;
@@ -209,7 +209,7 @@ limitations under the License. -->
   .tag {
     display: inline-block;
     border-radius: 4px;
-    padding: 0px 7px;
+    padding: 0 7px;
     background-color: #40454e;
     color: #eee;
   }
diff --git a/src/views/dashboard/related/trace/Index.vue b/src/views/dashboard/related/trace/Index.vue
index 0d2e31c2..8f211f9b 100644
--- a/src/views/dashboard/related/trace/Index.vue
+++ b/src/views/dashboard/related/trace/Index.vue
@@ -43,14 +43,14 @@ limitations under the License. -->
   .trace-wrapper {
     width: 100%;
     height: 100%;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     position: relative;
     overflow: auto;
   }
 
   .header {
     padding: 10px;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     border-bottom: 1px solid #dcdfe6;
     min-width: 1200px;
   }
diff --git a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
index 83bce1bf..5de26a5d 100644
--- a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
+++ b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
@@ -245,7 +245,7 @@ limitations under the License. -->
   }
 
   .popup-btn {
-    color: #fff;
+    color: $text-color;
     margin-top: 40px;
     width: 100%;
     text-align: center;
diff --git a/src/views/dashboard/related/trace/components/Table/TableContainer.vue b/src/views/dashboard/related/trace/components/Table/TableContainer.vue
index b3688a3f..b396de92 100644
--- a/src/views/dashboard/related/trace/components/Table/TableContainer.vue
+++ b/src/views/dashboard/related/trace/components/Table/TableContainer.vue
@@ -147,10 +147,10 @@ limitations under the License. -->
   }
 </script>
 <style lang="scss" scoped>
-  @import "./table.scss";
+  @import url("./table.scss");
 
   .trace {
-    font-size: 12px;
+    font-size: $font-size-smaller;
     height: 100%;
     overflow: auto;
     width: 100%;
@@ -165,7 +165,7 @@ limitations under the License. -->
     user-select: none;
     border-left: 0;
     border-right: 0;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    border-bottom: 1px solid rgb(0 0 0 / 10%);
   }
 
   .trace-header div {
diff --git a/src/views/dashboard/related/trace/components/Table/TableItem.vue b/src/views/dashboard/related/trace/components/Table/TableItem.vue
index fcc3e89e..0ce19ad1 100644
--- a/src/views/dashboard/related/trace/components/Table/TableItem.vue
+++ b/src/views/dashboard/related/trace/components/Table/TableItem.vue
@@ -252,7 +252,7 @@ limitations under the License. -->
   });
 </script>
 <style lang="scss" scoped>
-  @import "./table.scss";
+  @import url("./table.scss");
 
   .event-tag {
     width: 12px;
@@ -267,7 +267,7 @@ limitations under the License. -->
     color: #448dfe;
 
     &:hover {
-      background: rgba(0, 0, 0, 0.04);
+      background: rgb(0 0 0 / 4%);
     }
   }
 
@@ -276,7 +276,7 @@ limitations under the License. -->
     position: relative;
   }
 
-  .profiled:before {
+  .profiled::before {
     content: attr(data-text);
     position: absolute;
     top: 30px;
@@ -284,26 +284,26 @@ limitations under the License. -->
     width: 100px;
     padding: 10px;
     border-radius: 5px;
-    border: 1px solid #ccc;
+    border: 1px solid $disabled-color;
     background-color: #333;
-    color: #fff;
+    color: $text-color;
     text-align: center;
     box-shadow: #eee 1px 2px 10px;
     display: none;
   }
 
-  .profiled:after {
+  .profiled::after {
     content: "";
     position: absolute;
     left: 250px;
     top: 20px;
     border: 6px solid #333;
-    border-color: transparent transparent #333 transparent;
+    border-color: transparent transparent #333;
     display: none;
   }
 
-  .profiled:hover:before,
-  .profiled:hover:after {
+  .profiled:hover::before,
+  .profiled:hover::after {
     display: block;
     z-index: 999;
   }
@@ -320,11 +320,11 @@ limitations under the License. -->
   }
 
   .trace-item.selected {
-    background: rgba(0, 0, 0, 0.04);
+    background: rgb(0 0 0 / 4%);
   }
 
   .trace-item:not(.level0):hover {
-    background: rgba(0, 0, 0, 0.04);
+    background: rgb(0 0 0 / 4%);
   }
 
   .trace-item > div {
@@ -351,7 +351,7 @@ limitations under the License. -->
       width: 100%;
       height: 6px;
       border-radius: 3px;
-      background: rgb(63, 177, 227);
+      background: rgb(63 177 227);
       position: relative;
       margin-top: 11px;
       border: none;
@@ -359,7 +359,7 @@ limitations under the License. -->
 
     .inner-progress_bar {
       position: absolute;
-      background: rgb(110, 64, 170);
+      background: rgb(110 64 170);
       height: 4px;
       border-radius: 2px;
       left: 0;
diff --git a/vite.config.ts b/vite.config.ts
index 249c133e..a705e818 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -27,6 +27,7 @@ import path from "path";
 import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
 
 const OUTPUT_DIR = "dist";
+const pathSrc = path.resolve(__dirname, "./src");
 // https://vitejs.dev/config/
 export default ({ mode }: ConfigEnv): UserConfig => {
   const { VITE_SW_PROXY_TARGET } = loadEnv(mode, process.cwd());
@@ -54,11 +55,19 @@ export default ({ mode }: ConfigEnv): UserConfig => {
     resolve: {
       extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
       alias: {
-        "@": path.resolve(__dirname, "./src"),
+        "@": pathSrc,
         "vue-i18n": "vue-i18n/dist/vue-i18n.cjs.js",
       },
       preserveSymlinks: true,
     },
+    css: {
+      preprocessorOptions: {
+        //define global scss variable
+        scss: {
+          additionalData: `@import "@/styles/light.scss";`,
+        },
+      },
+    },
     server: {
       host: true,
       port: 3000,