diff --git a/src/styles/theme.scss b/src/styles/theme.scss
index 32f3df24..b89ffef9 100644
--- a/src/styles/theme.scss
+++ b/src/styles/theme.scss
@@ -41,6 +41,9 @@ html {
   --sw-topology-box-shadow: #eee 1px 2px 10px;
   --sw-topology-setting-bg: #fff;
   --sw-topology-border: 1px solid #999;
+  --sw-trace-success: rgb(46 47 51 / 10%);
+  --sw-trace-list-border: rgb(0 0 0 / 7%);
+  --sw-trace-list-hover: #ededed;
 }
 
 html.dark {
@@ -68,6 +71,9 @@ html.dark {
   --sw-topology-box-shadow: 0 0 2px 0 #444;
   --sw-topology-setting-bg: #333;
   --sw-topology-border: 1px solid #666;
+  --sw-trace-success: #aaa;
+  --sw-trace-list-border: #333;
+  --sw-trace-list-hover: #3d444f;
 }
 
 .el-table tr {
diff --git a/src/views/dashboard/related/trace/Detail.vue b/src/views/dashboard/related/trace/Detail.vue
index c2e791b2..ec4bd9b8 100644
--- a/src/views/dashboard/related/trace/Detail.vue
+++ b/src/views/dashboard/related/trace/Detail.vue
@@ -178,7 +178,7 @@ limitations under the License. -->
     height: 95px;
 
     .grey {
-      color: $text-color;
+      color: #fff;
       background-color: $active-background;
     }
 
diff --git a/src/views/dashboard/related/trace/TraceList.vue b/src/views/dashboard/related/trace/TraceList.vue
index 9be3d2ac..54832e63 100644
--- a/src/views/dashboard/related/trace/TraceList.vue
+++ b/src/views/dashboard/related/trace/TraceList.vue
@@ -197,15 +197,15 @@ limitations under the License. -->
 
   .trace-td {
     padding: 5px;
-    border-bottom: 1px solid rgb(0 0 0 / 7%);
+    border-bottom: 1px solid var(--sw-trace-list-border);
 
     &.selected {
-      background-color: #ededed;
+      background-color: var(--sw-trace-list-hover);
     }
   }
 
   .trace-success {
-    border-left: 4px solid rgb(46 47 51 / 10%);
+    border-left: 4px solid var(--sw-trace-success);
   }
 
   .trace-warning {