diff --git a/src/views/dashboard/related/trace/utils/d3-trace-list.ts b/src/views/dashboard/related/trace/utils/d3-trace-list.ts
index 8d90dc62..7c83bbdf 100644
--- a/src/views/dashboard/related/trace/utils/d3-trace-list.ts
+++ b/src/views/dashboard/related/trace/utils/d3-trace-list.ts
@@ -173,7 +173,7 @@ export default class ListGraph {
       .attr("class", "node-text")
       .attr("x", 35)
       .attr("y", -6)
-      .attr("fill", "#333")
+      .attr("fill", "var(--spp-light-grey)")
       .text((d: any) => {
         if (d.data.label === "TRACE_ROOT") {
           return "";
@@ -187,7 +187,7 @@ export default class ListGraph {
       .attr("class", "node-text")
       .attr("x", 35)
       .attr("y", 12)
-      .attr("fill", "#ccc")
+      .attr("fill", "var(--spp-white)")
       .style("font-size", "11px")
       .text(
         (d: any) =>
@@ -271,8 +271,8 @@ export default class ListGraph {
       .enter()
       .insert("path", "g")
       .attr("class", "trace-link")
-      .attr("fill", "rgba(0,0,0,0)")
-      .attr("stroke", "rgba(0, 0, 0, 0.1)")
+      .attr("fill", "rgba(128,128,128,0)")
+      .attr("stroke", "rgba(128,128,128,0.1)")
       .attr("stroke-width", 2)
       .attr("transform", `translate(5, 0)`)
       .attr("d", () => {
diff --git a/src/views/dashboard/related/trace/utils/d3-trace-tree.ts b/src/views/dashboard/related/trace/utils/d3-trace-tree.ts
index 02382834..73ef6ad6 100644
--- a/src/views/dashboard/related/trace/utils/d3-trace-tree.ts
+++ b/src/views/dashboard/related/trace/utils/d3-trace-tree.ts
@@ -218,7 +218,7 @@ export default class TraceMap {
           ? (d.data.isError ? "◉ " : "") + d.data.label.slice(0, 19) + "..."
           : (d.data.isError ? "◉ " : "") + d.data.label
       )
-      .style("fill", (d: any) => (!d.data.isError ? "#3d444f" : "#E54C17"));
+      .style("fill", (d: any) => (!d.data.isError ? "var(--spp-light-grey)" : "#E54C17"));
     nodeEnter
       .append("text")
       .attr("class", "node-text")
@@ -318,7 +318,7 @@ export default class TraceMap {
         const o = { x: source.x0, y: source.y0 };
         return diagonal(o, o);
       })
-      .attr("stroke", "rgba(0, 0, 0, 0.1)")
+      .attr("stroke", "var(--spp-white)")
       .style("stroke-width", 1.5)
       .style("fill", "none");