feat: implement the Dark Theme (#334)

2025-10-15 12:49:17 +00:00 · 2023-11-14 20:37:15 +08:00
parent 780104c5d2
commit 832dc1676b
81 changed files with 638 additions and 351 deletions
--- a/src/views/dashboard/related/continuous-profiling/components/InstanceList.vue
+++ b/src/views/dashboard/related/continuous-profiling/components/InstanceList.vue
@@ -149,14 +149,14 @@ limitations under the License. -->
    font-weight: bold;
    border-bottom: 1px solid rgb(0 0 0 / 7%);
    padding: 10px 20px;
-    background-color: #f3f4f9;
+    background-color: var(--sw-table-header);
  }

  .settings {
    padding: 1px 0;
    border: 1px solid #666;
    border-radius: 3px;
-    color: #666;
+    color: var(--text-color-placeholder);
    cursor: pointer;
  }

--- a/src/views/dashboard/related/continuous-profiling/components/Policy.vue
+++ b/src/views/dashboard/related/continuous-profiling/components/Policy.vue
@@ -212,11 +212,11 @@ limitations under the License. -->
  }

  #uri-param {
-    border: 1px solid #dcdfe6;
+    border: 1px solid $border-color;
    cursor: text;
    padding: 0 5px;
    border-radius: 4px;
-    color: #606266;
+    color: var(--sw-setting-color);
    outline: none;
    height: 100px;

--- a/src/views/dashboard/related/continuous-profiling/components/PolicyList.vue
+++ b/src/views/dashboard/related/continuous-profiling/components/PolicyList.vue
@@ -147,7 +147,7 @@ limitations under the License. -->
    width: 300px;
    height: 98%;
    overflow: auto;
-    border-right: 1px solid rgb(0 0 0 / 10%);
+    border-right: 1px solid var(--sw-trace-list-border);
  }

  .item span {
@@ -159,7 +159,7 @@ limitations under the License. -->
    border-bottom: 1px solid rgb(0 0 0 / 7%);

    &.selected {
-      background-color: #ededed;
+      background-color: var(--sw-list-selected);
    }
  }

@@ -184,14 +184,14 @@ limitations under the License. -->

  .profile-tr {
    &:hover {
-      background-color: rgb(0 0 0 / 4%);
+      background-color: var(--sw-list-hover);
    }
  }

  .profile-t-tool {
    padding: 10px 5px 10px 10px;
    border-bottom: 1px solid rgb(0 0 0 / 7%);
-    background: #f3f4f9;
+    background-color: var(--sw-table-header);
    width: 100%;
    font-weight: bold;
  }
--- a/src/views/dashboard/related/ebpf/Header.vue
+++ b/src/views/dashboard/related/ebpf/Header.vue
@@ -90,7 +90,7 @@ limitations under the License. -->
  .header {
    padding: 5px 20px 5px 10px;
    font-size: $font-size-smaller;
-    border-bottom: 1px solid #dcdfe6;
+    border-bottom: 1px solid $border-color;
    justify-content: space-between;
  }

--- 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 rgb(0 0 0 / 10%);
+    border-right: 1px solid var(--sw-trace-list-border);
  }

  .item span {
@@ -92,7 +92,7 @@ limitations under the License. -->
    border-bottom: 1px solid rgb(0 0 0 / 7%);

    &.selected {
-      background-color: #ededed;
+      background-color: var(--sw-list-selected);
    }
  }

@@ -117,16 +117,16 @@ limitations under the License. -->

  .profile-tr {
    &:hover {
-      background-color: rgb(0 0 0 / 4%);
+      background-color: var(--sw-list-hover);
    }
  }

  .profile-t-tool {
    padding: 5px 10px;
    font-weight: bold;
-    border-right: 1px solid rgb(0 0 0 / 7%);
-    border-bottom: 1px solid rgb(0 0 0 / 7%);
-    background: #f3f4f9;
+    border-right: 1px solid var(--sw-trace-list-border);
+    border-bottom: 1px solid var(--sw-trace-list-border);
+    background-color: var(--sw-table-header);
  }

  .profile-btn {
--- a/src/views/dashboard/related/log/LogTable/Index.vue
+++ b/src/views/dashboard/related/log/LogTable/Index.vue
@@ -74,7 +74,7 @@ limitations under the License. -->
  .log {
    font-size: $font-size-smaller;
    height: 100%;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid $border-color-primary;
    width: 100%;
    overflow: auto;
  }
@@ -85,7 +85,7 @@ limitations under the License. -->
    user-select: none;
    border-left: 0;
    border-right: 0;
-    border-bottom: 1px solid rgb(0 0 0 / 10%);
+    border-bottom: 1px solid var(--sw-trace-list-border);

    .traceId {
      width: 140px;
@@ -109,7 +109,7 @@ limitations under the License. -->
    border: 1px solid transparent;
    border-right: 1px dotted silver;
    line-height: 30px;
-    background-color: #f3f4f9;
+    background-color: var(--sw-table-header);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
--- a/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue
+++ b/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue
@@ -524,7 +524,7 @@ limitations under the License. -->
    cursor: pointer;
    transition: all 0.5ms linear;
    border: 1px solid $disabled-color;
-    color: #666;
+    color: var(--text-color-placeholder);
    display: inline-block;
    padding: 5px;
    border-radius: 3px;
@@ -568,7 +568,7 @@ limitations under the License. -->
    position: absolute;
    visibility: hidden;
    padding: 5px;
-    border: 1px solid #000;
+    border: var(--sw-topology-border);
    border-radius: 3px;
    background-color: $theme-background;
  }
--- a/src/views/dashboard/related/network-profiling/components/Tasks.vue
+++ b/src/views/dashboard/related/network-profiling/components/Tasks.vue
@@ -216,7 +216,7 @@ limitations under the License. -->
    width: 330px;
    height: calc(100% - 10px);
    overflow: auto;
-    border-right: 1px solid rgb(0 0 0 / 10%);
+    border-right: 1px solid var(--sw-trace-list-border);
  }

  .item span {
@@ -228,7 +228,7 @@ limitations under the License. -->
    border-bottom: 1px solid rgb(0 0 0 / 7%);

    &.selected {
-      background-color: #ededed;
+      background-color: var(--sw-list-selected);
    }
  }

@@ -253,14 +253,14 @@ limitations under the License. -->

  .profile-tr {
    &:hover {
-      background-color: rgb(0 0 0 / 4%);
+      background-color: var(--sw-list-hover);
    }
  }

  .profile-t-tool {
    padding: 10px 5px 10px 10px;
    border-bottom: 1px solid rgb(0 0 0 / 7%);
-    background: #f3f4f9;
+    background-color: var(--sw-table-header);
    width: 100%;
  }

--- a/src/views/dashboard/related/network-profiling/components/TimeLine.vue
+++ b/src/views/dashboard/related/network-profiling/components/TimeLine.vue
@@ -142,7 +142,7 @@ limitations under the License. -->
    cursor: pointer;
    transition: all 0.5ms linear;
    border: 1px solid $disabled-color;
-    color: #666;
+    color: var(--text-color-placeholder);
    display: inline-block;
    padding: 5px;
    border-radius: 3px;
--- a/src/views/dashboard/related/profile/Header.vue
+++ b/src/views/dashboard/related/profile/Header.vue
@@ -119,7 +119,7 @@ limitations under the License. -->
  .header {
    padding: 10px;
    font-size: $font-size-smaller;
-    border-bottom: 1px solid #dcdfe6;
+    border-bottom: 1px solid $border-color;
  }

  .name {
--- a/src/views/dashboard/related/profile/components/SegmentList.vue
+++ b/src/views/dashboard/related/profile/components/SegmentList.vue
@@ -58,6 +58,7 @@ limitations under the License. -->
  const key = computed(
    () =>
      (profileStore.currentSegment &&
+        profileStore.currentSegment.spans &&
        profileStore.currentSegment.spans.length &&
        profileStore.currentSegment.spans[0].segmentId) ||
      "",
@@ -82,7 +83,7 @@ limitations under the License. -->
    .profile-t-wrapper {
      overflow: auto;
      flex-grow: 1;
-      border-right: 1px solid rgb(0 0 0 / 10%);
+      border-right: 1px solid var(--sw-trace-list-border);
    }

    .profile-t-loading {
@@ -110,25 +111,25 @@ limitations under the License. -->

    .profile-tr {
      &:hover {
-        background-color: rgb(0 0 0 / 4%);
+        background-color: var(--sw-list-hover);
      }
    }

    .profile-td {
      padding: 5px 10px;
-      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-list-selected);
      }
    }

    .profile-t-tool {
      padding: 5px 10px;
      font-weight: bold;
-      border-right: 1px solid rgb(0 0 0 / 7%);
-      border-bottom: 1px solid rgb(0 0 0 / 7%);
-      background: #f3f4f9;
+      border-right: 1px solid var(--sw-trace-list-border);
+      border-bottom: 1px solid var(--sw-trace-list-border);
+      background-color: var(--sw-table-header);
    }

    .log-item {
@@ -144,6 +145,6 @@ limitations under the License. -->
  }

  .profile-segment {
-    border-top: 1px solid rgb(0 0 0 / 7%);
+    border-top: 1px solid var(--sw-trace-list-border);
  }
 </style>
--- a/src/views/dashboard/related/profile/components/Stack/Container.vue
+++ b/src/views/dashboard/related/profile/components/Stack/Container.vue
@@ -107,7 +107,7 @@ limitations under the License. -->
    user-select: none;
    border-left: 0;
    border-right: 0;
-    border-bottom: 1px solid rgb(0 0 0 / 10%);
+    border-bottom: 1px solid var(--sw-trace-list-border);
  }

  .profile-header div {
@@ -115,7 +115,7 @@ limitations under the License. -->
    padding: 0 4px;
    border-right: 1px dotted silver;
    line-height: 30px;
-    background-color: #f3f4f9;
+    background-color: var(--sw-table-header);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
--- a/src/views/dashboard/related/profile/components/Stack/Item.vue
+++ b/src/views/dashboard/related/profile/components/Stack/Item.vue
@@ -14,7 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
  <div>
-    <div :class="['profile-item', 'level' + data.parentId]" :style="{ color: data.topDur ? '#448dfe' : '#3d444f' }">
+    <div
+      :class="['profile-item', 'level' + data.parentId]"
+      :style="{ color: data.topDur ? '#448dfe' : appStore.theme === Themes.Dark ? '#fafbfc' : '#3d444f' }"
+    >
      <div
        :class="['thread', 'level' + data.parentId]"
        :style="{
@@ -47,6 +50,8 @@ limitations under the License. -->
 <script lang="ts">
  import { ref, defineComponent, toRefs } from "vue";
  import type { PropType } from "vue";
+  import { useAppStoreWithOut } from "@/store/modules/app";
+  import { Themes } from "@/constants/data";

  const props = {
    data: { type: Object as PropType<any>, default: () => ({}) },
@@ -56,24 +61,25 @@ limitations under the License. -->
    name: "TableItem",
    props,
    setup(props) {
+      const appStore = useAppStoreWithOut();
      const displayChildren = ref<boolean>(true);
      function toggle() {
        displayChildren.value = !displayChildren.value;
      }
-      return { toggle, displayChildren, ...toRefs(props) };
+      return { Themes, appStore, toggle, displayChildren, ...toRefs(props) };
    },
  });
 </script>
 <style lang="scss" scoped>
-  @import "./profile.scss";
+  @import url("./profile.scss");

  .profile-item.level0 {
-    background: rgba(0, 0, 0, 0.04);
-    color: #448dfe;
+    background-color: var(--sw-list-hover);
+    color: var(--el-color-primary);

    &:hover {
-      background: rgba(0, 0, 0, 0.04);
-      color: #448dfe;
+      background-color: var(--sw-list-hover);
+      color: var(--el-color-primary);
    }

    &::before {
@@ -81,7 +87,7 @@ limitations under the License. -->
      content: "";
      width: 5px;
      height: 100%;
-      background: #448dfe;
+      background-color: var(--el-color-primary);
      left: 0;
    }
  }
@@ -92,11 +98,11 @@ limitations under the License. -->
  }

  .profile-item.selected {
-    background: rgba(0, 0, 0, 0.04);
+    background-color: var(--sw-list-selected);
  }

  .profile-item:not(.level0):hover {
-    background: rgba(0, 0, 0, 0.04);
+    background-color: var(--sw-list-hover);
  }

  .profile-item > div {
@@ -123,7 +129,7 @@ limitations under the License. -->
      width: 100%;
      height: 6px;
      border-radius: 3px;
-      background: rgb(63, 177, 227);
+      background: var(--el-color-primary);
      position: relative;
      margin-top: 11px;
      border: none;
@@ -131,7 +137,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;
--- a/src/views/dashboard/related/profile/components/TaskList.vue
+++ b/src/views/dashboard/related/profile/components/TaskList.vue
@@ -168,10 +168,10 @@ limitations under the License. -->

  .profile-td {
    padding: 5px 10px;
-    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-list-selected);
    }
  }

@@ -183,7 +183,7 @@ limitations under the License. -->
  .profile-t-wrapper {
    overflow: auto;
    flex-grow: 1;
-    border-right: 1px solid rgb(0 0 0 / 10%);
+    border-right: 1px solid var(--sw-trace-list-border);
  }

  .profile-t {
@@ -196,20 +196,20 @@ limitations under the License. -->

  .profile-tr {
    &:hover {
-      background-color: rgb(0 0 0 / 4%);
+      background-color: var(--sw-list-hover);
    }
  }

  .profile-segment {
-    border-top: 1px solid rgb(0 0 0 / 7%);
+    border-top: 1px solid var(--sw-trace-list-border);
  }

  .profile-t-tool {
    padding: 5px 10px;
    font-weight: bold;
-    border-right: 1px solid rgb(0 0 0 / 7%);
-    border-bottom: 1px solid rgb(0 0 0 / 7%);
-    background: #f3f4f9;
+    border-right: 1px solid var(--sw-trace-list-border);
+    border-bottom: 1px solid var(--sw-trace-list-border);
+    background-color: var(--sw-table-header);
  }

  .log-item {
--- a/src/views/dashboard/related/topology/components/Graph.vue
+++ b/src/views/dashboard/related/topology/components/Graph.vue
@@ -43,6 +43,7 @@ limitations under the License. -->
            :href="!n.type || n.type === `N/A` ? icons.UNDEFINED : icons[n.type.toUpperCase().replace('-', '')]"
          />
          <text
+            class="node-text"
            :x="n.x - (Math.min(n.name.length, 20) * 6) / 2 + 6"
            :y="n.y + n.height + 8"
            style="pointer-events: none"
@@ -678,6 +679,12 @@ limitations under the License. -->
    overflow: auto;
    margin-top: 30px;

+    .node-text {
+      fill: var(--sw-topology-color);
+      font-size: 12px;
+      opacity: 0.9;
+    }
+
    .svg-topology {
      cursor: move;
      background-color: $theme-background;
@@ -687,7 +694,7 @@ limitations under the License. -->
      position: absolute;
      top: 10px;
      left: 25px;
-      color: #666;
+      color: var(--sw-topology-color);

      div {
        margin-bottom: 8px;
@@ -716,31 +723,26 @@ limitations under the License. -->
      padding: 0 15px;
      border-radius: 3px;
      color: $disabled-color;
-      border: 1px solid #eee;
-      background-color: $theme-background;
-      box-shadow: #eee 1px 2px 10px;
+      border: 1px solid $border-color-primary;
+      background-color: var(--sw-topology-setting-bg);
+      box-shadow: var(--sw-topology-box-shadow);
      transition: all 0.5ms linear;
-
-      &.dark {
-        background-color: #2b3037;
-      }
    }

    .label {
-      color: #666;
+      color: var(--sw-topology-color);
      display: inline-block;
      margin-right: 5px;
    }

    .operations-list {
      position: absolute;
-      color: #333;
+      color: $font-color;
      cursor: pointer;
+      border: var(--sw-topology-border);
+      border-radius: 3px;
      background-color: $theme-background;
-      border-radius: 5px;
      padding: 10px 0;
-      border: 1px solid #999;
-      box-shadow: #ddd 1px 2px 10px;

      span {
        display: block;
@@ -752,7 +754,7 @@ limitations under the License. -->

      span:hover {
        color: $active-color;
-        background-color: #eee;
+        background-color: $popper-hover-bg-color;
      }
    }

@@ -765,7 +767,7 @@ limitations under the License. -->
    .switch-icon {
      cursor: pointer;
      transition: all 0.5ms linear;
-      background: rgb(0 0 0 / 30%);
+      background: var(--sw-topology-switch-icon);
      color: $text-color;
      display: inline-block;
      padding: 2px 4px;
@@ -784,13 +786,6 @@ limitations under the License. -->
    .topo-node {
      cursor: pointer;
    }
-
-    .topo-text {
-      font-family: Lato, "Source Han Sans CN", "Microsoft YaHei", sans-serif;
-      fill: #ddd;
-      font-size: 11px;
-      opacity: 0.8;
-    }
  }
  @keyframes topo-dash {
    from {
@@ -810,7 +805,7 @@ limitations under the License. -->
    position: absolute;
    visibility: hidden;
    padding: 5px;
-    border: 1px solid #000;
+    border: var(--sw-topology-border);
    border-radius: 3px;
    background-color: $theme-background;
  }
--- a/src/views/dashboard/related/topology/components/PodTopology.vue
+++ b/src/views/dashboard/related/topology/components/PodTopology.vue
@@ -281,16 +281,16 @@ limitations under the License. -->
    right: 10px;
    width: 400px;
    height: 600px;
-    border: 1px solid #eee;
-    background-color: $theme-background;
+    border: 1px solid $border-color-primary;
    overflow: auto;
    padding: 10px 15px;
    border-radius: 3px;
    color: $disabled-color;
+    background-color: var(--sw-topology-setting-bg);
+    box-shadow: var(--sw-topology-box-shadow);
    transition: all 0.5ms linear;
    z-index: 99;
    text-align: left;
-    box-shadow: #eee 1px 2px 10px;
  }

  .tool {
@@ -307,7 +307,7 @@ limitations under the License. -->
    text-align: center;
    cursor: pointer;
    transition: all 0.5ms linear;
-    background: rgb(0 0 0 / 30%);
+    background: var(--sw-topology-switch-icon);
    color: $text-color;
    display: inline-block;
    border-radius: 3px;
@@ -322,7 +322,7 @@ limitations under the License. -->
  .operations-list {
    position: absolute;
    padding: 10px 0;
-    color: #333;
+    color: $font-color;
    cursor: pointer;
    background-color: $theme-background;
    border-radius: 3px;
@@ -338,7 +338,7 @@ limitations under the License. -->

    span:hover {
      color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
    }

    i {
--- a/src/views/dashboard/related/topology/components/Sankey.vue
+++ b/src/views/dashboard/related/topology/components/Sankey.vue
@@ -24,6 +24,8 @@ limitations under the License. -->
  import type { MetricConfigOpt } from "@/types/dashboard";
  import { aggregation } from "@/hooks/useMetricsProcessor";
  import { MetricModes } from "../../../data";
+  import { useAppStoreWithOut } from "@/store/modules/app";
+  import { Themes } from "@/constants/data";

  /*global defineEmits, defineProps */
  const props = defineProps({
@@ -33,6 +35,7 @@ limitations under the License. -->
    },
  });
  const emit = defineEmits(["click"]);
+  const appStore = useAppStoreWithOut();
  const topologyStore = useTopologyStore();
  const option = computed(() => getOption());

@@ -52,7 +55,7 @@ limitations under the License. -->
        data: topologyStore.nodes,
        links: topologyStore.calls,
        label: {
-          color: "#666",
+          color: appStore.theme === Themes.Dark ? "#ccc" : "#666",
          formatter: (param: any) => param.data.name,
        },
        color: ["#6be6c1", "#3fcfdc", "#626c91", "#3fbcde", "#a0a7e6", "#3fa9e1", "#96dee8", "#bf99f8"],
--- a/src/views/dashboard/related/topology/components/Settings.vue
+++ b/src/views/dashboard/related/topology/components/Settings.vue
@@ -640,14 +640,14 @@ limitations under the License. -->
  }

  .title {
-    color: #666;
+    color: var(--sw-topology-color);
    margin-bottom: 0;
  }

  .label {
    font-size: $font-size-smaller;
    margin-top: 10px;
-    color: #666;
+    color: var(--sw-topology-color);
  }

  .legend-btn {
--- a/src/views/dashboard/related/topology/components/utils/layout.ts
+++ b/src/views/dashboard/related/topology/components/utils/layout.ts
@@ -19,7 +19,6 @@ import type { Node, Call } from "@/types/topology";

 export function layout(levels: Node[][], calls: Call[], radius: number) {
  // precompute level depth
-  console.log(levels);
  levels.forEach((l: Node[], i: number) => l.forEach((n: any) => n && (n.level = i)));

  const nodes: Node[] = levels.reduce((a, x) => a.concat(x), []);
--- a/src/views/dashboard/related/trace/Detail.vue
+++ b/src/views/dashboard/related/trace/Detail.vue
@@ -173,13 +173,13 @@ limitations under the License. -->
  .trace-detail-wrapper {
    font-size: $font-size-smaller;
    padding: 5px 10px;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid $border-color-primary;
    width: 100%;
    height: 95px;

    .grey {
-      color: $text-color;
-      background-color: #448dfe;
+      color: #fff;
+      background-color: $active-background;
    }

    .ghost {
--- a/src/views/dashboard/related/trace/Header.vue
+++ b/src/views/dashboard/related/trace/Header.vue
@@ -31,7 +31,7 @@ limitations under the License. -->
      @change="changeLatency"
      class="ml-10"
    />
-    <el-popover trigger="hover" width="250" placement="bottom" effect="light">
+    <el-popover trigger="hover" width="250" placement="bottom">
      <template #reference>
        <div class="cp conditions-popup">
          <Icon iconName="conditions" size="middle" />
@@ -52,7 +52,7 @@ limitations under the License. -->
        </div>
      </div>
    </el-popover>
-    <el-popover trigger="hover" width="250" placement="bottom" effect="light">
+    <el-popover trigger="hover" width="250" placement="bottom">
      <template #reference>
        <div class="cp metric-value">
          <Icon iconName="info_outline" size="middle" />
--- a/src/views/dashboard/related/trace/Index.vue
+++ b/src/views/dashboard/related/trace/Index.vue
@@ -51,7 +51,7 @@ limitations under the License. -->
  .header {
    padding: 10px;
    font-size: $font-size-smaller;
-    border-bottom: 1px solid #dcdfe6;
+    border-bottom: 1px solid $border-color;
    min-width: 1200px;
  }

--- a/src/views/dashboard/related/trace/TraceList.vue
+++ b/src/views/dashboard/related/trace/TraceList.vue
@@ -163,7 +163,7 @@ limitations under the License. -->

  .trace-t-wrapper {
    overflow: auto;
-    border-right: 1px solid rgb(0 0 0 / 10%);
+    border-right: 1px solid var(--sw-trace-list-border);
  }

  .trace-t-loading {
@@ -191,21 +191,21 @@ limitations under the License. -->

  .trace-tr {
    &:hover {
-      background-color: rgb(0 0 0 / 4%);
+      background-color: var(--sw-list-hover);
    }
  }

  .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-list-selected);
    }
  }

  .trace-success {
-    border-left: 4px solid rgb(46 47 51 / 10%);
+    border-left: 4px solid var(--sw-trace-success);
  }

  .trace-warning {
--- a/src/views/dashboard/related/trace/components/D3Graph/Index.vue
+++ b/src/views/dashboard/related/trace/components/D3Graph/Index.vue
@@ -28,6 +28,7 @@ limitations under the License. -->
  import TreeGraph from "../../utils/d3-trace-tree";
  import type { Span, Ref } from "@/types/trace";
  import SpanDetail from "./SpanDetail.vue";
+  import { useAppStoreWithOut } from "@/store/modules/app";

  /* global defineProps, Nullable, defineExpose,Recordable*/
  const props = defineProps({
@@ -35,6 +36,7 @@ limitations under the License. -->
    traceId: { type: String, default: "" },
    type: { type: String, default: "List" },
  });
+  const appStore = useAppStoreWithOut();
  const loading = ref<boolean>(false);
  const showDetail = ref<boolean>(false);
  const fixSpansSize = ref<number>(0);
@@ -289,6 +291,17 @@ limitations under the License. -->
      });
    },
  );
+  watch(
+    () => appStore.theme,
+    () => {
+      tree.value.init({ label: "TRACE_ROOT", children: segmentId.value }, props.data, fixSpansSize.value);
+      tree.value.draw(() => {
+        setTimeout(() => {
+          loading.value = false;
+        }, 200);
+      });
+    },
+  );
 </script>
 <style lang="scss" scoped>
  .d3-graph {
@@ -301,12 +314,12 @@ limitations under the License. -->
  }

  .trace-node-container {
-    fill: rgba(0, 0, 0, 0);
+    fill: rgb(0 0 0 / 0%);
    stroke-width: 5px;
    cursor: pointer;

    &:hover {
-      fill: rgba(0, 0, 0, 0.05);
+      fill: rgb(0 0 0 / 5%);
    }
  }

--- a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
+++ b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
@@ -142,6 +142,7 @@ limitations under the License. -->
  /*global defineProps, Nullable, Recordable */
  const props = defineProps({
    currentSpan: { type: Object as PropType<Recordable>, default: () => ({}) },
+    traceId: { type: String, default: "" },
  });
  const { t } = useI18n();
  const traceStore = useTraceStore();
@@ -167,7 +168,7 @@ limitations under the License. -->
    const res = await traceStore.getSpanLogs({
      condition: {
        relatedTrace: {
-          traceId: props.currentSpan.traceId,
+          traceId: props.currentSpan.traceId || props.traceId,
          segmentId: props.currentSpan.segmentId,
          spanId: props.currentSpan.spanId,
        },
--- a/src/views/dashboard/related/trace/components/Table/Index.vue
+++ b/src/views/dashboard/related/trace/components/Table/Index.vue
@@ -17,7 +17,13 @@ limitations under the License. -->
    <div class="trace-t-loading" v-show="loading">
      <Icon iconName="spinner" size="sm" />
    </div>
-    <TableContainer :tableData="tableData" type="table" :headerType="headerType" @select="handleSelectSpan">
+    <TableContainer
+      :tableData="tableData"
+      type="table"
+      :headerType="headerType"
+      :traceId="traceId"
+      @select="handleSelectSpan"
+    >
      <div class="trace-tips" v-if="!tableData.length">{{ $t("noData") }}</div>
    </TableContainer>
  </div>
--- a/src/views/dashboard/related/trace/components/Table/TableContainer.vue
+++ b/src/views/dashboard/related/trace/components/Table/TableContainer.vue
@@ -41,6 +41,7 @@ limitations under the License. -->
    </div>
    <TableItem
      :method="method"
+      :traceId="traceId"
      v-for="(item, index) in tableData"
      :data="item"
      :key="'key' + index"
@@ -63,6 +64,7 @@ limitations under the License. -->
    tableData: { type: Array as PropType<Recordable>, default: () => [] },
    type: { type: String, default: "" },
    headerType: { type: String, default: "" },
+    traceId: { type: String, default: "" },
  });
  const emits = defineEmits(["select"]);
  const method = ref<number>(300);
@@ -165,12 +167,12 @@ limitations under the License. -->
    user-select: none;
    border-left: 0;
    border-right: 0;
-    border-bottom: 1px solid rgb(0 0 0 / 10%);
+    border-bottom: 1px solid var(--sw-trace-list-border);
  }

  .trace-header div {
    display: inline-block;
-    background-color: #f3f4f9;
+    background-color: var(--sw-table-header);
    padding: 0 4px;
    border: 1px solid transparent;
    border-right: 1px dotted silver;
--- a/src/views/dashboard/related/trace/components/Table/TableItem.vue
+++ b/src/views/dashboard/related/trace/components/Table/TableItem.vue
@@ -137,17 +137,18 @@ limitations under the License. -->
      />
    </div>
    <el-dialog v-model="showDetail" :destroy-on-close="true" fullscreen @closed="showDetail = false">
-      <SpanDetail :currentSpan="data" />
+      <SpanDetail :currentSpan="data" :traceId="traceId" />
    </el-dialog>
  </div>
 </template>
 <script lang="ts">
  import { useI18n } from "vue-i18n";
-  import { ref, computed, defineComponent } from "vue";
+  import { ref, computed, defineComponent, watch } from "vue";
  import type { PropType } from "vue";
  import SpanDetail from "../D3Graph/SpanDetail.vue";
  import { dateFormat } from "@/utils/dateFormat";
  import { useAppStoreWithOut } from "@/store/modules/app";
+  import { Themes } from "@/constants/data";

  /*global Recordable*/
  const props = {
@@ -155,6 +156,7 @@ limitations under the License. -->
    method: { type: Number, default: 0 },
    type: { type: String, default: "" },
    headerType: { type: String, default: "" },
+    traceId: { type: String, traceId: "" },
  };
  export default defineComponent({
    name: "TableItem",
@@ -201,12 +203,12 @@ limitations under the License. -->
        }
        const items: any = document.querySelectorAll(".trace-item");
        for (const item of items) {
-          item.style.background = "#fff";
+          item.style.background = appStore.theme === Themes.Dark ? "#212224" : "#fff";
        }
-        dom.style.background = "rgba(0, 0, 0, 0.1)";
+        dom.style.background = appStore.theme === Themes.Dark ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)";
        const p: any = document.getElementsByClassName("profiled")[0];
        if (p) {
-          p.style.background = "#eee";
+          p.style.background = appStore.theme === Themes.Dark ? "#333" : "#eee";
        }
      }
      function selectSpan(event: Recordable) {
@@ -232,6 +234,19 @@ limitations under the License. -->
        showSelectSpan(dom);
        showDetail.value = true;
      }
+      watch(
+        () => appStore.theme,
+        () => {
+          const items: any = document.querySelectorAll(".trace-item");
+          for (const item of items) {
+            item.style.background = appStore.theme === Themes.Dark ? "#212224" : "#fff";
+          }
+          const p: any = document.getElementsByClassName("profiled")[0];
+          if (p) {
+            p.style.background = appStore.theme === Themes.Dark ? "#333" : "#eee";
+          }
+        },
+      );
      return {
        displayChildren,
        outterPercent,
@@ -272,7 +287,8 @@ limitations under the License. -->
  }

  .profiled {
-    background-color: #eee;
+    // background-color: #eee;
+    background-color: var(--sw-table-header);
    position: relative;
  }

@@ -285,10 +301,10 @@ limitations under the License. -->
    padding: 10px;
    border-radius: 5px;
    border: 1px solid $disabled-color;
-    background-color: #333;
+    background-color: $font-color;
    color: $text-color;
    text-align: center;
-    box-shadow: #eee 1px 2px 10px;
+    box-shadow: var(--box-shadow-color) 0 2px 3px;
    display: none;
  }

@@ -297,8 +313,8 @@ limitations under the License. -->
    position: absolute;
    left: 250px;
    top: 20px;
-    border: 6px solid #333;
-    border-color: transparent transparent #333;
+    border: 6px solid $font-color;
+    border-color: transparent transparent $font-color;
    display: none;
  }

@@ -320,11 +336,11 @@ limitations under the License. -->
  }

  .trace-item.selected {
-    background: rgb(0 0 0 / 4%);
+    background-color: var(--sw-list-selected);
  }

  .trace-item:not(.level0):hover {
-    background: rgb(0 0 0 / 4%);
+    background-color: var(--sw-list-hover);
  }

  .trace-item > div {
--- a/src/views/dashboard/related/trace/utils/d3-trace-list.ts
+++ b/src/views/dashboard/related/trace/utils/d3-trace-list.ts
@@ -20,6 +20,8 @@ import d3tip from "d3-tip";
 import type { Trace } from "@/types/trace";
 import dayjs from "dayjs";
 import icons from "@/assets/img/icons";
+import { useAppStoreWithOut } from "@/store/modules/app";
+import { Themes } from "@/constants/data";

 export default class ListGraph {
  private barHeight = 48;
@@ -127,6 +129,7 @@ export default class ListGraph {
  }
  update(source: Recordable, callback: Function) {
    const t = this;
+    const appStore = useAppStoreWithOut();
    const nodes = this.root.descendants();
    let index = -1;
    this.root.eachBefore((n: Recordable) => {
@@ -166,7 +169,7 @@ export default class ListGraph {
      .attr("width", 16)
      .attr("height", 16)
      .attr("x", 6)
-      .attr("y", -10)
+      .attr("y", -8)
      .attr("xlink:href", (d: any) =>
        d.data.type === "Entry" ? icons.ENTRY : d.data.type === "Exit" ? icons.EXIT : "",
      )
@@ -186,7 +189,7 @@ export default class ListGraph {
      .attr("width", 16)
      .attr("height", 16)
      .attr("x", 6)
-      .attr("y", -10)
+      .attr("y", -8)
      .attr("xlink:href", (d: any) => {
        const key = (d.data.refs || []).findIndex((d: { type: string }) => d.type === "CROSS_THREAD");
        return key > -1 ? icons.STREAM : "";
@@ -214,14 +217,14 @@ export default class ListGraph {
      .append("text")
      .attr("x", 13)
      .attr("y", 5)
-      .attr("fill", "#E54C17")
+      .attr("fill", appStore.theme === Themes.Dark ? "#666" : "#E54C17")
      .html((d: Recordable) => (d.data.isError ? "◉" : ""));
    nodeEnter
      .append("text")
      .attr("class", "node-text")
      .attr("x", 35)
      .attr("y", -6)
-      .attr("fill", "#333")
+      .attr("fill", appStore.theme === Themes.Dark ? "#eee" : "#333")
      .html((d: Recordable) => {
        if (d.data.label === "TRACE_ROOT") {
          return "";
@@ -242,7 +245,7 @@ export default class ListGraph {
      })
      .attr("cy", -5)
      .attr("fill", "none")
-      .attr("stroke", "#e66")
+      .attr("stroke", appStore.theme === Themes.Dark ? "#666" : "#e66")
      .style("opacity", (d: Recordable) => {
        const events = d.data.attachedEvents;
        if (events && events.length) {
@@ -255,7 +258,7 @@ export default class ListGraph {
      .append("text")
      .attr("x", 267)
      .attr("y", -1)
-      .attr("fill", "#e66")
+      .attr("fill", appStore.theme === Themes.Dark ? "#666" : "#e66")
      .style("font-size", "10px")
      .text((d: Recordable) => {
        const events = d.data.attachedEvents;
@@ -270,7 +273,7 @@ export default class ListGraph {
      .attr("class", "node-text")
      .attr("x", 35)
      .attr("y", 12)
-      .attr("fill", "#ccc")
+      .attr("fill", appStore.theme === Themes.Dark ? "#777" : "#ccc")
      .style("font-size", "11px")
      .text(
        (d: Recordable) =>
@@ -305,11 +308,15 @@ export default class ListGraph {
      .style("opacity", 1);
    nodeEnter
      .append("circle")
-      .attr("r", 3)
+      .attr("r", appStore.theme === Themes.Dark ? 4 : 3)
      .style("cursor", "pointer")
-      .attr("stroke-width", 2.5)
+      .attr("stroke-width", appStore.theme === Themes.Dark ? 3 : 2.5)
      .attr("fill", (d: Recordable) =>
-        d._children ? `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}` : "rbga(0,0,0,0)",
+        d._children
+          ? `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}`
+          : appStore.theme === Themes.Dark
+          ? "#eee"
+          : "rbga(0,0,0,0)",
      )
      .style("stroke", (d: Recordable) =>
        d.data.label === "TRACE_ROOT" ? "" : `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}`,
@@ -320,7 +327,7 @@ export default class ListGraph {
    node
      .transition()
      .duration(400)
-      .attr("transform", (d: Recordable) => `translate(${d.y + 5},${d.x})`)
+      .attr("transform", (d: Recordable) => `translate(${d.y + 3},${d.x})`)
      .style("opacity", 1)
      .select("circle")
      .attr("fill", (d: Recordable) =>
@@ -343,8 +350,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", appStore.theme === Themes.Dark ? "rgba(244,244,244,0)" : "rgba(0,0,0,0)")
+      .attr("stroke", appStore.theme === Themes.Dark ? "rgba(244,244,244,0.4)" : "rgba(0, 0, 0, 0.1)")
      .attr("stroke-width", 2)
      .attr("transform", `translate(5, 0)`)
      .attr("d", () => {
--- a/src/views/dashboard/related/trace/utils/d3-trace-tree.ts
+++ b/src/views/dashboard/related/trace/utils/d3-trace-tree.ts
@@ -18,6 +18,8 @@
 import * as d3 from "d3";
 import d3tip from "d3-tip";
 import type { Trace, Span } from "@/types/trace";
+import { useAppStoreWithOut } from "@/store/modules/app";
+import { Themes } from "@/constants/data";

 export default class TraceMap {
  private i = 0;
@@ -132,6 +134,7 @@ export default class TraceMap {
    this.update(this.root);
  }
  update(source: Recordable) {
+    const appStore = useAppStoreWithOut();
    const that: any = this;
    const treeData = this.treemap(this.root);
    const nodes = treeData.descendants(),
@@ -237,7 +240,9 @@ export default class TraceMap {
          ? (d.data.isError ? "◉ " : "") + d.data.label.slice(0, 10) + "..."
          : (d.data.isError ? "◉ " : "") + d.data.label,
      )
-      .style("fill", (d: Recordable) => (!d.data.isError ? "#3d444f" : "#E54C17"));
+      .style("fill", (d: Recordable) =>
+        !d.data.isError ? (appStore.theme === Themes.Dark ? "#eee" : "#3d444f") : "#E54C17",
+      );
    nodeEnter
      .append("text")
      .attr("class", "node-text")
@@ -245,7 +250,7 @@ export default class TraceMap {
        return d.children || d._children ? -45 : 15;
      })
      .attr("dy", "1em")
-      .attr("fill", "#bbb")
+      .attr("fill", appStore.theme === Themes.Dark ? "#888" : "#bbb")
      .attr("text-anchor", function (d: Recordable) {
        return d.children || d._children ? "end" : "start";
      })
@@ -330,7 +335,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", appStore.theme === Themes.Dark ? "rgba(255, 255, 255, 0.4)" : "rgba(0, 0, 0, 0.1)")
      .style("stroke-width", 1.5)
      .style("fill", "none");