diff --git a/src/components/DateCalendar.vue b/src/components/DateCalendar.vue
index 099e2c75..416b5f91 100755
--- a/src/components/DateCalendar.vue
+++ b/src/components/DateCalendar.vue
@@ -539,7 +539,7 @@ limitations under the License. -->
   }
 
   .calendar-date-out {
-    color: #ccc;
+    color: $disabled-color;
   }
 
   .calendar-date:hover,
@@ -558,7 +558,7 @@ limitations under the License. -->
 
   .calendar-date-disabled {
     cursor: not-allowed !important;
-    color: #ccc !important;
+    color: $disabled-color !important;
     background: $theme-background !important;
   }
 
diff --git a/src/components/TimePicker.vue b/src/components/TimePicker.vue
index 239f5bca..44304c9a 100755
--- a/src/components/TimePicker.vue
+++ b/src/components/TimePicker.vue
@@ -356,7 +356,7 @@ limitations under the License. -->
     text-align: center;
     color: $text-color;
     border-radius: 50%;
-    background: #ccc
+    background: $disabled-color
       url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3IDciIHdpZHRoPSI3IiBoZWlnaHQ9IjciPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik01LjU4LDVsMi44LTIuODFBLjQxLjQxLDAsMSwwLDcuOCwxLjZMNSw0LjQxLDIuMiwxLjZhLjQxLjQxLDAsMCwwLS41OC41OGgwTDQuNDIsNSwxLjYyLDcuOGEuNDEuNDEsMCwwLDAsLjU4LjU4TDUsNS41OCw3LjgsOC4zOWEuNDEuNDEsMCwwLDAsLjU4LS41OGgwWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEuNSAtMS40OCkiIHN0eWxlPSJmaWxsOiNmZmYiLz48L3N2Zz4NCg==")
       no-repeat 50% 50%;
   }
@@ -400,7 +400,6 @@ limitations under the License. -->
     background-color: #ebebe4;
     border-color: #e5e5e5;
     box-shadow: none;
-    box-shadow: none;
   }
 
   .datepicker-popup {
diff --git a/src/styles/lib.scss b/src/styles/lib.scss
index 9ea6b3d2..fe989fcf 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;
 }
 
diff --git a/src/styles/light.scss b/src/styles/light.scss
index b21536b7..5ccbbe54 100644
--- a/src/styles/light.scss
+++ b/src/styles/light.scss
@@ -17,8 +17,7 @@
 
 $font-color: #3d444f;
 $text-color: #fff;
-$font-color-black: #000;
-$font-color-grey: #ccc;
+$disabled-color: #ccc;
 $active-color: #409eff;
 $theme-background: #fff;
 $active-background: #409eff;
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
deleted file mode 100644
index d11bc6cb..00000000
--- a/src/styles/variables.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * 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;
-$active-color: #409eff;
-$theme-background: #fff;
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 70c3b50b..00beb5e1 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -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/components/ConditionTags.vue b/src/views/components/ConditionTags.vue
index 3b1b4e86..83893b13 100644
--- a/src/views/components/ConditionTags.vue
+++ b/src/views/components/ConditionTags.vue
@@ -262,7 +262,7 @@ limitations under the License. -->
     color: $font-color;
 
     input {
-      border: 1px solid #ccc;
+      border: 1px solid $disabled-color;
     }
 
     .selected {
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/configuration/widget/metric/Index.vue b/src/views/dashboard/configuration/widget/metric/Index.vue
index b8f55781..5882f67e 100644
--- a/src/views/dashboard/configuration/widget/metric/Index.vue
+++ b/src/views/dashboard/configuration/widget/metric/Index.vue
@@ -611,14 +611,14 @@ limitations under the License. -->
     span {
       display: inline-block;
       padding: 2px 10px;
-      border: 1px solid #ccc;
+      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;
     }
   }
 
diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue
index f0f2aec1..7089f015 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;
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/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue
index c3f4dc1a..5a6c42f1 100644
--- a/src/views/dashboard/panel/Tool.vue
+++ b/src/views/dashboard/panel/Tool.vue
@@ -768,7 +768,7 @@ 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;
diff --git a/src/views/dashboard/related/demand-log/Header.vue b/src/views/dashboard/related/demand-log/Header.vue
index 0c32fa41..710ac948 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;
   }
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/log/Header.vue b/src/views/dashboard/related/log/Header.vue
index 801fbd06..fe816de4 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;
   }
diff --git a/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue b/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue
index 40a157a1..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;
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/components/Stack/Container.vue b/src/views/dashboard/related/profile/components/Stack/Container.vue
index f03f123c..01c0005d 100644
--- a/src/views/dashboard/related/profile/components/Stack/Container.vue
+++ b/src/views/dashboard/related/profile/components/Stack/Container.vue
@@ -75,7 +75,7 @@ limitations under the License. -->
   }
 </script>
 <style lang="scss" scoped>
-  @import "./profile.scss";
+  @import url("./profile.scss");
 
   .dragger {
     float: right;
@@ -87,7 +87,7 @@ limitations under the License. -->
 
     .profile-set-btn {
       font-size: 12px;
-      border: 1px solid #ccc;
+      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/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 52053498..22fc4078 100644
--- a/src/views/dashboard/related/topology/components/Graph.vue
+++ b/src/views/dashboard/related/topology/components/Graph.vue
@@ -666,8 +666,8 @@ limitations under the License. -->
       overflow: auto;
       padding: 0 15px;
       border-radius: 3px;
-      color: #ccc;
-      border: 1px solid #ccc;
+      color: $disabled-color;
+      border: 1px solid $disabled-color;
       background-color: $theme-background;
       box-shadow: #eee 1px 2px 10px;
       transition: all 0.5ms linear;
diff --git a/src/views/dashboard/related/topology/components/PodTopology.vue b/src/views/dashboard/related/topology/components/PodTopology.vue
index a1e0f9cf..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;
   }
diff --git a/src/views/dashboard/related/trace/components/Table/TableItem.vue b/src/views/dashboard/related/trace/components/Table/TableItem.vue
index dcd0b05e..0ce19ad1 100644
--- a/src/views/dashboard/related/trace/components/Table/TableItem.vue
+++ b/src/views/dashboard/related/trace/components/Table/TableItem.vue
@@ -284,7 +284,7 @@ limitations under the License. -->
     width: 100px;
     padding: 10px;
     border-radius: 5px;
-    border: 1px solid #ccc;
+    border: 1px solid $disabled-color;
     background-color: #333;
     color: $text-color;
     text-align: center;