From 832dc1676b7a79ed74759be3cb4f35ff522ac9b4 Mon Sep 17 00:00:00 2001
From: Fine0830 <fanxue0830@gmail.com>
Date: Tue, 14 Nov 2023 20:37:15 +0800
Subject: [PATCH] feat: implement the Dark Theme (#334)

---
 package-lock.json                             | 192 ++++++++++++------
 package.json                                  |   2 +-
 src/App.vue                                   |   5 +-
 src/assets/img/tools/EXIT.png                 | Bin 269 -> 259 bytes
 src/components/SelectSingle.vue               |   6 +-
 src/constants/data.ts                         |   5 +
 src/hooks/useEcharts.ts                       |   7 +-
 src/layout/components/AppMain.vue             |   2 +-
 src/layout/components/NavBar.vue              |  37 +++-
 src/store/modules/app.ts                      |   6 +
 src/store/modules/profile.ts                  |   2 +-
 src/styles/light.scss                         |  25 ---
 src/styles/reset.scss                         |  25 +--
 src/styles/theme.scss                         | 152 ++++++++++++++
 src/views/Marketplace.vue                     |   2 +-
 src/views/Settings.vue                        |   4 +-
 src/views/alarm/Content.vue                   |   2 +-
 src/views/alarm/Header.vue                    |  11 +-
 src/views/dashboard/Widget.vue                |   2 +-
 .../configuration/ContinuousProfiling.vue     |   2 +-
 src/views/dashboard/configuration/Event.vue   |   2 +-
 src/views/dashboard/configuration/Text.vue    |   3 +-
 .../dashboard/configuration/ThirdPartyApp.vue |   2 +-
 .../dashboard/configuration/TimeRange.vue     |   2 +-
 .../dashboard/configuration/Topology.vue      |   2 +-
 src/views/dashboard/configuration/Widget.vue  |   6 +-
 .../configuration/widget/metric/Index.vue     |   3 +-
 .../controls/ContinuousProfiling.vue          |   6 +-
 src/views/dashboard/controls/DemandLog.vue    |   4 +-
 src/views/dashboard/controls/Ebpf.vue         |   4 +-
 src/views/dashboard/controls/Event.vue        |   4 +-
 src/views/dashboard/controls/Log.vue          |   4 +-
 .../dashboard/controls/NetworkProfiling.vue   |   6 +-
 src/views/dashboard/controls/Profile.vue      |   4 +-
 src/views/dashboard/controls/Tab.vue          |  11 +-
 src/views/dashboard/controls/TaskTimeline.vue |   6 +-
 src/views/dashboard/controls/Text.vue         |  16 +-
 .../dashboard/controls/ThirdPartyApp.vue      |   2 +-
 src/views/dashboard/controls/TimeRange.vue    |   2 +-
 src/views/dashboard/controls/Topology.vue     |   3 +-
 src/views/dashboard/controls/Trace.vue        |   4 +-
 src/views/dashboard/controls/Widget.vue       |   4 +-
 src/views/dashboard/data.ts                   |   4 +-
 src/views/dashboard/graphs/Bar.vue            |   8 +-
 src/views/dashboard/graphs/Card.vue           |   2 +-
 src/views/dashboard/graphs/Line.vue           |  14 +-
 src/views/dashboard/graphs/Table.vue          |   4 +-
 src/views/dashboard/graphs/TopList.vue        |  10 +-
 src/views/dashboard/panel/Layout.vue          |   4 +-
 src/views/dashboard/panel/Tool.vue            |  30 ++-
 .../components/InstanceList.vue               |   4 +-
 .../components/Policy.vue                     |   4 +-
 .../components/PolicyList.vue                 |   8 +-
 src/views/dashboard/related/ebpf/Header.vue   |   2 +-
 .../related/ebpf/components/TaskList.vue      |  12 +-
 .../dashboard/related/log/LogTable/Index.vue  |   6 +-
 .../components/ProcessTopology.vue            |   4 +-
 .../network-profiling/components/Tasks.vue    |   8 +-
 .../network-profiling/components/TimeLine.vue |   2 +-
 .../dashboard/related/profile/Header.vue      |   2 +-
 .../profile/components/SegmentList.vue        |  17 +-
 .../profile/components/Stack/Container.vue    |   4 +-
 .../related/profile/components/Stack/Item.vue |  30 +--
 .../related/profile/components/TaskList.vue   |  16 +-
 .../related/topology/components/Graph.vue     |  41 ++--
 .../topology/components/PodTopology.vue       |  12 +-
 .../related/topology/components/Sankey.vue    |   5 +-
 .../related/topology/components/Settings.vue  |   4 +-
 .../topology/components/utils/layout.ts       |   1 -
 src/views/dashboard/related/trace/Detail.vue  |   6 +-
 src/views/dashboard/related/trace/Header.vue  |   4 +-
 src/views/dashboard/related/trace/Index.vue   |   2 +-
 .../dashboard/related/trace/TraceList.vue     |  10 +-
 .../trace/components/D3Graph/Index.vue        |  17 +-
 .../trace/components/D3Graph/SpanDetail.vue   |   3 +-
 .../related/trace/components/Table/Index.vue  |   8 +-
 .../trace/components/Table/TableContainer.vue |   6 +-
 .../trace/components/Table/TableItem.vue      |  40 ++--
 .../related/trace/utils/d3-trace-list.ts      |  33 +--
 .../related/trace/utils/d3-trace-tree.ts      |  11 +-
 vite.config.ts                                |   2 +-
 81 files changed, 638 insertions(+), 351 deletions(-)
 delete mode 100644 src/styles/light.scss
 create mode 100644 src/styles/theme.scss

diff --git a/package-lock.json b/package-lock.json
index eb5864d0..fbf93d83 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,7 @@
         "d3-flame-graph": "^4.1.3",
         "d3-tip": "^0.9.1",
         "echarts": "^5.2.2",
-        "element-plus": "^2.1.0",
+        "element-plus": "^2.2.5",
         "lodash": "^4.17.21",
         "monaco-editor": "^0.34.1",
         "pinia": "^2.0.28",
@@ -1307,9 +1307,9 @@
       }
     },
     "node_modules/@ctrl/tinycolor": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.5.0.tgz",
-      "integrity": "sha512-tlJpwF40DEQcfR/QF+wNMVyGMaO9FQp6Z1Wahj4Gk3CJQYHwA2xVG7iKDFdW6zuxZY9XWOpGcfNCTsX4McOsOg==",
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
+      "integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==",
       "engines": {
         "node": ">=10"
       }
@@ -1375,9 +1375,9 @@
       }
     },
     "node_modules/@element-plus/icons-vue": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-1.1.4.tgz",
-      "integrity": "sha512-Iz/nHqdp1sFPmdzRwHkEQQA3lKvoObk8azgABZ81QUOpW9s/lUyQVUSh0tNtEPZXQlKwlSh7SPgoVxzrE0uuVQ==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.1.0.tgz",
+      "integrity": "sha512-PSBn3elNoanENc1vnCfh+3WA9fimRC7n+fWkf3rE5jvv+aBohNHABC/KAR5KWPecxWxDTVT1ERpRbOMRcOV/vA==",
       "peerDependencies": {
         "vue": "^3.2.0"
       }
@@ -1784,6 +1784,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-0.7.3.tgz",
+      "integrity": "sha512-buc8BXHmG9l82+OQXOFU3Kr2XQx9ys01U/Q9HMIrZ300iLc8HLMgh7dcCqgYzAzf4BkoQvDcXf5Y+CuEZ5JBYg=="
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.5.4.tgz",
+      "integrity": "sha512-419BMceRLq0RrmTSDxn8hf9R3VCJv2K9PUfugh5JyEFmdjzDo+e8U5EdR8nzKq8Yj1htzLm3b6eQEEam3/rrtg==",
+      "dependencies": {
+        "@floating-ui/core": "^0.7.3"
+      }
+    },
     "node_modules/@hapi/hoek": {
       "version": "9.3.0",
       "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -2144,9 +2157,10 @@
       }
     },
     "node_modules/@popperjs/core": {
-      "version": "2.11.6",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
-      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
+      "name": "@sxzz/popperjs-es",
+      "version": "2.11.7",
+      "resolved": "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
+      "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/popperjs"
@@ -2561,10 +2575,9 @@
       "integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ=="
     },
     "node_modules/@types/lodash-es": {
-      "version": "4.17.6",
-      "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
-      "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
-      "peer": true,
+      "version": "4.17.11",
+      "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.11.tgz",
+      "integrity": "sha512-eCw8FYAWHt2DDl77s+AMLLzPn310LKohruumpucZI4oOFJkIgnlaJcy23OKMJxx4r9PeTF13Gv6w+jqjWQaYUg==",
       "dependencies": {
         "@types/lodash": "*"
       }
@@ -5666,33 +5679,43 @@
       "dev": true
     },
     "node_modules/element-plus": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.1.0.tgz",
-      "integrity": "sha512-PQM3LMv5qKf0sS/k+PXuBcmKl1Eb3b7fxKPyFHZ6eodZcNykbEMcpLZefQkvmDr6calVnuQ7TUnTm7Tm9LJXvg==",
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.2.5.tgz",
+      "integrity": "sha512-Kl0yn/PQca5YQo3M3NPBP4Xl71NQuMtDx5zNXZGVyl5FjdMujXiFB9SXKYGDUCgFU3d/Rl14vB4Fpmcl2Iz+Hw==",
       "dependencies": {
-        "@ctrl/tinycolor": "^3.4.0",
-        "@element-plus/icons-vue": "^1.0.1",
-        "@popperjs/core": "^2.11.2",
-        "@vueuse/core": "^7.7.1",
-        "async-validator": "^4.0.7",
-        "dayjs": "^1.10.8",
+        "@ctrl/tinycolor": "^3.4.1",
+        "@element-plus/icons-vue": "^2.0.5",
+        "@floating-ui/dom": "^0.5.2",
+        "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
+        "@types/lodash": "^4.14.182",
+        "@types/lodash-es": "^4.17.6",
+        "@vueuse/core": "^8.6.0",
+        "async-validator": "^4.1.1",
+        "dayjs": "^1.11.3",
         "escape-html": "^1.0.3",
         "lodash": "^4.17.21",
         "lodash-es": "^4.17.21",
         "lodash-unified": "^1.0.2",
         "memoize-one": "^6.0.0",
-        "normalize-wheel-es": "^1.1.1"
+        "normalize-wheel-es": "^1.1.2"
       },
       "peerDependencies": {
         "vue": "^3.2.0"
       }
     },
+    "node_modules/element-plus/node_modules/@types/web-bluetooth": {
+      "version": "0.0.14",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.14.tgz",
+      "integrity": "sha512-5d2RhCard1nQUC3aHcq/gHzWYO6K0WJmAbjO7mQJgCQKtZpgXxv1rOM6O/dBDhDYYVutk1sciOgNSe+5YyfM8A=="
+    },
     "node_modules/element-plus/node_modules/@vueuse/core": {
-      "version": "7.7.1",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-7.7.1.tgz",
-      "integrity": "sha512-PRRgbATMpoeUmkCEBtUeJgOwtew8s+4UsEd+Pm7MhkjL2ihCNrSqxNVtM6NFE4uP2sWnkGcZpCjPuNSxowJ1Ow==",
+      "version": "8.9.4",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-8.9.4.tgz",
+      "integrity": "sha512-B/Mdj9TK1peFyWaPof+Zf/mP9XuGAngaJZBwPaXBvU3aCTZlx3ltlrFFFyMV4iGBwsjSCeUCgZrtkEj9dS2Y3Q==",
       "dependencies": {
-        "@vueuse/shared": "7.7.1",
+        "@types/web-bluetooth": "^0.0.14",
+        "@vueuse/metadata": "8.9.4",
+        "@vueuse/shared": "8.9.4",
         "vue-demi": "*"
       },
       "funding": {
@@ -5712,9 +5735,9 @@
       }
     },
     "node_modules/element-plus/node_modules/@vueuse/core/node_modules/@vueuse/shared": {
-      "version": "7.7.1",
-      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-7.7.1.tgz",
-      "integrity": "sha512-rN2qd22AUl7VdBxihagWyhUNHCyVk9IpvBTTfHoLH9G7rGE552X1f+zeCfehuno0zXif13jPw+icW/wn2a0rnQ==",
+      "version": "8.9.4",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-8.9.4.tgz",
+      "integrity": "sha512-wt+T30c4K6dGRMVqPddexEVLa28YwxW5OFIPmzUHICjphfAuBFTTdDoyqREZNDOFJZ44ARH1WWQNCUK8koJ+Ag==",
       "dependencies": {
         "vue-demi": "*"
       },
@@ -5735,9 +5758,9 @@
       }
     },
     "node_modules/element-plus/node_modules/@vueuse/core/node_modules/vue-demi": {
-      "version": "0.13.11",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
-      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+      "version": "0.14.6",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
       "hasInstallScript": true,
       "bin": {
         "vue-demi-fix": "bin/vue-demi-fix.js",
@@ -5759,6 +5782,14 @@
         }
       }
     },
+    "node_modules/element-plus/node_modules/@vueuse/metadata": {
+      "version": "8.9.4",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-8.9.4.tgz",
+      "integrity": "sha512-IwSfzH80bnJMzqhaapqJl9JRIiyQU0zsRGEgnxN6jhq7992cPUJIRfV+JHRIZXjYqbwt07E1gTEp0R0zPJ1aqw==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/element-resize-detector": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/element-resize-detector/-/element-resize-detector-1.2.4.tgz",
@@ -16121,9 +16152,9 @@
       "requires": {}
     },
     "@ctrl/tinycolor": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.5.0.tgz",
-      "integrity": "sha512-tlJpwF40DEQcfR/QF+wNMVyGMaO9FQp6Z1Wahj4Gk3CJQYHwA2xVG7iKDFdW6zuxZY9XWOpGcfNCTsX4McOsOg=="
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
+      "integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA=="
     },
     "@cypress/request": {
       "version": "3.0.1",
@@ -16182,9 +16213,9 @@
       }
     },
     "@element-plus/icons-vue": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-1.1.4.tgz",
-      "integrity": "sha512-Iz/nHqdp1sFPmdzRwHkEQQA3lKvoObk8azgABZ81QUOpW9s/lUyQVUSh0tNtEPZXQlKwlSh7SPgoVxzrE0uuVQ==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.1.0.tgz",
+      "integrity": "sha512-PSBn3elNoanENc1vnCfh+3WA9fimRC7n+fWkf3rE5jvv+aBohNHABC/KAR5KWPecxWxDTVT1ERpRbOMRcOV/vA==",
       "requires": {}
     },
     "@esbuild/android-arm": {
@@ -16375,6 +16406,19 @@
         }
       }
     },
+    "@floating-ui/core": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-0.7.3.tgz",
+      "integrity": "sha512-buc8BXHmG9l82+OQXOFU3Kr2XQx9ys01U/Q9HMIrZ300iLc8HLMgh7dcCqgYzAzf4BkoQvDcXf5Y+CuEZ5JBYg=="
+    },
+    "@floating-ui/dom": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.5.4.tgz",
+      "integrity": "sha512-419BMceRLq0RrmTSDxn8hf9R3VCJv2K9PUfugh5JyEFmdjzDo+e8U5EdR8nzKq8Yj1htzLm3b6eQEEam3/rrtg==",
+      "requires": {
+        "@floating-ui/core": "^0.7.3"
+      }
+    },
     "@hapi/hoek": {
       "version": "9.3.0",
       "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -16647,9 +16691,9 @@
       }
     },
     "@popperjs/core": {
-      "version": "2.11.6",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
-      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw=="
+      "version": "npm:@sxzz/popperjs-es@2.11.7",
+      "resolved": "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
+      "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
     },
     "@rollup/pluginutils": {
       "version": "4.2.1",
@@ -17053,10 +17097,9 @@
       "integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ=="
     },
     "@types/lodash-es": {
-      "version": "4.17.6",
-      "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
-      "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
-      "peer": true,
+      "version": "4.17.11",
+      "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.11.tgz",
+      "integrity": "sha512-eCw8FYAWHt2DDl77s+AMLLzPn310LKohruumpucZI4oOFJkIgnlaJcy23OKMJxx4r9PeTF13Gv6w+jqjWQaYUg==",
       "requires": {
         "@types/lodash": "*"
       }
@@ -19361,48 +19404,63 @@
       "dev": true
     },
     "element-plus": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.1.0.tgz",
-      "integrity": "sha512-PQM3LMv5qKf0sS/k+PXuBcmKl1Eb3b7fxKPyFHZ6eodZcNykbEMcpLZefQkvmDr6calVnuQ7TUnTm7Tm9LJXvg==",
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.2.5.tgz",
+      "integrity": "sha512-Kl0yn/PQca5YQo3M3NPBP4Xl71NQuMtDx5zNXZGVyl5FjdMujXiFB9SXKYGDUCgFU3d/Rl14vB4Fpmcl2Iz+Hw==",
       "requires": {
-        "@ctrl/tinycolor": "^3.4.0",
-        "@element-plus/icons-vue": "^1.0.1",
-        "@popperjs/core": "^2.11.2",
-        "@vueuse/core": "^7.7.1",
-        "async-validator": "^4.0.7",
-        "dayjs": "^1.10.8",
+        "@ctrl/tinycolor": "^3.4.1",
+        "@element-plus/icons-vue": "^2.0.5",
+        "@floating-ui/dom": "^0.5.2",
+        "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
+        "@types/lodash": "^4.14.182",
+        "@types/lodash-es": "^4.17.6",
+        "@vueuse/core": "^8.6.0",
+        "async-validator": "^4.1.1",
+        "dayjs": "^1.11.3",
         "escape-html": "^1.0.3",
         "lodash": "^4.17.21",
         "lodash-es": "^4.17.21",
         "lodash-unified": "^1.0.2",
         "memoize-one": "^6.0.0",
-        "normalize-wheel-es": "^1.1.1"
+        "normalize-wheel-es": "^1.1.2"
       },
       "dependencies": {
+        "@types/web-bluetooth": {
+          "version": "0.0.14",
+          "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.14.tgz",
+          "integrity": "sha512-5d2RhCard1nQUC3aHcq/gHzWYO6K0WJmAbjO7mQJgCQKtZpgXxv1rOM6O/dBDhDYYVutk1sciOgNSe+5YyfM8A=="
+        },
         "@vueuse/core": {
-          "version": "7.7.1",
-          "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-7.7.1.tgz",
-          "integrity": "sha512-PRRgbATMpoeUmkCEBtUeJgOwtew8s+4UsEd+Pm7MhkjL2ihCNrSqxNVtM6NFE4uP2sWnkGcZpCjPuNSxowJ1Ow==",
+          "version": "8.9.4",
+          "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-8.9.4.tgz",
+          "integrity": "sha512-B/Mdj9TK1peFyWaPof+Zf/mP9XuGAngaJZBwPaXBvU3aCTZlx3ltlrFFFyMV4iGBwsjSCeUCgZrtkEj9dS2Y3Q==",
           "requires": {
-            "@vueuse/shared": "7.7.1",
+            "@types/web-bluetooth": "^0.0.14",
+            "@vueuse/metadata": "8.9.4",
+            "@vueuse/shared": "8.9.4",
             "vue-demi": "*"
           },
           "dependencies": {
             "@vueuse/shared": {
-              "version": "7.7.1",
-              "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-7.7.1.tgz",
-              "integrity": "sha512-rN2qd22AUl7VdBxihagWyhUNHCyVk9IpvBTTfHoLH9G7rGE552X1f+zeCfehuno0zXif13jPw+icW/wn2a0rnQ==",
+              "version": "8.9.4",
+              "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-8.9.4.tgz",
+              "integrity": "sha512-wt+T30c4K6dGRMVqPddexEVLa28YwxW5OFIPmzUHICjphfAuBFTTdDoyqREZNDOFJZ44ARH1WWQNCUK8koJ+Ag==",
               "requires": {
                 "vue-demi": "*"
               }
             },
             "vue-demi": {
-              "version": "0.13.11",
-              "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
-              "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+              "version": "0.14.6",
+              "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+              "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
               "requires": {}
             }
           }
+        },
+        "@vueuse/metadata": {
+          "version": "8.9.4",
+          "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-8.9.4.tgz",
+          "integrity": "sha512-IwSfzH80bnJMzqhaapqJl9JRIiyQU0zsRGEgnxN6jhq7992cPUJIRfV+JHRIZXjYqbwt07E1gTEp0R0zPJ1aqw=="
         }
       }
     },
diff --git a/package.json b/package.json
index 737a83ef..6265b22f 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "d3-flame-graph": "^4.1.3",
     "d3-tip": "^0.9.1",
     "echarts": "^5.2.2",
-    "element-plus": "^2.1.0",
+    "element-plus": "^2.2.5",
     "lodash": "^4.17.21",
     "monaco-editor": "^0.34.1",
     "pinia": "^2.0.28",
diff --git a/src/App.vue b/src/App.vue
index 93c3bce8..19b8887f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -27,10 +27,11 @@ limitations under the License. -->
     }
   }, 500);
 </script>
-<style>
+<style lang="scss">
   #app {
-    color: #2c3e50;
+    color: $font-color;
     height: 100%;
     overflow: hidden;
+    background-color: $layout-background;
   }
 </style>
diff --git a/src/assets/img/tools/EXIT.png b/src/assets/img/tools/EXIT.png
index 88aca4957b26997803afc985b0821b694dd25e2e..977493de3aa35fb88c7c90e0a64f5464ffd296a2 100644
GIT binary patch
delta 218
zcmV<0044v80)qmOF@L>DL_t(IPpy+Z4gw(%g_${ywMWstfTfnehR&9sljs3#Of<1F
zu{3)dz+hyfL>F+EmU-X2d6@w+^1-`aO1aJP5b?kmyT-a6ptZgbLXJ6r_kL-u-3TGh
zp|%Gor99{S!_hZbblJA;(`_}t7&8k(N@-UOP)eN;aUI3gfK$-jIk!W^rpQ4MSZkX!
z3jkO|$Y2Je0cq#g2scEW7mbhtCJ8Y@|8fw-LyL3=fPKj-1HdZY!*s`#>-_8g0n1E*
U5pbBZ0ssI207*qoM6N<$g4JST2mk;8

delta 228
zcmV<A02}{<0*wNYF@MKNL_t(IPpy+d3c@fDMf20!cnWXOM6`limwE`jgSU{9bmc}+
zaOJ*uoP3EeQbpUQn(fSg`TUuI`thNuH^ywbcv+Sm%Cfvl-xFZ1y^uV10RYTMuD$o?
z*xLlqIrrk|6HHus?;mcH0ePN}qOhu}TQa~}dkP_}M4SvT#$Aj7>_P}dF9*>sfZ{z1
z08@dqX3zpyD5WOOxjHGt2-I4iNX`e1F@{KTE8^r3WrTyr7=>+%RFmBIS!J#DQtsh@
e$JF)nxB4Atx`Yvg)+`wS0000<MNUMnLSTXver@vr

diff --git a/src/components/SelectSingle.vue b/src/components/SelectSingle.vue
index 1ff98576..6f6cdd5f 100644
--- a/src/components/SelectSingle.vue
+++ b/src/components/SelectSingle.vue
@@ -88,7 +88,7 @@ limitations under the License. -->
     border: 1px solid #ddd;
     background: $theme-background;
     border-radius: 3px;
-    color: #000;
+    color: $font-color;
     font-size: $font-size-smaller;
     height: 24px;
 
@@ -112,7 +112,7 @@ limitations under the License. -->
     width: 100%;
     padding: 2px 10px;
     overflow: auto;
-    color: #606266;
+    color: var(--sw-setting-color);
     position: relative;
 
     &:hover {
@@ -133,7 +133,7 @@ limitations under the License. -->
   }
 
   .opt-wrapper {
-    color: #606266;
+    color: var(--sw-setting-color);
     position: absolute;
     top: 26px;
     left: 0;
diff --git a/src/constants/data.ts b/src/constants/data.ts
index 77238da5..9cbc1e17 100644
--- a/src/constants/data.ts
+++ b/src/constants/data.ts
@@ -26,3 +26,8 @@ export const Languages = [
   { label: "Chinese", value: "zh" },
   { label: "Spanish", value: "es" },
 ];
+
+export enum Themes {
+  Dark = "dark",
+  Light = "light",
+}
diff --git a/src/hooks/useEcharts.ts b/src/hooks/useEcharts.ts
index cc28c467..2aacc49d 100644
--- a/src/hooks/useEcharts.ts
+++ b/src/hooks/useEcharts.ts
@@ -30,6 +30,8 @@ import { useDebounceFn } from "@vueuse/core";
 import { useEventListener } from "./useEventListener";
 import { useBreakpoint } from "./useBreakpoint";
 import echarts from "@/utils/echarts";
+import { useAppStoreWithOut } from "@/store/modules/app";
+import { Themes } from "@/constants/data";
 
 export type ECOption = echarts.ComposeOption<
   | BarSeriesOption
@@ -44,8 +46,9 @@ export type ECOption = echarts.ComposeOption<
 >;
 
 export function useECharts(elRef: Ref<HTMLDivElement>, theme: "light" | "dark" | "default" = "default"): Indexable {
+  const appStore = useAppStoreWithOut();
   const getDarkMode = computed(() => {
-    return theme === "default" ? "light" : theme;
+    return appStore.theme === "default" ? Themes.Light : theme;
   });
   let chartInstance: Nullable<echarts.ECharts> = null;
   let resizeFn: Fn = resize;
@@ -55,7 +58,7 @@ export function useECharts(elRef: Ref<HTMLDivElement>, theme: "light" | "dark" |
   resizeFn = useDebounceFn(resize, 200);
 
   const getOptions = computed(() => {
-    if (getDarkMode.value !== "dark") {
+    if (getDarkMode.value !== Themes.Dark) {
       return cacheOptions.value as ECOption;
     }
     return {
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index cce7d11c..6b5d403b 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -24,7 +24,7 @@ limitations under the License. -->
 <style lang="scss" scoped>
   .app-main {
     height: calc(100% - 40px);
-    background: #f7f9fa;
+    background: $layout-background;
     overflow: auto;
   }
 </style>
diff --git a/src/layout/components/NavBar.vue b/src/layout/components/NavBar.vue
index 43202ed5..b7cc0f41 100644
--- a/src/layout/components/NavBar.vue
+++ b/src/layout/components/NavBar.vue
@@ -48,11 +48,14 @@ limitations under the License. -->
         @input="changeTimeRange"
       />
       <span> UTC{{ appStore.utcHour >= 0 ? "+" : "" }}{{ `${appStore.utcHour}:${appStore.utcMin}` }} </span>
+      <span class="ml-5">
+        <el-switch v-model="theme" :active-icon="Moon" :inactive-icon="Sunny" inline-prompt @change="changeTheme" />
+      </span>
       <span title="refresh" class="ghost ml-5 cp" @click="handleReload">
         <Icon iconName="retry" :loading="appStore.autoRefresh" class="middle" />
       </span>
       <span class="version ml-5 cp">
-        <el-popover trigger="hover" width="250" placement="bottom" effect="light" :content="appStore.version">
+        <el-popover trigger="hover" width="250" placement="bottom" :content="appStore.version">
           <template #reference>
             <span>
               <Icon iconName="info_outline" size="middle" />
@@ -74,7 +77,8 @@ limitations under the License. -->
   import { MetricCatalog } from "@/views/dashboard/data";
   import type { DashboardItem } from "@/types/dashboard";
   import router from "@/router";
-  import { ArrowRight } from "@element-plus/icons-vue";
+  import { ArrowRight, Moon, Sunny } from "@element-plus/icons-vue";
+  import { Themes } from "@/constants/data";
 
   /*global Indexable */
   const { t, te } = useI18n();
@@ -84,11 +88,27 @@ limitations under the License. -->
   const pathNames = ref<{ path?: string; name: string; selected: boolean }[][]>([]);
   const timeRange = ref<number>(0);
   const pageTitle = ref<string>("");
+  const theme = ref<boolean>(true);
 
+  changeTheme();
   resetDuration();
   getVersion();
   getNavPaths();
 
+  function changeTheme() {
+    const root = document.documentElement;
+
+    if (theme.value) {
+      root.classList.add(Themes.Dark);
+      root.classList.remove(Themes.Light);
+      appStore.setTheme(Themes.Dark);
+    } else {
+      root.classList.add(Themes.Light);
+      root.classList.remove(Themes.Dark);
+      appStore.setTheme(Themes.Light);
+    }
+  }
+
   function getName(list: any[]) {
     return list.find((d: any) => d.selected) || {};
   }
@@ -287,21 +307,16 @@ limitations under the License. -->
     padding: 5px;
     text-align: left;
     justify-content: space-between;
-    background-color: #fafbfc;
-    border-bottom: 1px solid #dfe4e8;
-    color: #222;
+    background-color: $theme-background;
+    border-bottom: 1px solid $border-color;
+    color: $font-color;
     font-size: $font-size-smaller;
   }
 
-  .nav-bar.dark {
-    background-color: #333840;
-    border-bottom: 1px solid #252a2f;
-    color: #fafbfc;
-  }
-
   .title {
     font-size: $font-size-normal;
     font-weight: 500;
+    padding-top: 5px;
   }
 
   .nav-tabs {
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index 994e83a5..0cbf1a89 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -23,6 +23,7 @@ import type { AxiosResponse } from "axios";
 import dateFormatStep, { dateFormatTime } from "@/utils/dateFormat";
 import { TimeType } from "@/constants/data";
 import type { MenuOptions, SubItem } from "@/types/app";
+import { Themes } from "@/constants/data";
 /*global Nullable*/
 interface AppState {
   durationRow: Recordable;
@@ -36,6 +37,7 @@ interface AppState {
   isMobile: boolean;
   reloadTimer: Nullable<IntervalHandle>;
   allMenus: MenuOptions[];
+  theme: string;
 }
 
 export const appStore = defineStore({
@@ -56,6 +58,7 @@ export const appStore = defineStore({
     isMobile: false,
     reloadTimer: null,
     allMenus: [],
+    theme: Themes.Dark,
   }),
   getters: {
     duration(): Duration {
@@ -126,6 +129,9 @@ export const appStore = defineStore({
     updateDurationRow(data: Duration) {
       this.durationRow = data;
     },
+    setTheme(data: string) {
+      this.theme = data;
+    },
     setUTC(utcHour: number, utcMin: number): void {
       this.runEventStack();
       this.utcMin = utcMin;
diff --git a/src/store/modules/profile.ts b/src/store/modules/profile.ts
index f1bbf59a..4fd4b200 100644
--- a/src/store/modules/profile.ts
+++ b/src/store/modules/profile.ts
@@ -163,7 +163,7 @@ export const profileStore = defineStore({
       return res.data;
     },
     async getSegmentSpans(params: { segmentId: string }) {
-      if (!params.segmentId) {
+      if (!(params && params.segmentId)) {
         return new Promise((resolve) => resolve({}));
       }
       const res: AxiosResponse = await graphql.query("queryProfileSegment").params(params);
diff --git a/src/styles/light.scss b/src/styles/light.scss
deleted file mode 100644
index ef6be368..00000000
--- a/src/styles/light.scss
+++ /dev/null
@@ -1,25 +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;
-$text-color: #fff;
-$disabled-color: #ccc;
-$active-color: #409eff;
-$theme-background: #fff;
-$active-background: #409eff;
-$font-size-smaller: 12px;
-$font-size-normal: 14px;
diff --git a/src/styles/reset.scss b/src/styles/reset.scss
index 49262e50..d2396848 100644
--- a/src/styles/reset.scss
+++ b/src/styles/reset.scss
@@ -144,18 +144,6 @@ pre {
   }
 }
 
-.el-switch__label--left {
-  margin-right: 5px;
-}
-
-.el-switch__label--right {
-  margin-left: 5px;
-}
-
-.el-switch__label * {
-  font-size: $font-size-smaller;
-}
-
 .el-drawer__header {
   margin-bottom: 0;
   padding-left: 10px;
@@ -173,9 +161,10 @@ pre {
 div.vis-tooltip {
   max-width: 600px;
   overflow: hidden;
-  background-color: $theme-background !important;
+  background-color: var(--vis-tooltip-bg) !important;
   white-space: normal !important;
   font-size: $font-size-smaller !important;
+  color: var(--font-color) !important;
 }
 
 .vis-item {
@@ -187,13 +176,13 @@ div.vis-tooltip {
   background-color: #e66;
   opacity: 0.8;
   border-color: #e66;
-  color: $text-color !important;
+  color: var(--sw-event-vis-selected) !important;
 }
 
 .vis-item.Normal {
   background-color: #fac858;
   border-color: #fac858;
-  color: #666 !important;
+  color: var(--sw-event-vis-selected) !important;
 }
 
 .vis-item .vis-item-content {
@@ -202,7 +191,11 @@ div.vis-tooltip {
 
 .vis-item.vis-selected.Error,
 .vis-item.vis-selected.Normal {
-  color: #1a1a1a !important;
+  color: var(--sw-event-vis-selected) !important;
+}
+
+.vis-time-axis .vis-text {
+  color: var(--sw-time-axis-text) !important;
 }
 
 .el-menu--vertical.sub-list {
diff --git a/src/styles/theme.scss b/src/styles/theme.scss
new file mode 100644
index 00000000..9d48255d
--- /dev/null
+++ b/src/styles/theme.scss
@@ -0,0 +1,152 @@
+/**
+ * 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.
+ */
+@use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;
+
+html {
+  --el-color-primary: #409eff;
+  --theme-background: #fff;
+  --font-color: #3d444f;
+  --disabled-color: #ccc;
+  --dashboard-tool-bg: rgb(240 242 245);
+  --text-color-placeholder: #666;
+  --border-color: #dcdfe6;
+  --border-color-primary: #eee;
+  --layout-background: #f7f9fa;
+  --box-shadow-color: #ccc;
+  --sw-bg-color-overlay: #fff;
+  --sw-border-color-light: #e4e7ed;
+  --popper-hover-bg: #eee;
+  --sw-icon-btn-bg: #eee;
+  --sw-icon-btn-color: #666;
+  --sw-icon-btn-border: #ccc;
+  --sw-table-col: #fff;
+  --sw-config-header: aliceblue;
+  --sw-topology-color: #666;
+  --vis-tooltip-bg: #fff;
+  --sw-topology-switch-icon: rgba(0, 0, 0, 0.3);
+  --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 / 10%);
+  --sw-list-selected: #ededed;
+  --sw-table-header: #f3f4f9;
+  --sw-list-hover: rgb(0 0 0 / 4%);
+  --sw-setting-color: #606266;
+  --sw-alarm-tool: #f0f2f5;
+  --sw-alarm-tool-border: #c1c5ca41;
+  --sw-table-color: #000;
+  --sw-event-vis-selected: #1a1a1a;
+  --sw-time-axis-text: #4d4d4d;
+  --sw-drawer-header: #72767b;
+  --sw-marketplace-border: #dedfe0;
+}
+
+html.dark {
+  --el-color-primary: rgb(64, 158, 255);
+  --theme-background: #212224;
+  --font-color: #fafbfc;
+  --disabled-color: #ccc;
+  --dashboard-tool-bg: #000;
+  --text-color-placeholder: #ccc;
+  --border-color: #262629;
+  --border-color-primary: #4b4b52;
+  --layout-background: #000;
+  --box-shadow-color: #606266;
+  --sw-bg-color-overlay: #1d1e1f;
+  --sw-border-color-light: #414243;
+  --popper-hover-bg: rgb(64, 158, 255, 0.1);
+  --sw-icon-btn-bg: #222;
+  --sw-icon-btn-color: #ccc;
+  --sw-icon-btn-border: #999;
+  --sw-table-col: none;
+  --sw-config-header: #303133;
+  --sw-topology-color: #ccc;
+  --vis-tooltip-bg: #414243;
+  --sw-topology-switch-icon: #aaa;
+  --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: #333133;
+  --sw-list-hover: #262629;
+  --sw-table-header: #303133;
+  --sw-list-selected: #3d444f;
+  --sw-setting-color: #eee;
+  --sw-alarm-tool: #303133;
+  --sw-alarm-tool-border: #444;
+  --sw-table-color: #fff;
+  --sw-event-vis-selected: #fff;
+  --sw-time-axis-text: #aaa;
+  --sw-drawer-header: #e9e9eb;
+  --sw-marketplace-border: #606266;
+}
+
+.el-drawer__header {
+  color: var(--sw-drawer-header);
+}
+
+.el-table tr {
+  background-color: var(--el-table-tr-bg-color);
+}
+
+.el-popper.is-light {
+  background: var(--sw-bg-color-overlay);
+  border: 1px solid var(--sw-border-color-light);
+}
+
+.el-switch {
+  --el-switch-off-color: #aaa;
+}
+
+.el-table__body-wrapper tr td.el-table-fixed-column--left,
+.el-table__body-wrapper tr td.el-table-fixed-column--right,
+.el-table__body-wrapper tr th.el-table-fixed-column--left,
+.el-table__body-wrapper tr th.el-table-fixed-column--right,
+.el-table__footer-wrapper tr td.el-table-fixed-column--left,
+.el-table__footer-wrapper tr td.el-table-fixed-column--right,
+.el-table__footer-wrapper tr th.el-table-fixed-column--left,
+.el-table__footer-wrapper tr th.el-table-fixed-column--right,
+.el-table__header-wrapper tr td.el-table-fixed-column--left,
+.el-table__header-wrapper tr td.el-table-fixed-column--right,
+.el-table__header-wrapper tr th.el-table-fixed-column--left,
+.el-table__header-wrapper tr th.el-table-fixed-column--right {
+  background-color: var(--sw-table-col);
+}
+
+.el-table.is-scrolling-none th.el-table-fixed-column--left,
+.el-table.is-scrolling-none th.el-table-fixed-column--right,
+.el-table th.el-table__cell {
+  background-color: var(--sw-table-col);
+}
+
+$tool-icon-btn-bg: var(--sw-icon-btn-bg);
+$tool-icon-btn-color: var(--sw-icon-btn-color);
+$popper-hover-bg-color: var(--popper-hover-bg);
+$box-shadow-color: var(--box-shadow-color);
+$border-color-primary: var(--border-color-primary);
+$layout-background: var(--layout-background);
+$border-color: var(--border-color);
+$dashboard-tool-bg-color: var(--dashboard-tool-bg);
+$font-color: var(--font-color);
+$text-color: var(--theme-background);
+$disabled-color: var(--disabled-color);
+$active-color: var(--el-color-primary);
+$theme-background: var(--theme-background);
+$active-background: var(--el-color-primary);
+$font-size-smaller: 12px;
+$font-size-normal: 14px;
diff --git a/src/views/Marketplace.vue b/src/views/Marketplace.vue
index be1360d1..4a2e0e98 100644
--- a/src/views/Marketplace.vue
+++ b/src/views/Marketplace.vue
@@ -113,7 +113,7 @@ limitations under the License. -->
 
   .category {
     flex-wrap: wrap;
-    border-right: 1px solid #ddd;
+    border-right: 1px solid var(--sw-marketplace-border);
     align-content: flex-start;
     height: 100%;
     overflow: auto;
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 86d71a5f..bd3ef075 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -156,7 +156,7 @@ limitations under the License. -->
   }
 
   .settings {
-    color: #606266;
+    color: var(--sw-setting-color);
     font-size: 13px;
     padding: 20px;
 
@@ -177,7 +177,7 @@ limitations under the License. -->
       width: 180px;
       display: inline-block;
       font-weight: 500;
-      color: #000;
+      color: $font-color;
       line-height: 25px;
     }
   }
diff --git a/src/views/alarm/Content.vue b/src/views/alarm/Content.vue
index 56001b31..11cc8871 100644
--- a/src/views/alarm/Content.vue
+++ b/src/views/alarm/Content.vue
@@ -157,7 +157,7 @@ limitations under the License. -->
 
   .timeline-table-i {
     padding: 10px 15px;
-    border-left: 4px solid #eee;
+    border-left: 4px solid var(--border-color-primary);
     position: relative;
 
     &::after {
diff --git a/src/views/alarm/Header.vue b/src/views/alarm/Header.vue
index 0ac0f3dd..544c91f1 100644
--- a/src/views/alarm/Header.vue
+++ b/src/views/alarm/Header.vue
@@ -39,7 +39,11 @@ limitations under the License. -->
           @current-change="changePage"
           :pager-count="5"
           small
-          :style="`--el-pagination-bg-color: #f0f2f5; --el-pagination-button-disabled-bg-color: #f0f2f5;`"
+          :style="
+            appStore.theme === Themes.Light
+              ? `--el-pagination-bg-color: #f0f2f5; --el-pagination-button-disabled-bg-color: #f0f2f5;`
+              : ''
+          "
         />
       </div>
     </div>
@@ -54,6 +58,7 @@ limitations under the License. -->
   import { useAppStoreWithOut } from "@/store/modules/app";
   import { useAlarmStore } from "@/store/modules/alarm";
   import { ElMessage } from "element-plus";
+  import { Themes } from "@/constants/data";
 
   const appStore = useAppStoreWithOut();
   const alarmStore = useAlarmStore();
@@ -99,8 +104,8 @@ limitations under the License. -->
 <style lang="scss" scoped>
   .alarm-tool {
     font-size: $font-size-smaller;
-    border-bottom: 1px solid #c1c5ca41;
-    background-color: #f0f2f5;
+    border-bottom: 1px solid var(--sw-alarm-tool-border);
+    background-color: var(--sw-alarm-tool);
     padding: 10px;
     position: relative;
   }
diff --git a/src/views/dashboard/Widget.vue b/src/views/dashboard/Widget.vue
index 6adb996c..1bbf7215 100644
--- a/src/views/dashboard/Widget.vue
+++ b/src/views/dashboard/Widget.vue
@@ -186,7 +186,7 @@ limitations under the License. -->
 <style lang="scss" scoped>
   .content {
     min-width: 100px;
-    border: 1px solid #eee;
+    border: 1px solid $border-color-primary;
     background-color: $theme-background;
     position: relative;
   }
diff --git a/src/views/dashboard/configuration/ContinuousProfiling.vue b/src/views/dashboard/configuration/ContinuousProfiling.vue
index 7b8b9c60..a0a947f8 100644
--- a/src/views/dashboard/configuration/ContinuousProfiling.vue
+++ b/src/views/dashboard/configuration/ContinuousProfiling.vue
@@ -91,7 +91,7 @@ limitations under the License. -->
     position: fixed;
     bottom: 0;
     right: 0;
-    border-top: 1px solid #eee;
+    border-top: 1px solid $border-color;
     padding: 10px;
     text-align: right;
     width: 100%;
diff --git a/src/views/dashboard/configuration/Event.vue b/src/views/dashboard/configuration/Event.vue
index 23fe8d16..0f59cb57 100644
--- a/src/views/dashboard/configuration/Event.vue
+++ b/src/views/dashboard/configuration/Event.vue
@@ -68,7 +68,7 @@ limitations under the License. -->
     position: fixed;
     bottom: 0;
     right: 0;
-    border-top: 1px solid #eee;
+    border-top: 1px solid $border-color-primary;
     padding: 10px;
     text-align: right;
     width: 100%;
diff --git a/src/views/dashboard/configuration/Text.vue b/src/views/dashboard/configuration/Text.vue
index f70cc1be..984bd06b 100644
--- a/src/views/dashboard/configuration/Text.vue
+++ b/src/views/dashboard/configuration/Text.vue
@@ -89,6 +89,7 @@ limitations under the License. -->
   const fontSize = ref<number>(graph.fontSize || 12);
   const textAlign = ref(graph.textAlign || "left");
   const Colors = [
+    { label: "Theme", value: "theme" },
     {
       label: "Green",
       value: "green",
@@ -151,7 +152,7 @@ limitations under the License. -->
     position: fixed;
     bottom: 0;
     right: 0;
-    border-top: 1px solid #eee;
+    border-top: 1px solid $border-color-primary;
     padding: 10px;
     text-align: right;
     width: 100%;
diff --git a/src/views/dashboard/configuration/ThirdPartyApp.vue b/src/views/dashboard/configuration/ThirdPartyApp.vue
index cbfe9314..6e1c7a36 100644
--- a/src/views/dashboard/configuration/ThirdPartyApp.vue
+++ b/src/views/dashboard/configuration/ThirdPartyApp.vue
@@ -80,7 +80,7 @@ limitations under the License. -->
     position: fixed;
     bottom: 0;
     right: 0;
-    border-top: 1px solid #eee;
+    border-top: 1px solid $border-color-primary;
     padding: 10px;
     text-align: right;
     width: 100%;
diff --git a/src/views/dashboard/configuration/TimeRange.vue b/src/views/dashboard/configuration/TimeRange.vue
index d1eed12a..a0516edd 100644
--- a/src/views/dashboard/configuration/TimeRange.vue
+++ b/src/views/dashboard/configuration/TimeRange.vue
@@ -147,7 +147,7 @@ limitations under the License. -->
     position: fixed;
     bottom: 0;
     right: 0;
-    border-top: 1px solid #eee;
+    border-top: 1px solid $border-color-primary;
     padding: 10px;
     text-align: right;
     width: 100%;
diff --git a/src/views/dashboard/configuration/Topology.vue b/src/views/dashboard/configuration/Topology.vue
index 374e5938..64242f9d 100644
--- a/src/views/dashboard/configuration/Topology.vue
+++ b/src/views/dashboard/configuration/Topology.vue
@@ -63,7 +63,7 @@ limitations under the License. -->
     position: fixed;
     bottom: 0;
     right: 0;
-    border-top: 1px solid #eee;
+    border-top: 1px solid $border-color-primary;
     padding: 10px;
     text-align: right;
     width: 100%;
diff --git a/src/views/dashboard/configuration/Widget.vue b/src/views/dashboard/configuration/Widget.vue
index 0c9dc4c5..dd846a99 100644
--- a/src/views/dashboard/configuration/Widget.vue
+++ b/src/views/dashboard/configuration/Widget.vue
@@ -201,7 +201,7 @@ limitations under the License. -->
   .graph {
     position: relative;
     min-width: 1280px;
-    border: 1px solid #eee;
+    border: 1px solid $border-color-primary;
     background-color: $theme-background;
   }
 
@@ -209,7 +209,7 @@ limitations under the License. -->
     height: 25px;
     line-height: 25px;
     text-align: center;
-    background-color: aliceblue;
+    background-color: var(--sw-config-header);
     font-size: $font-size-smaller;
     position: relative;
   }
@@ -249,7 +249,7 @@ limitations under the License. -->
     position: fixed;
     bottom: 0;
     right: 0;
-    border-top: 1px solid #eee;
+    border-top: 1px solid $border-color-primary;
     padding: 10px;
     text-align: right;
     width: 100%;
diff --git a/src/views/dashboard/configuration/widget/metric/Index.vue b/src/views/dashboard/configuration/widget/metric/Index.vue
index ac316047..a58d2d9a 100644
--- a/src/views/dashboard/configuration/widget/metric/Index.vue
+++ b/src/views/dashboard/configuration/widget/metric/Index.vue
@@ -630,11 +630,10 @@ limitations under the License. -->
   .expression-param {
     display: inline-block;
     width: 400px;
-    border: 1px solid #dcdfe6;
+    border: 1px solid $border-color;
     cursor: text;
     padding: 0 5px;
     border-radius: 3px;
-    color: #606266;
     outline: none;
     margin-right: 5px;
     min-height: 26px;
diff --git a/src/views/dashboard/controls/ContinuousProfiling.vue b/src/views/dashboard/controls/ContinuousProfiling.vue
index a6e4e752..10030f8b 100644
--- a/src/views/dashboard/controls/ContinuousProfiling.vue
+++ b/src/views/dashboard/controls/ContinuousProfiling.vue
@@ -75,7 +75,7 @@ limitations under the License. -->
   .header {
     padding: 10px;
     font-size: $font-size-smaller;
-    border-bottom: 1px solid #dcdfe6;
+    border-bottom: 1px solid $border-color;
   }
 
   .tools {
@@ -87,7 +87,7 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }
 
@@ -95,6 +95,6 @@ limitations under the License. -->
     font-weight: bold;
     line-height: 40px;
     padding: 0 10px;
-    border-bottom: 1px solid #dcdfe6;
+    border-bottom: 1px solid $border-color;
   }
 </style>
diff --git a/src/views/dashboard/controls/DemandLog.vue b/src/views/dashboard/controls/DemandLog.vue
index b6d30aec..d8c44b79 100644
--- a/src/views/dashboard/controls/DemandLog.vue
+++ b/src/views/dashboard/controls/DemandLog.vue
@@ -69,7 +69,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: 1024px;
   }
 
@@ -82,7 +82,7 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }
 </style>
diff --git a/src/views/dashboard/controls/Ebpf.vue b/src/views/dashboard/controls/Ebpf.vue
index 69398329..9841e858 100644
--- a/src/views/dashboard/controls/Ebpf.vue
+++ b/src/views/dashboard/controls/Ebpf.vue
@@ -68,7 +68,7 @@ limitations under the License. -->
   .header {
     padding: 10px;
     font-size: $font-size-smaller;
-    border-bottom: 1px solid #dcdfe6;
+    border-bottom: 1px solid $border-color;
   }
 
   .tools {
@@ -80,7 +80,7 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }
 
diff --git a/src/views/dashboard/controls/Event.vue b/src/views/dashboard/controls/Event.vue
index 4cec0cde..2aa219a8 100644
--- a/src/views/dashboard/controls/Event.vue
+++ b/src/views/dashboard/controls/Event.vue
@@ -80,7 +80,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: 1024px;
   }
 
@@ -93,7 +93,7 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }
 
diff --git a/src/views/dashboard/controls/Log.vue b/src/views/dashboard/controls/Log.vue
index 0f966c2e..2f7a8c1b 100644
--- a/src/views/dashboard/controls/Log.vue
+++ b/src/views/dashboard/controls/Log.vue
@@ -77,7 +77,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: 1024px;
   }
 
@@ -90,7 +90,7 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }
 
diff --git a/src/views/dashboard/controls/NetworkProfiling.vue b/src/views/dashboard/controls/NetworkProfiling.vue
index c144f8ac..5afc1113 100644
--- a/src/views/dashboard/controls/NetworkProfiling.vue
+++ b/src/views/dashboard/controls/NetworkProfiling.vue
@@ -67,7 +67,7 @@ limitations under the License. -->
   .header {
     padding: 10px;
     font-size: $font-size-smaller;
-    border-bottom: 1px solid #dcdfe6;
+    border-bottom: 1px solid $border-color;
   }
 
   .tools {
@@ -79,7 +79,7 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }
 
@@ -87,6 +87,6 @@ limitations under the License. -->
     font-weight: bold;
     line-height: 40px;
     padding: 0 10px;
-    border-bottom: 1px solid #dcdfe6;
+    border-bottom: 1px solid $border-color;
   }
 </style>
diff --git a/src/views/dashboard/controls/Profile.vue b/src/views/dashboard/controls/Profile.vue
index 50871f5c..81cdcadc 100644
--- a/src/views/dashboard/controls/Profile.vue
+++ b/src/views/dashboard/controls/Profile.vue
@@ -68,7 +68,7 @@ limitations under the License. -->
   .header {
     padding: 10px;
     font-size: $font-size-smaller;
-    border-bottom: 1px solid #dcdfe6;
+    border-bottom: 1px solid $border-color;
   }
 
   .tools {
@@ -80,7 +80,7 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }
 
diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue
index 5574cd94..74f71b92 100644
--- a/src/views/dashboard/controls/Tab.vue
+++ b/src/views/dashboard/controls/Tab.vue
@@ -302,15 +302,16 @@ limitations under the License. -->
       height: 20px;
       line-height: 20px;
       outline: none;
-      color: #333;
+      color: $font-color;
       font-style: normal;
       overflow: hidden;
       text-overflow: ellipsis;
       margin-right: 20px;
+      background-color: $theme-background;
     }
 
     .tab-icons {
-      color: #333;
+      color: $font-color;
 
       i {
         margin-right: 3px;
@@ -350,17 +351,17 @@ limitations under the License. -->
   .tab-header {
     justify-content: space-between;
     width: 100%;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid $border-color-primary;
   }
 
   .vue-grid-layout {
-    background: #f7f9fa;
+    background: $layout-background;
     height: auto !important;
   }
 
   .vue-grid-item:not(.vue-grid-placeholder) {
     background: $theme-background;
-    box-shadow: 0 1px 4px 0 #00000029;
+    box-shadow: 0 0 3px 0 $box-shadow-color;
     border-radius: 3px;
   }
 
diff --git a/src/views/dashboard/controls/TaskTimeline.vue b/src/views/dashboard/controls/TaskTimeline.vue
index 9a4be4c3..6adc28e4 100644
--- a/src/views/dashboard/controls/TaskTimeline.vue
+++ b/src/views/dashboard/controls/TaskTimeline.vue
@@ -67,7 +67,7 @@ limitations under the License. -->
   .header {
     padding: 10px;
     font-size: $font-size-smaller;
-    border-bottom: 1px solid #dcdfe6;
+    border-bottom: 1px solid $border-color;
   }
 
   .tools {
@@ -79,7 +79,7 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }
 
@@ -87,6 +87,6 @@ limitations under the License. -->
     font-weight: bold;
     line-height: 40px;
     padding: 0 10px;
-    border-bottom: 1px solid #dcdfe6;
+    border-bottom: 1px solid $border-color;
   }
 </style>
diff --git a/src/views/dashboard/controls/Text.vue b/src/views/dashboard/controls/Text.vue
index c66e68bf..2316e752 100644
--- a/src/views/dashboard/controls/Text.vue
+++ b/src/views/dashboard/controls/Text.vue
@@ -32,7 +32,7 @@ limitations under the License. -->
     <div
       class="body"
       :style="{
-        backgroundColor: TextColors[graph.backgroundColor],
+        backgroundColor,
         justifyContent: graph.textAlign,
       }"
     >
@@ -40,7 +40,7 @@ limitations under the License. -->
         :href="graph.url"
         target="_blank"
         :style="{
-          color: TextColors[graph.fontColor],
+          color: fontColor,
           fontSize: graph.fontSize + 'px',
         }"
       >
@@ -55,6 +55,8 @@ limitations under the License. -->
   import { useI18n } from "vue-i18n";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import { TextColors } from "@/views/dashboard/data";
+  import { useAppStoreWithOut } from "@/store/modules/app";
+  import { Themes } from "@/constants/data";
 
   /*global defineProps */
   const props = defineProps({
@@ -65,9 +67,17 @@ limitations under the License. -->
     activeIndex: { type: String, default: "" },
   });
   const { t } = useI18n();
+  const appStore = useAppStoreWithOut();
   const graph = computed(() => props.data.graph || {});
   const dashboardStore = useDashboardStore();
 
+  const backgroundColor = computed(
+    () => TextColors[graph.value.backgroundColor] || (appStore.theme === Themes.Dark ? "#212224" : "#fff"),
+  );
+  const fontColor = computed(
+    () => TextColors[graph.value.fontColor] || (appStore.theme === Themes.Dark ? "#fafbfc" : "#3d444f"),
+  );
+
   function removeTopo() {
     dashboardStore.removeControls(props.data);
   }
@@ -112,7 +122,7 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }
 </style>
diff --git a/src/views/dashboard/controls/ThirdPartyApp.vue b/src/views/dashboard/controls/ThirdPartyApp.vue
index 5eac036c..3103fc1f 100644
--- a/src/views/dashboard/controls/ThirdPartyApp.vue
+++ b/src/views/dashboard/controls/ThirdPartyApp.vue
@@ -103,7 +103,7 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }
 
diff --git a/src/views/dashboard/controls/TimeRange.vue b/src/views/dashboard/controls/TimeRange.vue
index ccdea213..fd828e3b 100644
--- a/src/views/dashboard/controls/TimeRange.vue
+++ b/src/views/dashboard/controls/TimeRange.vue
@@ -176,7 +176,7 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }
 </style>
diff --git a/src/views/dashboard/controls/Topology.vue b/src/views/dashboard/controls/Topology.vue
index ff2553f5..f1945216 100644
--- a/src/views/dashboard/controls/Topology.vue
+++ b/src/views/dashboard/controls/Topology.vue
@@ -59,7 +59,6 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   .topology {
-    // background-color: #333840;
     width: 100%;
     height: 100%;
     font-size: $font-size-smaller;
@@ -82,7 +81,7 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }
 
diff --git a/src/views/dashboard/controls/Trace.vue b/src/views/dashboard/controls/Trace.vue
index ab1e8e86..0c1b0682 100644
--- a/src/views/dashboard/controls/Trace.vue
+++ b/src/views/dashboard/controls/Trace.vue
@@ -76,7 +76,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;
   }
 
@@ -89,7 +89,7 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }
 
diff --git a/src/views/dashboard/controls/Widget.vue b/src/views/dashboard/controls/Widget.vue
index 72b8d870..f7ac3812 100644
--- a/src/views/dashboard/controls/Widget.vue
+++ b/src/views/dashboard/controls/Widget.vue
@@ -277,7 +277,7 @@ limitations under the License. -->
     height: 30px;
     padding: 5px;
     width: 100%;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid $border-color-primary;
     justify-content: space-between;
   }
 
@@ -294,7 +294,7 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }
 
diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts
index f30b5c15..3b503638 100644
--- a/src/views/dashboard/data.ts
+++ b/src/views/dashboard/data.ts
@@ -306,9 +306,9 @@ export const TextColors: { [key: string]: string } = {
   green: "#67C23A",
   blue: "#409EFF",
   red: "#F56C6C",
-  grey: "#909399",
+  grey: "#809399",
   white: "#fff",
-  black: "#000",
+  black: "#303133",
   orange: "#E6A23C",
   purple: "#bf99f8",
 };
diff --git a/src/views/dashboard/graphs/Bar.vue b/src/views/dashboard/graphs/Bar.vue
index 8db91881..db646e48 100644
--- a/src/views/dashboard/graphs/Bar.vue
+++ b/src/views/dashboard/graphs/Bar.vue
@@ -24,6 +24,8 @@ limitations under the License. -->
   import type { BarConfig, EventParams, RelatedTrace, Filters } from "@/types/dashboard";
   import useLegendProcess from "@/hooks/useLegendProcessor";
   import Legend from "./components/Legend.vue";
+  import { useAppStoreWithOut } from "@/store/modules/app";
+  import { Themes } from "@/constants/data";
 
   /*global defineProps, defineEmits */
   const emits = defineEmits(["click"]);
@@ -46,6 +48,7 @@ limitations under the License. -->
       default: () => ({}),
     },
   });
+  const appStore = useAppStoreWithOut();
   const { showEchartsLegend, isRight, chartColors } = useLegendProcess(props.config.legend);
   const option = computed(() => getOption());
 
@@ -91,8 +94,11 @@ limitations under the License. -->
         top: 0,
         left: 0,
         itemWidth: 12,
+        backgroundColor: appStore.theme === Themes.Dark ? "#333" : "#fff",
+        borderColor: appStore.theme === Themes.Dark ? "#333" : "#fff",
         textStyle: {
-          color: "#333",
+          fontSize: 12,
+          color: appStore.theme === Themes.Dark ? "#eee" : "#333",
         },
       },
       grid: {
diff --git a/src/views/dashboard/graphs/Card.vue b/src/views/dashboard/graphs/Card.vue
index 197dcb44..ff5b2c33 100644
--- a/src/views/dashboard/graphs/Card.vue
+++ b/src/views/dashboard/graphs/Card.vue
@@ -61,7 +61,7 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   .chart-card {
-    color: #333;
+    color: $font-color;
     width: 100%;
     height: 100%;
     display: flex;
diff --git a/src/views/dashboard/graphs/Line.vue b/src/views/dashboard/graphs/Line.vue
index a9cda6f9..d438df06 100644
--- a/src/views/dashboard/graphs/Line.vue
+++ b/src/views/dashboard/graphs/Line.vue
@@ -31,6 +31,8 @@ limitations under the License. -->
   import Legend from "./components/Legend.vue";
   import useLegendProcess from "@/hooks/useLegendProcessor";
   import { isDef } from "@/utils/is";
+  import { useAppStoreWithOut } from "@/store/modules/app";
+  import { Themes } from "@/constants/data";
 
   /*global defineProps, defineEmits */
   const emits = defineEmits(["click"]);
@@ -40,7 +42,6 @@ limitations under the License. -->
       default: () => ({}),
     },
     intervalTime: { type: Array as PropType<string[]>, default: () => [] },
-    theme: { type: String, default: "light" },
     config: {
       type: Object as PropType<
         LineConfig & {
@@ -62,6 +63,7 @@ limitations under the License. -->
       }),
     },
   });
+  const appStore = useAppStoreWithOut();
   const setRight = ref<boolean>(false);
   const option = computed(() => getOption());
   function getOption() {
@@ -93,9 +95,11 @@ limitations under the License. -->
     const color: string[] = chartColors(keys);
     const tooltip = {
       trigger: "axis",
+      backgroundColor: appStore.theme === Themes.Dark ? "#333" : "#fff",
+      borderColor: appStore.theme === Themes.Dark ? "#333" : "#fff",
       textStyle: {
         fontSize: 12,
-        color: "#333",
+        color: appStore.theme === Themes.Dark ? "#eee" : "#333",
       },
       enterable: true,
       confine: true,
@@ -108,9 +112,11 @@ limitations under the License. -->
       confine: true,
       extraCssText: `height: 20px; padding:0 2px;`,
       trigger: "axis",
+      backgroundColor: appStore.theme === Themes.Dark ? "#666" : "#eee",
+      borderColor: appStore.theme === Themes.Dark ? "#666" : "#eee",
       textStyle: {
         fontSize: 12,
-        color: "#333",
+        color: appStore.theme === Themes.Dark ? "#eee" : "#333",
       },
     };
 
@@ -125,7 +131,7 @@ limitations under the License. -->
         left: 0,
         itemWidth: 12,
         textStyle: {
-          color: props.theme === "dark" ? "#fff" : "#333",
+          color: appStore.theme === Themes.Dark ? "#fff" : "#333",
         },
       },
       grid: {
diff --git a/src/views/dashboard/graphs/Table.vue b/src/views/dashboard/graphs/Table.vue
index a03827a5..2dbae271 100644
--- a/src/views/dashboard/graphs/Table.vue
+++ b/src/views/dashboard/graphs/Table.vue
@@ -106,12 +106,12 @@ limitations under the License. -->
     .row:first-child {
       div {
         border-top: 1px solid $disabled-color;
-        background: #eee;
+        background-color: var(--border-color-primary);
       }
     }
 
     .header {
-      color: #000;
+      color: var(--sw-table-color);
       font-weight: bold;
     }
 
diff --git a/src/views/dashboard/graphs/TopList.vue b/src/views/dashboard/graphs/TopList.vue
index 336c0892..c3c5377c 100644
--- a/src/views/dashboard/graphs/TopList.vue
+++ b/src/views/dashboard/graphs/TopList.vue
@@ -141,7 +141,7 @@ limitations under the License. -->
 
   .progress-bar {
     font-size: $font-size-smaller;
-    color: #333;
+    color: $font-color;
   }
 
   .chart-slow-i {
@@ -171,7 +171,7 @@ limitations under the License. -->
     padding: 4px 10px 7px;
     border-radius: 4px;
     border: 1px solid #ddd;
-    color: #333;
+    color: $font-color;
     background-color: $theme-background;
     will-change: opacity, background-color;
     transition: opacity 0.3s, background-color 0.3s;
@@ -188,12 +188,12 @@ limitations under the License. -->
   }
 
   .operation-icon {
-    color: #333;
+    color: $font-color;
   }
 
   .operation {
     padding: 5px 0;
-    color: #333;
+    color: $font-color;
     cursor: pointer;
     position: relative;
     text-align: center;
@@ -201,7 +201,7 @@ limitations under the License. -->
 
     &:hover {
       color: $active-color;
-      background-color: #eee;
+      background-color: $popper-hover-bg-color;
     }
   }
 </style>
diff --git a/src/views/dashboard/panel/Layout.vue b/src/views/dashboard/panel/Layout.vue
index c349bdea..ec7e645f 100644
--- a/src/views/dashboard/panel/Layout.vue
+++ b/src/views/dashboard/panel/Layout.vue
@@ -80,13 +80,13 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   .vue-grid-layout {
-    background: #f7f9fa;
+    background: $layout-background;
     height: auto !important;
   }
 
   .vue-grid-item:not(.vue-grid-placeholder) {
     background-color: $theme-background;
-    box-shadow: 0 1px 4px 0 #00000029;
+    box-shadow: 0 0 3px 0 $box-shadow-color;
     border-radius: 3px;
   }
 
diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue
index aaf27fdd..f584a057 100644
--- a/src/views/dashboard/panel/Tool.vue
+++ b/src/views/dashboard/panel/Tool.vue
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="dashboard-tool flex-h">
-    <div :class="isRelation ? 'flex-v' : 'flex-h'">
+    <div :class="isRelation ? 'flex-v' : 'flex-h'" class="tool-selectors">
       <div class="flex-h">
         <div class="selectors-item" v-if="key !== 10">
           <span class="label">$Service</span>
@@ -103,27 +103,24 @@ limitations under the License. -->
           <template #dropdown>
             <el-dropdown-menu>
               <el-dropdown-item @click="clickIcons(t)" v-for="(t, index) in toolIcons" :key="index" :title="t.content">
-                <Icon class="mr-5" size="middle" :iconName="t.name" />
+                <Icon class="mr-5" size="sm" :iconName="t.name" />
                 <span>{{ t.content }}</span>
               </el-dropdown-item>
             </el-dropdown-menu>
           </template>
         </el-dropdown>
-        <el-tooltip content="Apply" placement="bottom" effect="light">
+        <el-tooltip content="Apply" placement="bottom">
           <i @click="applyDashboard">
             <Icon class="icon-btn" size="sm" iconName="save" />
           </i>
         </el-tooltip>
       </div>
-      <div class="switch">
+      <div class="ml-5">
         <el-switch
           v-model="dashboardStore.editMode"
           active-text="E"
           inactive-text="V"
-          size="small"
           inline-prompt
-          active-color="#409eff"
-          inactive-color="#999"
           @change="changeMode"
         />
       </div>
@@ -738,15 +735,15 @@ limitations under the License. -->
 <style lang="scss" scoped>
   .dashboard-tool {
     text-align: right;
-    padding: 3px 5px 5px;
-    background: rgb(240 242 245);
-    border-bottom: 1px solid #dfe4e8;
+    padding: 5px;
+    background: $dashboard-tool-bg-color;
+    border-bottom: 1px solid $border-color;
     justify-content: space-between;
   }
 
-  .switch {
-    padding-top: 2px;
-    margin: 0 10px;
+  .tool-selectors {
+    align-items: center;
+    height: auto;
   }
 
   .label {
@@ -761,6 +758,7 @@ limitations under the License. -->
 
   .tools {
     justify-content: space-between;
+    align-items: center;
     height: auto;
   }
 
@@ -768,12 +766,12 @@ limitations under the License. -->
     display: inline-block;
     padding: 3px;
     text-align: center;
-    border: 1px solid $disabled-color;
+    border: 1px solid var(--sw-icon-btn-border);
     border-radius: 3px;
     margin-left: 6px;
     cursor: pointer;
-    background-color: #eee;
-    color: #666;
+    background-color: var(--sw-icon-btn-bg);
+    color: var(--sw-icon-btn-color);
     font-size: $font-size-smaller;
   }
 
diff --git a/src/views/dashboard/related/continuous-profiling/components/InstanceList.vue b/src/views/dashboard/related/continuous-profiling/components/InstanceList.vue
index 57da33c9..ea1f5e94 100644
--- 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;
   }
 
diff --git a/src/views/dashboard/related/continuous-profiling/components/Policy.vue b/src/views/dashboard/related/continuous-profiling/components/Policy.vue
index 386989cb..4bc5e6f9 100644
--- 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;
 
diff --git a/src/views/dashboard/related/continuous-profiling/components/PolicyList.vue b/src/views/dashboard/related/continuous-profiling/components/PolicyList.vue
index 9787903c..428fbd1e 100644
--- 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;
   }
diff --git a/src/views/dashboard/related/ebpf/Header.vue b/src/views/dashboard/related/ebpf/Header.vue
index 289d1c89..0c3c10df 100644
--- 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;
   }
 
diff --git a/src/views/dashboard/related/ebpf/components/TaskList.vue b/src/views/dashboard/related/ebpf/components/TaskList.vue
index 7e50238f..43d322d5 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 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 {
diff --git a/src/views/dashboard/related/log/LogTable/Index.vue b/src/views/dashboard/related/log/LogTable/Index.vue
index a0b9be81..125345e3 100644
--- 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;
diff --git a/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue b/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue
index b8afe084..dea866d6 100644
--- 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;
   }
diff --git a/src/views/dashboard/related/network-profiling/components/Tasks.vue b/src/views/dashboard/related/network-profiling/components/Tasks.vue
index a873a636..4886557b 100644
--- 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%;
   }
 
diff --git a/src/views/dashboard/related/network-profiling/components/TimeLine.vue b/src/views/dashboard/related/network-profiling/components/TimeLine.vue
index e645439c..03d6f7f0 100644
--- 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;
diff --git a/src/views/dashboard/related/profile/Header.vue b/src/views/dashboard/related/profile/Header.vue
index 1ea18eae..425b8cb7 100644
--- 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 {
diff --git a/src/views/dashboard/related/profile/components/SegmentList.vue b/src/views/dashboard/related/profile/components/SegmentList.vue
index 1addee6a..e0069ff1 100644
--- 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>
diff --git a/src/views/dashboard/related/profile/components/Stack/Container.vue b/src/views/dashboard/related/profile/components/Stack/Container.vue
index e510eddd..6f6e77c0 100644
--- 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;
diff --git a/src/views/dashboard/related/profile/components/Stack/Item.vue b/src/views/dashboard/related/profile/components/Stack/Item.vue
index 26c08999..9341f4d5 100644
--- 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;
diff --git a/src/views/dashboard/related/profile/components/TaskList.vue b/src/views/dashboard/related/profile/components/TaskList.vue
index 7ebe29b8..a95d04df 100644
--- 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 {
diff --git a/src/views/dashboard/related/topology/components/Graph.vue b/src/views/dashboard/related/topology/components/Graph.vue
index 14df6465..3e732ba4 100644
--- 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;
   }
diff --git a/src/views/dashboard/related/topology/components/PodTopology.vue b/src/views/dashboard/related/topology/components/PodTopology.vue
index 8db56c0d..40812b14 100644
--- 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 {
diff --git a/src/views/dashboard/related/topology/components/Sankey.vue b/src/views/dashboard/related/topology/components/Sankey.vue
index 156b8302..f8fa2d44 100644
--- 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"],
diff --git a/src/views/dashboard/related/topology/components/Settings.vue b/src/views/dashboard/related/topology/components/Settings.vue
index d2074f36..5fbea92b 100644
--- 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 {
diff --git a/src/views/dashboard/related/topology/components/utils/layout.ts b/src/views/dashboard/related/topology/components/utils/layout.ts
index 27b8073d..52b35e5b 100644
--- 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), []);
diff --git a/src/views/dashboard/related/trace/Detail.vue b/src/views/dashboard/related/trace/Detail.vue
index d85b5b40..ec4bd9b8 100644
--- 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 {
diff --git a/src/views/dashboard/related/trace/Header.vue b/src/views/dashboard/related/trace/Header.vue
index a4a7cb24..f845ebbb 100644
--- 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" />
diff --git a/src/views/dashboard/related/trace/Index.vue b/src/views/dashboard/related/trace/Index.vue
index 8f211f9b..e7f25de9 100644
--- 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;
   }
 
diff --git a/src/views/dashboard/related/trace/TraceList.vue b/src/views/dashboard/related/trace/TraceList.vue
index 9be3d2ac..2ec6016d 100644
--- 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 {
diff --git a/src/views/dashboard/related/trace/components/D3Graph/Index.vue b/src/views/dashboard/related/trace/components/D3Graph/Index.vue
index 0f9e8f21..f848f8c2 100644
--- 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%);
     }
   }
 
diff --git a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
index 7947464c..f4c27777 100644
--- 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,
         },
diff --git a/src/views/dashboard/related/trace/components/Table/Index.vue b/src/views/dashboard/related/trace/components/Table/Index.vue
index 9d16a758..0d210b1d 100644
--- 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>
diff --git a/src/views/dashboard/related/trace/components/Table/TableContainer.vue b/src/views/dashboard/related/trace/components/Table/TableContainer.vue
index b396de92..125eee1f 100644
--- 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;
diff --git a/src/views/dashboard/related/trace/components/Table/TableItem.vue b/src/views/dashboard/related/trace/components/Table/TableItem.vue
index 0ce19ad1..52297534 100644
--- 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 {
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 3b06104d..3d738832 100644
--- 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", () => {
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 4f5563f3..e7001ac2 100644
--- 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");
 
diff --git a/vite.config.ts b/vite.config.ts
index d27a6462..1eab0484 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -64,7 +64,7 @@ export default ({ mode }: ConfigEnv): UserConfig => {
       preprocessorOptions: {
         //define global scss variable
         scss: {
-          additionalData: `@use "@/styles/light.scss" as *;`,
+          additionalData: `@use "@/styles/theme.scss" as *;`,
         },
       },
     },