diff --git a/src/assets/styles/components/_card-shell.scss b/src/assets/styles/components/_card-shell.scss
index ddf59da..dfbac5a 100644
--- a/src/assets/styles/components/_card-shell.scss
+++ b/src/assets/styles/components/_card-shell.scss
@@ -4,8 +4,8 @@
 // --- 历史「表单分区标题」样式 ---
 .form-header {
   font-size: 15px;
-  color: #6379bb;
-  border-bottom: 1px solid #ddd;
+  color: var(--el-color-primary);
+  border-bottom: 1px solid var(--app-surface-border);
   margin: 8px 10px 25px 10px;
   padding-bottom: 5px;
 }
@@ -13,8 +13,8 @@
 // --- 树形容器描边（暗色覆盖在 _search-panel） ---
 .tree-border {
   margin-top: 8px;
-  border: 1px solid rgba(148, 163, 184, 0.16);
-  background: rgba(255, 255, 255, 0.42) none;
+  border: 1px solid var(--app-surface-border);
+  background: var(--app-surface-bg);
   border-radius: 22px;
   width: 100%;
   padding: 12px;
@@ -39,7 +39,7 @@
   padding: 14px 16px 10px !important;
   min-height: auto;
   background: transparent;
-  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
+  border-bottom: 1px solid var(--app-surface-border);
 }
 
 .el-card__body {
@@ -59,7 +59,7 @@
 
 .el-card:hover {
   box-shadow: var(--app-shadow-md);
-  border-color: rgba(64, 158, 255, 0.16);
+  border-color: var(--app-accent-soft);
 }
 
 .card-box {
diff --git a/src/assets/styles/components/_misc.scss b/src/assets/styles/components/_misc.scss
index cfa93c4..15e3a9f 100644
--- a/src/assets/styles/components/_misc.scss
+++ b/src/assets/styles/components/_misc.scss
@@ -1,9 +1,9 @@
 .link-type,
 .link-type:focus {
-  color: #337ab7;
+  color: var(--el-color-primary);
   cursor: pointer;
 
   &:hover {
-    color: rgb(32, 160, 255);
+    color: var(--app-accent-strong);
   }
 }
diff --git a/src/assets/styles/components/_page-shell.scss b/src/assets/styles/components/_page-shell.scss
index 727adf2..e9b1dc3 100644
--- a/src/assets/styles/components/_page-shell.scss
+++ b/src/assets/styles/components/_page-shell.scss
@@ -144,7 +144,8 @@
   .dept-tree::-webkit-scrollbar-thumb,
   .selector-tree::-webkit-scrollbar-thumb {
     border-radius: 999px;
-    background: rgba(148, 163, 184, 0.55);
+    background: var(--app-text-muted);
+    opacity: 0.55;
   }
 
   .dept-tree::-webkit-scrollbar-track,
diff --git a/src/assets/styles/components/_search-panel.scss b/src/assets/styles/components/_search-panel.scss
index 52d9181..4537fe2 100644
--- a/src/assets/styles/components/_search-panel.scss
+++ b/src/assets/styles/components/_search-panel.scss
@@ -7,7 +7,7 @@
   min-width: 28px !important;
   padding: 0 !important;
   border-radius: 10px !important;
-  background: rgba(53, 109, 255, 0.08) !important;
+  background: var(--app-accent-soft) !important;
 }
 
 .data-table .el-button.is-link + .el-button.is-link {
@@ -77,7 +77,7 @@
 
 :global(html.dark) {
   .tree-border {
-    background: rgba(15, 23, 42, 0.42);
-    border-color: rgba(100, 116, 139, 0.22);
+    background: var(--app-surface-bg);
+    border-color: var(--app-surface-border);
   }
 }
diff --git a/src/assets/styles/mixin.scss b/src/assets/styles/mixin.scss
index 6912d14..f62e4da 100644
--- a/src/assets/styles/mixin.scss
+++ b/src/assets/styles/mixin.scss
@@ -10,7 +10,7 @@
 // WebKit 滚动条配色（用于可滚动容器）
 @mixin scrollBar {
   &::-webkit-scrollbar-track-piece {
-    background: #d3dce6;
+    background: var(--app-surface-border);
   }
 
   &::-webkit-scrollbar {
@@ -18,7 +18,7 @@
   }
 
   &::-webkit-scrollbar-thumb {
-    background: #99a9bf;
+    background: var(--app-text-muted);
     border-radius: 20px;
   }
 }
diff --git a/src/assets/styles/tokens/_theme-dark.scss b/src/assets/styles/tokens/_theme-dark.scss
index 63741a9..218582a 100644
--- a/src/assets/styles/tokens/_theme-dark.scss
+++ b/src/assets/styles/tokens/_theme-dark.scss
@@ -15,9 +15,15 @@ html.dark {
   --tableHeaderBg: var(--el-bg-color);
   --tableHeaderTextColor: var(--el-text-color);
 
-  // --- 树节点：暗色下修正 primary 浅底色 ---
+  // --- 表格：暗色下选中行背景 ---
+  --el-table-current-row-bg-color: rgba(53, 109, 255, 0.14);
+  --el-table-row-hover-bg-color: rgba(148, 163, 184, 0.07);
+
+  // --- 全局：暗色下修正 primary 浅底色（表格行选中、树节点等） ---
+  --el-color-primary-light-9: rgba(53, 109, 255, 0.14);
+
   .el-tree-node__content {
-    --el-color-primary-light-9: #262727;
+    --el-color-primary-light-9: rgba(53, 109, 255, 0.14);
   }
 
   // --- 各类型按钮（含 plain）在暗色下的 EP CSS 变量 ---
diff --git a/src/assets/styles/vendors/element-plus/_dialog.scss b/src/assets/styles/vendors/element-plus/_dialog.scss
index c95a2e2..7fd94dc 100644
--- a/src/assets/styles/vendors/element-plus/_dialog.scss
+++ b/src/assets/styles/vendors/element-plus/_dialog.scss
@@ -26,7 +26,7 @@
       .el-dialog__header {
         padding: 18px 20px 14px;
         box-sizing: border-box;
-        border-bottom: 1px solid rgba(148, 163, 184, 0.14);
+        border-bottom: 1px solid var(--app-surface-border);
         margin-right: 0;
         background: var(--app-elevated-soft-bg);
       }
@@ -76,7 +76,7 @@
         justify-content: flex-end;
         gap: 8px;
         padding: 14px 20px 20px;
-        border-top: 1px solid rgba(148, 163, 184, 0.14);
+        border-top: 1px solid var(--app-surface-border);
       }
     }
   }
diff --git a/src/assets/styles/vendors/element-plus/_dropdown.scss b/src/assets/styles/vendors/element-plus/_dropdown.scss
index be61fd1..dc8eff9 100644
--- a/src/assets/styles/vendors/element-plus/_dropdown.scss
+++ b/src/assets/styles/vendors/element-plus/_dropdown.scss
@@ -37,7 +37,7 @@
       right: 2px;
       top: -6px;
       width: auto;
-      background: rgba(148, 163, 184, 0.14);
+      background: var(--app-surface-border);
     }
   }
 
diff --git a/src/assets/styles/vendors/element-plus/_feedback.scss b/src/assets/styles/vendors/element-plus/_feedback.scss
index b48a7a1..fcc76b9 100644
--- a/src/assets/styles/vendors/element-plus/_feedback.scss
+++ b/src/assets/styles/vendors/element-plus/_feedback.scss
@@ -82,7 +82,7 @@
     justify-content: flex-end;
     gap: 8px;
     padding: 16px 20px 20px;
-    border-top: 1px solid rgba(148, 163, 184, 0.14);
+    border-top: 1px solid var(--app-surface-border);
   }
 
   .el-message-box__btns .el-button {
diff --git a/src/assets/styles/vendors/element-plus/_navigation.scss b/src/assets/styles/vendors/element-plus/_navigation.scss
index d4aa6df..5074036 100644
--- a/src/assets/styles/vendors/element-plus/_navigation.scss
+++ b/src/assets/styles/vendors/element-plus/_navigation.scss
@@ -40,7 +40,7 @@
 .el-pagination .el-pagination__sizes .el-input__wrapper {
   min-width: 32px;
   height: 32px;
-  border: 1px solid rgba(148, 163, 184, 0.14);
+  border: 1px solid var(--app-surface-border);
   background: var(--app-surface-bg);
 }
 
diff --git a/src/assets/styles/vendors/element-plus/_overrides.scss b/src/assets/styles/vendors/element-plus/_overrides.scss
index 78c9915..20260b7 100644
--- a/src/assets/styles/vendors/element-plus/_overrides.scss
+++ b/src/assets/styles/vendors/element-plus/_overrides.scss
@@ -40,8 +40,40 @@
 .el-table {
   --el-table-border-color: var(--app-surface-border);
   --el-table-header-bg-color: var(--tableHeaderBg);
-  --el-table-tr-bg-color: transparent;
-  background: transparent;
+  --el-table-tr-bg-color: var(--el-bg-color);
+  --el-table-bg-color: var(--el-bg-color);
+  --el-table-row-hover-bg-color: var(--el-fill-color-light);
+  --el-table-current-row-bg-color: var(--el-color-primary-light-9);
+  background: var(--el-bg-color);
+}
+
+// 暗色模式：行背景、hover、选中全部用不透明色，防止固定列透视
+html.dark .el-table {
+  --el-table-tr-bg-color: var(--app-surface-bg);
+  --el-table-bg-color: var(--app-surface-bg);
+  --el-table-row-hover-bg-color: #2a3a55;
+  --el-table-current-row-bg-color: #1e3a6e;
+  --el-color-primary-light-9: #1e3a6e;
+  background: var(--app-surface-bg);
+}
+
+// 固定列单元格基底背景与普通行保持一致（亮/暗均适用）
+.el-table .el-table__cell {
+  background-color: var(--el-table-tr-bg-color);
+}
+
+// hover 行的所有单元格（含固定列）覆写为不透明背景
+.el-table__body tr.hover-row > td.el-table__cell,
+.el-table__body tr.hover-row.current-row > td.el-table__cell,
+.el-table__body tr.hover-row.el-table__row--striped > td.el-table__cell,
+.el-table__body tr.hover-row.el-table__row--striped.current-row > td.el-table__cell,
+.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
+  background-color: var(--el-table-row-hover-bg-color) !important;
+}
+
+// 选中行的所有单元格（含固定列）覆写为不透明背景
+.el-table__body tr.current-row > td.el-table__cell {
+  background-color: var(--el-table-current-row-bg-color) !important;
 }
 
 // --- 输入类默认内描边（与 _form 中 focus 环配合） ---
diff --git a/src/assets/styles/vendors/element-plus/_popper.scss b/src/assets/styles/vendors/element-plus/_popper.scss
index 030718c..070bd36 100644
--- a/src/assets/styles/vendors/element-plus/_popper.scss
+++ b/src/assets/styles/vendors/element-plus/_popper.scss
@@ -98,7 +98,7 @@
 
 .el-cascader-menu {
   min-width: 180px;
-  border-right-color: rgba(148, 163, 184, 0.12);
+  border-right-color: var(--app-surface-border);
 }
 
 .el-cascader-node__prefix,
@@ -184,11 +184,12 @@
 
 .el-time-panel__content::before,
 .el-time-panel__content::after {
-  border-color: rgba(148, 163, 184, 0.14);
+  border-color: var(--app-surface-border);
 }
 
 .el-scrollbar__thumb {
-  background: rgba(148, 163, 184, 0.42);
+  background: var(--app-text-muted);
+  opacity: 0.42;
 }
 
 .el-scrollbar__thumb:hover {
diff --git a/src/assets/styles/vendors/element-plus/_shell.scss b/src/assets/styles/vendors/element-plus/_shell.scss
index e1601c4..30799c7 100644
--- a/src/assets/styles/vendors/element-plus/_shell.scss
+++ b/src/assets/styles/vendors/element-plus/_shell.scss
@@ -9,7 +9,7 @@
 .el-drawer__header {
   margin-bottom: 0;
   padding: 18px 20px 16px;
-  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
+  border-bottom: 1px solid var(--app-surface-border);
   background: var(--app-elevated-soft-bg);
   color: var(--app-text-title);
 }
@@ -43,7 +43,7 @@
 }
 
 .el-loading-mask {
-  background: rgba(248, 250, 252, 0.76);
+  background: color-mix(in srgb, var(--app-surface-bg) 82%, transparent);
   backdrop-filter: blur(4px);
 }
 
@@ -52,7 +52,7 @@
 }
 
 .el-descriptions {
-  --el-descriptions-table-border: rgba(148, 163, 184, 0.14);
+  --el-descriptions-table-border: var(--app-surface-border);
 }
 
 .el-descriptions__body .el-descriptions__table {
@@ -103,8 +103,3 @@
   box-shadow: var(--app-shadow-md);
 }
 
-html.dark {
-  .el-loading-mask {
-    background: rgba(6, 11, 22, 0.7);
-  }
-}
diff --git a/src/assets/styles/vendors/element-plus/_table.scss b/src/assets/styles/vendors/element-plus/_table.scss
index 0d5783e..9460df6 100644
--- a/src/assets/styles/vendors/element-plus/_table.scss
+++ b/src/assets/styles/vendors/element-plus/_table.scss
@@ -32,6 +32,13 @@
   background-color: var(--el-bg-color);
 }
 
+html.dark {
+  .el-table__fixed-body-wrapper,
+  .el-table__fixed-right-body-wrapper {
+    background-color: var(--app-surface-bg);
+  }
+}
+
 // 去掉额外的表格边线，使用表格border
 .el-table--border:after,
 .el-table--border:before,
@@ -56,7 +63,7 @@
 
 .el-table .el-dropdown-link {
   cursor: pointer;
-  color: #409eff;
+  color: var(--el-color-primary);
   margin-left: 10px;
 }
 
diff --git a/src/components/IconSelect/index.vue b/src/components/IconSelect/index.vue
index e0aaa43..10a54c0 100644
--- a/src/components/IconSelect/index.vue
+++ b/src/components/IconSelect/index.vue
@@ -144,7 +144,7 @@ watch(
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    border: 1px solid rgba(148, 163, 184, 0.16);
+    border: 1px solid var(--app-surface-border);
     border-radius: 12px;
     background: var(--app-surface-bg);
     transition:
diff --git a/src/components/ImagePreview/index.vue b/src/components/ImagePreview/index.vue
index e7fb292..9beada2 100644
--- a/src/components/ImagePreview/index.vue
+++ b/src/components/ImagePreview/index.vue
@@ -60,8 +60,8 @@ const realHeight = computed(() => (typeof props.height == 'string' ? props.heigh
 <style lang="scss" scoped>
 .el-image {
   border-radius: 5px;
-  background-color: #ebeef5;
-  box-shadow: 0 0 5px 1px #ccc;
+  background-color: var(--app-elevated-soft-bg);
+  box-shadow: var(--app-shadow-sm);
 
   :deep(.el-image__inner) {
     transition: all 0.3s;
diff --git a/src/components/Pagination/index.vue b/src/components/Pagination/index.vue
index 8cc2009..8883452 100644
--- a/src/components/Pagination/index.vue
+++ b/src/components/Pagination/index.vue
@@ -73,7 +73,7 @@ function handleCurrentChange(val: number) {
   justify-content: flex-end;
   padding-top: 10px;
   margin-top: 18px;
-  border-top: 1px solid rgba(148, 163, 184, 0.14);
+  border-top: 1px solid var(--app-surface-border);
 
   .el-pagination {
     float: none;
diff --git a/src/components/RightToolbar/index.vue b/src/components/RightToolbar/index.vue
index 336accc..92402a8 100644
--- a/src/components/RightToolbar/index.vue
+++ b/src/components/RightToolbar/index.vue
@@ -115,8 +115,8 @@ onMounted(() => {
   width: 38px;
   height: 38px;
   border-radius: 14px;
-  background: rgba(255, 255, 255, 0.62);
-  border: 1px solid rgba(148, 163, 184, 0.16);
+  background: var(--app-elevated-soft-bg);
+  border: 1px solid var(--app-surface-border);
   color: var(--app-text-muted);
   transition:
     transform 0.25s ease,
@@ -160,11 +160,4 @@ onMounted(() => {
 .show-btn {
   margin-left: 0;
 }
-
-:global(html.dark) {
-  .top-right-btn :deep(.el-button.is-circle) {
-    background: rgba(15, 23, 42, 0.56);
-    border-color: rgba(100, 116, 139, 0.22);
-  }
-}
 </style>
diff --git a/src/components/TopNav/index.vue b/src/components/TopNav/index.vue
index 016f40b..fd91d7a 100644
--- a/src/components/TopNav/index.vue
+++ b/src/components/TopNav/index.vue
@@ -177,13 +177,13 @@ onMounted(() => {
 
 <style lang="scss">
 .mix-topnav-menu.el-menu--horizontal {
-  --topbar-pill-bg: rgba(255, 255, 255, 0.7);
-  --topbar-pill-hover-bg: rgba(255, 255, 255, 0.9);
-  --topbar-pill-active-bg: rgba(255, 255, 255, 0.82);
+  --topbar-pill-bg: var(--app-elevated-soft-bg);
+  --topbar-pill-hover-bg: var(--app-elevated-close-bg);
+  --topbar-pill-active-bg: var(--app-elevated-close-bg);
   --topbar-pill-text: var(--app-text-title);
   --topbar-pill-muted: var(--app-text-muted);
-  --topbar-pill-border: rgba(148, 163, 184, 0.12);
-  --topbar-pill-active-border: rgba(148, 163, 184, 0.14);
+  --topbar-pill-border: var(--app-surface-border);
+  --topbar-pill-active-border: var(--app-surface-border);
 
   display: flex;
   align-items: center;
@@ -287,12 +287,10 @@ onMounted(() => {
 .mix-topnav-popper .el-menu--popup {
   min-width: 188px;
   padding: 10px !important;
-  border: 1px solid rgba(148, 163, 184, 0.14);
+  border: 1px solid var(--app-surface-border);
   border-radius: 18px;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94)) !important;
-  box-shadow:
-    0 18px 40px rgba(15, 23, 42, 0.12),
-    inset 0 1px 0 rgba(255, 255, 255, 0.72);
+  background: var(--app-surface-bg) !important;
+  box-shadow: var(--app-shadow-md);
 }
 
 .mix-topnav-popper .el-menu--popup .el-menu-item,
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index ccb7fea..2a73f30 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -181,11 +181,9 @@ const handleCommand = (command: string) => {
     margin-right: 12px;
     flex-shrink: 0;
     border-radius: 14px;
-    border: 1px solid rgba(148, 163, 184, 0.18);
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.82));
-    box-shadow:
-      inset 0 1px 0 rgba(255, 255, 255, 0.72),
-      0 6px 14px rgba(15, 23, 42, 0.04);
+    border: 1px solid var(--app-surface-border);
+    background: var(--app-surface-bg);
+    box-shadow: var(--app-shadow-sm);
     transition:
       transform 0.2s ease,
       border-color 0.2s ease,
@@ -213,11 +211,9 @@ const handleCommand = (command: string) => {
     margin-left: 0;
     padding: 4px 8px;
     border-radius: 16px;
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(248, 250, 252, 0.58));
-    border: 1px solid rgba(148, 163, 184, 0.14);
-    box-shadow:
-      inset 0 1px 0 rgba(255, 255, 255, 0.72),
-      0 6px 18px rgba(15, 23, 42, 0.04);
+    background: var(--app-surface-bg);
+    border: 1px solid var(--app-surface-border);
+    box-shadow: var(--app-shadow-sm);
   }
 }
 
@@ -402,7 +398,7 @@ const handleCommand = (command: string) => {
         gap: 12px;
         padding: 4px 8px 4px 4px;
         border-radius: 16px;
-        background: #fff;
+        background: var(--app-surface-bg);
         border: 1px solid var(--app-surface-border);
         min-width: 0;
         cursor: pointer;
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
index 214dd77..b0d60ae 100644
--- a/src/layout/components/Settings/index.vue
+++ b/src/layout/components/Settings/index.vue
@@ -278,7 +278,7 @@ defineExpose({
 
 .setting-drawer-title {
   margin-bottom: 12px;
-  color: rgba(0, 0, 0, 0.85);
+  color: var(--app-text-title);
   line-height: 22px;
   font-weight: bold;
   .drawer-title {
@@ -298,7 +298,7 @@ defineExpose({
     border-radius: 12px;
     cursor: pointer;
     overflow: hidden;
-    border: 1px solid rgba(148, 163, 184, 0.16);
+    border: 1px solid var(--app-surface-border);
     transition:
       border-color 0.2s ease,
       transform 0.2s ease;
@@ -329,9 +329,7 @@ defineExpose({
       height: 100%;
       padding-top: 15px;
       padding-left: 24px;
-      color: #1890ff;
-      font-weight: 700;
-      font-size: 14px;
+      color: var(--app-accent-strong);
     }
   }
 }
@@ -340,7 +338,7 @@ defineExpose({
   padding: 12px 0;
   font-size: 14px;
   color: var(--app-text-title);
-  border-bottom: 1px solid rgba(148, 163, 184, 0.08);
+  border-bottom: 1px solid var(--app-surface-border);
 
   .comp-style {
     float: right;
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index f380835..251a6d3 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -482,13 +482,12 @@ onBeforeUnmount(() => {
   align-items: flex-start;
   height: 38px;
   width: 100%;
-  background-color: var(--el-bg-color);
-  border: 1px solid var(--el-border-color-light);
+  background-color: var(--app-surface-bg);
+  border: 1px solid var(--app-surface-border);
   border-radius: var(--app-radius-md);
   box-shadow: var(--app-shadow-sm);
 
   $btn-width: 26px;
-  $btn-color: #71717a;
   $btn-hover-bg: var(--el-fill-color-light);
   $btn-hover-color: var(--el-text-color-primary);
 
@@ -501,10 +500,10 @@ onBeforeUnmount(() => {
     height: 26px;
     margin-top: 4px;
     cursor: pointer;
-    color: $btn-color;
+    color: var(--app-text-muted);
     user-select: none;
-    background-color: var(--el-bg-color);
-    border: 1px solid var(--el-border-color-light);
+    background-color: var(--app-surface-bg);
+    border: 1px solid var(--app-surface-border);
     border-radius: var(--app-radius-md);
     transition:
       box-shadow 0.2s ease,
@@ -542,9 +541,9 @@ onBeforeUnmount(() => {
       cursor: pointer;
       height: 26px;
       line-height: 25px;
-      background-color: var(--el-bg-color);
-      border: 1px solid var(--el-border-color-light);
-      color: #495060;
+      background-color: var(--app-surface-bg);
+      border: 1px solid var(--app-surface-border);
+      color: var(--el-text-color-regular);
       padding: 0 8px;
       font-size: 12px;
       margin-left: 5px;
@@ -572,13 +571,13 @@ onBeforeUnmount(() => {
       }
 
       &.active {
-        background-color: #42b983;
-        color: #fff;
-        border-color: #42b983;
+        background-color: var(--tags-view-active-bg);
+        color: var(--el-color-white);
+        border-color: var(--tags-view-active-border-color);
 
         &::before {
           content: '';
-          background: #fff;
+          background: var(--el-color-white);
           display: inline-block;
           width: 8px;
           height: 8px;
@@ -616,10 +615,10 @@ onBeforeUnmount(() => {
     height: 26px;
     padding: 0 8px;
     cursor: pointer;
-    color: $btn-color;
+    color: var(--app-text-muted);
     user-select: none;
-    background-color: var(--el-bg-color);
-    border: 1px solid var(--el-border-color-light);
+    background-color: var(--app-surface-bg);
+    border: 1px solid var(--app-surface-border);
     border-radius: var(--app-radius-md);
     transition:
       box-shadow 0.2s ease,
@@ -646,7 +645,7 @@ onBeforeUnmount(() => {
 
   .contextmenu {
     margin: 0;
-    background: var(--el-bg-color);
+    background: var(--app-surface-bg);
     z-index: 3000;
     position: fixed;
     list-style-type: none;
@@ -688,8 +687,8 @@ onBeforeUnmount(() => {
       }
 
       &:hover {
-        background-color: #b4bccc;
-        color: #fff;
+        background-color: var(--app-surface-border);
+        color: var(--el-color-white);
         width: 12px !important;
         height: 12px !important;
       }
diff --git a/src/layout/components/TopBar/index.vue b/src/layout/components/TopBar/index.vue
index ce84b8d..5994d06 100644
--- a/src/layout/components/TopBar/index.vue
+++ b/src/layout/components/TopBar/index.vue
@@ -81,13 +81,13 @@ onMounted(() => {
 
 <style lang="scss">
 .topbar-menu.el-menu--horizontal {
-  --topbar-pill-bg: rgba(255, 255, 255, 0.7);
-  --topbar-pill-hover-bg: rgba(255, 255, 255, 0.9);
-  --topbar-pill-active-bg: rgba(255, 255, 255, 0.82);
+  --topbar-pill-bg: var(--app-elevated-soft-bg);
+  --topbar-pill-hover-bg: var(--app-elevated-close-bg);
+  --topbar-pill-active-bg: var(--app-elevated-close-bg);
   --topbar-pill-text: var(--app-text-title);
   --topbar-pill-muted: var(--app-text-muted);
-  --topbar-pill-border: rgba(148, 163, 184, 0.12);
-  --topbar-pill-active-border: rgba(148, 163, 184, 0.14);
+  --topbar-pill-border: var(--app-surface-border);
+  --topbar-pill-active-border: var(--app-surface-border);
 
   display: flex;
   align-items: center;
diff --git a/src/layout/components/TopBar/search.vue b/src/layout/components/TopBar/search.vue
index 97091fe..f5af4e3 100644
--- a/src/layout/components/TopBar/search.vue
+++ b/src/layout/components/TopBar/search.vue
@@ -407,7 +407,7 @@ defineExpose({
 .empty-icon {
   font-size: 40px;
   margin-bottom: 14px;
-  color: #cbd5e1;
+  color: var(--app-text-muted);
 }
 
 .empty-text {
@@ -429,7 +429,7 @@ defineExpose({
   align-items: center;
   gap: 24px;
   padding: 14px 18px 16px;
-  border-top: 1px solid rgba(148, 163, 184, 0.12);
+  border-top: 1px solid var(--app-surface-border);
   color: var(--app-text-muted);
   font-size: 12px;
 }
@@ -447,40 +447,13 @@ kbd {
   min-width: 20px;
   height: 20px;
   padding: 0 5px;
-  border: 1px solid rgba(148, 163, 184, 0.28);
+  border: 1px solid var(--app-surface-border);
   border-radius: 6px;
-  background: rgba(248, 250, 252, 0.9);
+  background: var(--app-elevated-soft-bg);
   color: var(--app-text-title);
   font-size: 11px;
   line-height: 1;
-  box-shadow: inset 0 -1px 0 rgba(148, 163, 184, 0.18);
+  box-shadow: inset 0 -1px 0 var(--app-surface-border);
 }
 
-:global(html.dark) {
-  .layout-search-dialog {
-    :deep(.el-dialog) {
-      background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.95));
-    }
-
-    :deep(.el-input__wrapper) {
-      background: rgba(15, 23, 42, 0.92);
-      box-shadow: inset 0 0 0 1px rgba(71, 85, 105, 0.38);
-    }
-  }
-
-  .search-item:hover {
-    background: rgba(59, 130, 246, 0.16);
-  }
-
-  .empty-icon {
-    color: #64748b;
-  }
-
-  kbd {
-    background: rgba(30, 41, 59, 0.9);
-    border-color: rgba(71, 85, 105, 0.48);
-    color: #e2e8f0;
-    box-shadow: inset 0 -1px 0 rgba(15, 23, 42, 0.5);
-  }
-}
 </style>
diff --git a/src/layout/components/notice/index.vue b/src/layout/components/notice/index.vue
index bccf99d..c439548 100644
--- a/src/layout/components/notice/index.vue
+++ b/src/layout/components/notice/index.vue
@@ -96,7 +96,7 @@ const readAll = () => {
 
   .head-box {
     display: flex;
-    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
+    border-bottom: 1px solid var(--app-surface-border);
     box-sizing: border-box;
     color: var(--app-text-title);
     justify-content: space-between;
@@ -130,7 +130,7 @@ const readAll = () => {
     }
 
     :deep(.el-tabs__nav-wrap::after) {
-      background: rgba(148, 163, 184, 0.14);
+      background: var(--app-surface-border);
     }
 
     :deep(.el-tabs__item) {
diff --git a/src/views/index.vue b/src/views/index.vue
index 783bb90..1b38a55 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -131,7 +131,7 @@ const goTarget = (url: string) => {
   padding: 30px;
   background:
     radial-gradient(circle at top left, rgba(53, 109, 255, 0.16), transparent 30%),
-    linear-gradient(135deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.42));
+    var(--app-surface-bg);
 }
 
 .hero-copy {
@@ -184,8 +184,8 @@ const goTarget = (url: string) => {
 .stat-card {
   padding: 18px 20px;
   border-radius: 22px;
-  background: rgba(255, 255, 255, 0.54);
-  border: 1px solid rgba(148, 163, 184, 0.14);
+  background: var(--app-elevated-soft-bg);
+  border: 1px solid var(--app-surface-border);
   display: flex;
   flex-direction: column;
   gap: 6px;
@@ -243,8 +243,8 @@ const goTarget = (url: string) => {
 .product-card {
   padding: 22px;
   border-radius: 24px;
-  background: rgba(255, 255, 255, 0.5);
-  border: 1px solid rgba(148, 163, 184, 0.14);
+  background: var(--app-elevated-soft-bg);
+  border: 1px solid var(--app-surface-border);
   transition:
     transform 0.25s ease,
     box-shadow 0.25s ease,
@@ -308,8 +308,8 @@ const goTarget = (url: string) => {
 .capability-group {
   padding: 18px 18px 18px 20px;
   border-radius: 22px;
-  background: rgba(255, 255, 255, 0.46);
-  border: 1px solid rgba(148, 163, 184, 0.14);
+  background: var(--app-elevated-soft-bg);
+  border: 1px solid var(--app-surface-border);
 
   h3 {
     margin: 0 0 12px;
@@ -368,14 +368,7 @@ const goTarget = (url: string) => {
   .hero-panel {
     background:
       radial-gradient(circle at top left, rgba(53, 109, 255, 0.18), transparent 30%),
-      linear-gradient(135deg, rgba(15, 23, 42, 0.76), rgba(15, 23, 42, 0.48));
-  }
-
-  .stat-card,
-  .product-card,
-  .capability-group {
-    background: rgba(15, 23, 42, 0.5);
-    border-color: rgba(100, 116, 139, 0.16);
+      var(--app-surface-bg);
   }
 }
 </style>
diff --git a/src/views/login.vue b/src/views/login.vue
index 779bc22..b100290 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -347,7 +347,7 @@ onMounted(() => {
   width: 100%;
   padding: 34px 30px 26px;
   z-index: 1;
-  background: rgba(248, 250, 252, 0.92);
+  background: var(--app-surface-bg);
 }
 
 .title-box {
@@ -386,8 +386,8 @@ onMounted(() => {
     color: var(--app-text-muted);
     padding: 10px;
     border-radius: 14px;
-    background: rgba(255, 255, 255, 0.72);
-    border: 1px solid rgba(148, 163, 184, 0.14);
+    background: var(--app-elevated-soft-bg);
+    border: 1px solid var(--app-surface-border);
   }
 }
 
@@ -425,8 +425,8 @@ onMounted(() => {
   padding: 14px 16px;
   margin-bottom: 22px;
   border-radius: 20px;
-  background: rgba(255, 255, 255, 0.58);
-  border: 1px solid rgba(148, 163, 184, 0.14);
+  background: var(--app-elevated-soft-bg);
+  border: 1px solid var(--app-surface-border);
 }
 
 .social-label {
@@ -455,9 +455,9 @@ onMounted(() => {
 
 .login-form :deep(.el-input__wrapper) {
   min-height: 48px;
-  background-color: rgba(255, 255, 255, 0.88);
+  background-color: var(--el-bg-color);
   border-radius: 16px;
-  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.12) inset;
+  box-shadow: 0 0 0 1px var(--app-surface-border) inset;
 }
 
 .login-form :deep(.el-input__wrapper.is-focus) {
@@ -471,8 +471,8 @@ onMounted(() => {
 }
 
 .login-form :deep(.el-button.is-circle) {
-  background: rgba(255, 255, 255, 0.82);
-  border: 1px solid rgba(148, 163, 184, 0.16);
+  background: var(--app-elevated-soft-bg);
+  border: 1px solid var(--app-surface-border);
   color: var(--app-text-muted);
 }
 
@@ -487,8 +487,8 @@ onMounted(() => {
   box-sizing: border-box;
   border-radius: 16px;
   overflow: hidden;
-  background: rgba(255, 255, 255, 0.88);
-  border: 1px solid rgba(148, 163, 184, 0.14);
+  background: var(--el-bg-color);
+  border: 1px solid var(--app-surface-border);
 
   img {
     cursor: pointer;
@@ -562,19 +562,4 @@ onMounted(() => {
   }
 }
 
-:global(html.dark) {
-  .login-form {
-    background: rgba(12, 18, 30, 0.88);
-    border-color: rgba(100, 116, 139, 0.2);
-  }
-
-  .login-form :deep(.el-input__wrapper),
-  .login-code,
-  .title-box :deep(.lang-select--style),
-  .social-panel,
-  .login-form :deep(.el-button.is-circle) {
-    background: rgba(15, 23, 42, 0.56);
-    border-color: rgba(100, 116, 139, 0.2);
-  }
-}
 </style>
diff --git a/src/views/register.vue b/src/views/register.vue
index c1c35ae..76f222d 100644
--- a/src/views/register.vue
+++ b/src/views/register.vue
@@ -328,7 +328,7 @@ onMounted(() => {
   width: 100%;
   padding: 34px 30px 26px;
   z-index: 1;
-  background: rgba(248, 250, 252, 0.92);
+  background: var(--app-surface-bg);
 }
 
 .title-box {
@@ -367,8 +367,8 @@ onMounted(() => {
     color: var(--app-text-muted);
     padding: 10px;
     border-radius: 14px;
-    background: rgba(255, 255, 255, 0.72);
-    border: 1px solid rgba(148, 163, 184, 0.14);
+    background: var(--app-elevated-soft-bg);
+    border: 1px solid var(--app-surface-border);
   }
 }
 
@@ -408,8 +408,8 @@ onMounted(() => {
   box-sizing: border-box;
   border-radius: 16px;
   overflow: hidden;
-  background: rgba(255, 255, 255, 0.88);
-  border: 1px solid rgba(148, 163, 184, 0.14);
+  background: var(--el-bg-color);
+  border: 1px solid var(--app-surface-border);
 
   img {
     cursor: pointer;
@@ -434,9 +434,9 @@ onMounted(() => {
 
 .register-form :deep(.el-input__wrapper) {
   min-height: 48px;
-  background-color: rgba(255, 255, 255, 0.88);
+  background-color: var(--el-bg-color);
   border-radius: 16px;
-  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.12) inset;
+  box-shadow: 0 0 0 1px var(--app-surface-border) inset;
 }
 
 .register-form :deep(.el-input__wrapper.is-focus) {
@@ -503,17 +503,4 @@ onMounted(() => {
   }
 }
 
-:global(html.dark) {
-  .register-form {
-    background: rgba(12, 18, 30, 0.88);
-    border-color: rgba(100, 116, 139, 0.2);
-  }
-
-  .register-form :deep(.el-input__wrapper),
-  .register-code,
-  .title-box :deep(.lang-select--style) {
-    background: rgba(15, 23, 42, 0.56);
-    border-color: rgba(100, 116, 139, 0.2);
-  }
-}
 </style>
diff --git a/src/views/system/user/profile/thirdParty.vue b/src/views/system/user/profile/thirdParty.vue
index 1f9fcc4..0b396d0 100644
--- a/src/views/system/user/profile/thirdParty.vue
+++ b/src/views/system/user/profile/thirdParty.vue
@@ -130,7 +130,7 @@ const authUrl = (source: string) => {
   padding: 12px 10px;
   border: 1px solid var(--app-surface-border);
   border-radius: 12px;
-  background: rgba(248, 250, 252, 0.82);
+  background: var(--app-elevated-soft-bg);
   transition:
     transform 0.2s ease,
     border-color 0.2s ease,
diff --git a/src/views/system/user/profile/userAvatar.vue b/src/views/system/user/profile/userAvatar.vue
index 3202b6b..ac24cd3 100644
--- a/src/views/system/user/profile/userAvatar.vue
+++ b/src/views/system/user/profile/userAvatar.vue
@@ -174,7 +174,7 @@ const closeDialog = () => {
   height: 120px;
   object-fit: cover;
   border-radius: 50%;
-  border: 4px solid rgba(255, 255, 255, 0.92);
+  border: 4px solid var(--app-surface-border);
   box-shadow: var(--app-shadow-sm);
 }
 
@@ -203,7 +203,7 @@ const closeDialog = () => {
   width: 200px;
   height: 200px;
   border-radius: 50%;
-  box-shadow: 0 0 4px #ccc;
+  box-shadow: var(--app-shadow-md);
   overflow: hidden;
 }
 </style>
diff --git a/src/views/workflow/spel/index.vue b/src/views/workflow/spel/index.vue
index 823c6c1..d64bd20 100644
--- a/src/views/workflow/spel/index.vue
+++ b/src/views/workflow/spel/index.vue
@@ -403,9 +403,9 @@ onMounted(() => {
 .preview-box {
   width: 100%;
   padding: 10px 12px;
-  background-color: #f5f7fa;
+  background-color: var(--el-fill-color-light);
   border-radius: 4px;
-  color: #333;
+  color: var(--el-text-color-primary);
   font-family: monospace; /* 等宽字体更清晰 */
   white-space: nowrap; /* 禁止换行 */
   overflow-x: auto; /* 超出宽度时显示水平滚动条 */