update 重构暗黑模式样式 将所有写死的颜色统一整理

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:

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;

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;

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>

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,