diff --git a/src/components/DateCalendar.vue b/src/components/DateCalendar.vue
index f5d9bc4e..15b26d96 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 {
@@ -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%;
diff --git a/src/components/Graph.vue b/src/components/Graph.vue
index c4f0556d..fc11c879 100644
--- a/src/components/Graph.vue
+++ b/src/components/Graph.vue
@@ -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..501cb0b7 100644
--- a/src/components/SelectSingle.vue
+++ b/src/components/SelectSingle.vue
@@ -96,7 +96,7 @@ limitations under the License. -->
       padding: 0 3px;
       border-radius: 3px;
       margin: 3px;
-      color: #409eff;
+      color: $active-color;
       background-color: #fafafa;
       border: 1px solid #e8e8e8;
       text-align: center;
@@ -138,7 +138,7 @@ limitations under the License. -->
     top: 26px;
     left: 0;
     background: #fff;
-    box-shadow: 0 1px 6px rgba(99, 99, 99, 0.2);
+    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/styles/reset.scss b/src/styles/reset.scss
index f483bdc4..ba1bc0dc 100644
--- a/src/styles/reset.scss
+++ b/src/styles/reset.scss
@@ -19,7 +19,7 @@ body {
   margin: 0;
   line-height: 1.5;
   font-size: 14px;
-  color: #3d444f;
+  color: $font-color;
   font-family: Helvetica, Arial, "Source Han Sans CN", "Microsoft YaHei", sans-serif;
   text-rendering: optimizelegibility;
   text-size-adjust: 100%;
diff --git a/src/views/components/ConditionTags.vue b/src/views/components/ConditionTags.vue
index a7b2078b..3b1b4e86 100644
--- a/src/views/components/ConditionTags.vue
+++ b/src/views/components/ConditionTags.vue
@@ -222,7 +222,7 @@ limitations under the License. -->
     overflow: hidden;
     border: 1px dashed #aaa;
     font-size: 12px;
-    margin: 3px 2px 0 2px;
+    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;
     }
 
     .selected {
-      color: #3d444f;
+      color: $font-color;
     }
   }
 
diff --git a/src/views/dashboard/List.vue b/src/views/dashboard/List.vue
index 85f6abfe..888597a0 100644
--- a/src/views/dashboard/List.vue
+++ b/src/views/dashboard/List.vue
@@ -514,7 +514,7 @@ limitations under the License. -->
   }
 
   .name {
-    color: #409eff;
+    color: $active-color;
   }
 
   .reload {
diff --git a/src/views/dashboard/components/WidgetLink.vue b/src/views/dashboard/components/WidgetLink.vue
index c92d4411..4cbc0e24 100644
--- a/src/views/dashboard/components/WidgetLink.vue
+++ b/src/views/dashboard/components/WidgetLink.vue
@@ -154,7 +154,7 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   .link {
-    color: #409eff;
+    color: $active-color;
     cursor: pointer;
   }
 
diff --git a/src/views/dashboard/configuration/widget/metric/Index.vue b/src/views/dashboard/configuration/widget/metric/Index.vue
index d7c34533..c66032f2 100644
--- a/src/views/dashboard/configuration/widget/metric/Index.vue
+++ b/src/views/dashboard/configuration/widget/metric/Index.vue
@@ -623,7 +623,7 @@ limitations under the License. -->
   }
 
   span.active {
-    background-color: #409eff;
+    background-color: $active-color;
     color: #fff;
   }
 
@@ -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/controls/ContinuousProfiling.vue b/src/views/dashboard/controls/ContinuousProfiling.vue
index ee1c1650..ed4e7144 100644
--- a/src/views/dashboard/controls/ContinuousProfiling.vue
+++ b/src/views/dashboard/controls/ContinuousProfiling.vue
@@ -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..31aba005 100644
--- a/src/views/dashboard/controls/DemandLog.vue
+++ b/src/views/dashboard/controls/DemandLog.vue
@@ -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..848439d7 100644
--- a/src/views/dashboard/controls/Ebpf.vue
+++ b/src/views/dashboard/controls/Ebpf.vue
@@ -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..2db06542 100644
--- a/src/views/dashboard/controls/Event.vue
+++ b/src/views/dashboard/controls/Event.vue
@@ -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..d71993b5 100644
--- a/src/views/dashboard/controls/Log.vue
+++ b/src/views/dashboard/controls/Log.vue
@@ -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..70a3fc8c 100644
--- a/src/views/dashboard/controls/NetworkProfiling.vue
+++ b/src/views/dashboard/controls/NetworkProfiling.vue
@@ -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..fdf277a4 100644
--- a/src/views/dashboard/controls/Profile.vue
+++ b/src/views/dashboard/controls/Profile.vue
@@ -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..30f7857e 100644
--- a/src/views/dashboard/controls/Tab.vue
+++ b/src/views/dashboard/controls/Tab.vue
@@ -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;
       }
     }
   }
@@ -374,7 +374,7 @@ limitations under the License. -->
   }
 
   .vue-grid-item.active {
-    border: 1px solid #409eff;
+    border: 1px solid $active-color;
   }
 
   .no-data-tips {
diff --git a/src/views/dashboard/controls/TaskTimeline.vue b/src/views/dashboard/controls/TaskTimeline.vue
index 4651abe6..0ed92307 100644
--- a/src/views/dashboard/controls/TaskTimeline.vue
+++ b/src/views/dashboard/controls/TaskTimeline.vue
@@ -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..db32b1ed 100644
--- a/src/views/dashboard/controls/Text.vue
+++ b/src/views/dashboard/controls/Text.vue
@@ -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..514f726b 100644
--- a/src/views/dashboard/controls/ThirdPartyApp.vue
+++ b/src/views/dashboard/controls/ThirdPartyApp.vue
@@ -102,7 +102,7 @@ limitations under the License. -->
     text-align: center;
 
     &:hover {
-      color: #409eff;
+      color: $active-color;
       background-color: #eee;
     }
   }
diff --git a/src/views/dashboard/controls/TimeRange.vue b/src/views/dashboard/controls/TimeRange.vue
index da171441..aefd36e4 100644
--- a/src/views/dashboard/controls/TimeRange.vue
+++ b/src/views/dashboard/controls/TimeRange.vue
@@ -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..d1b202a4 100644
--- a/src/views/dashboard/controls/Topology.vue
+++ b/src/views/dashboard/controls/Topology.vue
@@ -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/Trace.vue b/src/views/dashboard/controls/Trace.vue
index 4d4bee6b..15db5c7b 100644
--- a/src/views/dashboard/controls/Trace.vue
+++ b/src/views/dashboard/controls/Trace.vue
@@ -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/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/TopList.vue b/src/views/dashboard/graphs/TopList.vue
index f8b05109..25eebe06 100644
--- a/src/views/dashboard/graphs/TopList.vue
+++ b/src/views/dashboard/graphs/TopList.vue
@@ -200,7 +200,7 @@ limitations under the License. -->
     font-size: 12px;
 
     &: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/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..d9358669 100644
--- a/src/views/dashboard/panel/Layout.vue
+++ b/src/views/dashboard/panel/Layout.vue
@@ -86,12 +86,12 @@ limitations under the License. -->
 
   .vue-grid-item:not(.vue-grid-placeholder) {
     background: #fff;
-    box-shadow: 0px 1px 4px 0px #00000029;
+    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 {
diff --git a/src/views/dashboard/related/continuous-profiling/components/InstanceList.vue b/src/views/dashboard/related/continuous-profiling/components/InstanceList.vue
index bb8d641f..b6dc90b7 100644
--- a/src/views/dashboard/related/continuous-profiling/components/InstanceList.vue
+++ b/src/views/dashboard/related/continuous-profiling/components/InstanceList.vue
@@ -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..a6eb275f 100644
--- a/src/views/dashboard/related/continuous-profiling/components/Policy.vue
+++ b/src/views/dashboard/related/continuous-profiling/components/Policy.vue
@@ -221,7 +221,7 @@ limitations under the License. -->
     height: 100px;
 
     &:focus {
-      border-color: #409eff;
+      border-color: $active-color;
     }
   }
 
diff --git a/src/views/dashboard/related/demand-log/Header.vue b/src/views/dashboard/related/demand-log/Header.vue
index f2c9a5eb..0c32fa41 100644
--- a/src/views/dashboard/related/demand-log/Header.vue
+++ b/src/views/dashboard/related/demand-log/Header.vue
@@ -371,7 +371,7 @@ limitations under the License. -->
     padding: 0 3px;
     border-radius: 3px;
     overflow: hidden;
-    color: #3d444f;
+    color: $font-color;
     border: 1px dashed #aaa;
     font-size: 12px;
     margin: 0 2px;
diff --git a/src/views/dashboard/related/ebpf/components/TaskList.vue b/src/views/dashboard/related/ebpf/components/TaskList.vue
index e9dc4ee7..096a7236 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,20 +117,20 @@ 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;
diff --git a/src/views/dashboard/related/event/Header.vue b/src/views/dashboard/related/event/Header.vue
index d571baea..80e82c53 100644
--- a/src/views/dashboard/related/event/Header.vue
+++ b/src/views/dashboard/related/event/Header.vue
@@ -226,7 +226,7 @@ limitations under the License. -->
     padding: 0 3px;
     border-radius: 3px;
     overflow: hidden;
-    color: #3d444f;
+    color: $font-color;
     border: 1px dashed #aaa;
     font-size: 12px;
     margin: 0 2px;
diff --git a/src/views/dashboard/related/log/Header.vue b/src/views/dashboard/related/log/Header.vue
index 3520802d..801fbd06 100644
--- a/src/views/dashboard/related/log/Header.vue
+++ b/src/views/dashboard/related/log/Header.vue
@@ -415,7 +415,7 @@ limitations under the License. -->
     padding: 0 3px;
     border-radius: 3px;
     overflow: hidden;
-    color: #3d444f;
+    color: $font-color;
     border: 1px dashed #aaa;
     font-size: 12px;
     margin: 0 2px;
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/profile/components/SegmentList.vue b/src/views/dashboard/related/profile/components/SegmentList.vue
index 23be2152..2aae1a8c 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,7 +136,7 @@ limitations under the License. -->
     }
 
     .profile-btn {
-      color: #3d444f;
+      color: $font-color;
       padding: 1px 3px;
       border-radius: 2px;
       font-size: 12px;
@@ -144,6 +144,6 @@ limitations under the License. -->
   }
 
   .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/TaskList.vue b/src/views/dashboard/related/profile/components/TaskList.vue
index a3854227..ae857b17 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,7 +217,7 @@ limitations under the License. -->
   }
 
   .profile-btn {
-    color: #3d444f;
+    color: $font-color;
     padding: 1px 3px;
     border-radius: 2px;
     font-size: 12px;
diff --git a/src/views/dashboard/related/topology/components/Graph.vue b/src/views/dashboard/related/topology/components/Graph.vue
index 3382af85..689ac204 100644
--- a/src/views/dashboard/related/topology/components/Graph.vue
+++ b/src/views/dashboard/related/topology/components/Graph.vue
@@ -701,7 +701,7 @@ limitations under the License. -->
       }
 
       span:hover {
-        color: #409eff;
+        color: $active-color;
         background-color: #eee;
       }
     }
@@ -715,7 +715,7 @@ limitations under the License. -->
     .switch-icon {
       cursor: pointer;
       transition: all 0.5ms linear;
-      background: rgba(0, 0, 0, 0.3);
+      background: rgb(0 0 0 / 30%);
       color: #fff;
       display: inline-block;
       padding: 2px 4px;
@@ -736,7 +736,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;
diff --git a/src/views/dashboard/related/topology/components/PodTopology.vue b/src/views/dashboard/related/topology/components/PodTopology.vue
index cc63d346..59e4b2fb 100644
--- a/src/views/dashboard/related/topology/components/PodTopology.vue
+++ b/src/views/dashboard/related/topology/components/PodTopology.vue
@@ -329,7 +329,7 @@ limitations under the License. -->
     }
 
     span:hover {
-      color: #409eff;
+      color: $active-color;
       background-color: #eee;
     }