diff --git a/frontend/admin/src/diy/pages/devise/list.vue b/frontend/admin/src/diy/pages/devise/list.vue
index 50a4ec8eb..4c4a66132 100644
--- a/frontend/admin/src/diy/pages/devise/list.vue
+++ b/frontend/admin/src/diy/pages/devise/list.vue
@@ -597,7 +597,6 @@ function recovery(row) {
 }
 .left-wrapper {
   padding: 20px 0 0 20px;
-  background: #fff;
   border-right: unset;
 }
 .tree_tit {
diff --git a/frontend/admin/src/diy/pages/theme/editTheme/components/CategoryEditor.vue b/frontend/admin/src/diy/pages/theme/editTheme/components/CategoryEditor.vue
index d3b9c0aad..ac01fd9e5 100644
--- a/frontend/admin/src/diy/pages/theme/editTheme/components/CategoryEditor.vue
+++ b/frontend/admin/src/diy/pages/theme/editTheme/components/CategoryEditor.vue
@@ -114,10 +114,10 @@ function saveAndClose() {
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: #fff;
+  background-color: var(--prev-bg-white);
   .title {
     font-size: 14px;
-    color: rgba(0, 0, 0, 0.85);
+    color: var(--prev-color-text-regular);
     position: relative;
     padding-left: 11px;
     font-weight: bold;
@@ -139,7 +139,7 @@ function saveAndClose() {
       .pictrue {
         width: 100%;
         height: 496px;
-        border: 1px solid #eeeeee;
+        border: 1px solid var(--prev-border-color-lighter);
         border-radius: 10px;
         img {
           width: 100%;
@@ -148,7 +148,7 @@ function saveAndClose() {
       }
       .name {
         font-size: 13px;
-        color: rgba(0, 0, 0, 0.85);
+        color: var(--prev-color-text-regular);
         margin-top: 16px;
         text-align: center;
       }
diff --git a/frontend/admin/src/diy/pages/theme/mallTheme/index.vue b/frontend/admin/src/diy/pages/theme/mallTheme/index.vue
index 74e58fa68..4c9eb0a56 100644
--- a/frontend/admin/src/diy/pages/theme/mallTheme/index.vue
+++ b/frontend/admin/src/diy/pages/theme/mallTheme/index.vue
@@ -182,7 +182,7 @@ body .v-modal {
     justify-content: space-between;
     align-items: center;
     padding: 20px 16px;
-    background: #fff;
+    background: var(--prev-bg-white);
     margin-bottom: 20px;
     border-radius: 4px;
 
@@ -193,7 +193,7 @@ body .v-modal {
       .page-title {
         font-size: 18px;
         font-weight: bold;
-        color: #333;
+        color: var(--prev-color-text-regular);
         margin-right: 15px;
       }
 
@@ -223,12 +223,12 @@ body .v-modal {
       .status-tag {
         display: flex;
         align-items: center;
-        background: rgba(51, 51, 51, 0.04);
+        background: var(--prev-color-hover);
         padding: 2px 10px;
         border-radius: 4px;
         .text {
           font-size: 12px;
-          color: #333;
+          color: var(--prev-color-text-regular);
         }
       }
     }
@@ -236,7 +236,7 @@ body .v-modal {
       display: flex;
       align-items: center;
       font-size: 14px;
-      color: #333;
+      color: var(--prev-color-text-regular);
       cursor: pointer;
       .icon {
         margin-right: 5px;
@@ -249,7 +249,7 @@ body .v-modal {
   .theme-list {
     padding: 16px;
     border-radius: 5px;
-    background-color: #fff;
+    background-color: var(--prev-bg-white);
 
     .list-wrapper {
       display: flex;
@@ -266,15 +266,15 @@ body .v-modal {
   }
   .theme-card {
     width: 100%;
-    background: #fff;
-    border: 1px solid #eee;
+    background: var(--prev-bg-white);
+    border: 1px solid var(--prev-border-color-lighter);
     border-radius: 8px;
     padding: 17px;
     transition: all 0.3s;
     margin-bottom: 20px;
 
     &:hover {
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      box-shadow: var(--el-box-shadow-light);
       transform: translateY(-2px);
     }
 
@@ -286,11 +286,11 @@ body .v-modal {
 
       .card-title {
         font-size: 12px;
-        color: #333;
+        color: var(--prev-color-text-regular);
         border-radius: 0px 20px 20px 0px;
         padding: 7px 12px;
         margin-left: -17px;
-        background: rgba(51, 51, 51, 0.05);
+        background: var(--prev-color-hover);
       }
 
       .card-actions {
@@ -312,20 +312,20 @@ body .v-modal {
       .theme-name {
         font-size: 14px;
         font-weight: 500;
-        color: rgba(48, 49, 51, 1);
+        color: var(--prev-color-text-regular);
         margin-bottom: 5px;
       }
 
       .last-modified {
         font-size: 12px;
-        color: rgba(144, 147, 153, 1);
+        color: var(--prev-color-text-secondary);
       }
     }
 
     .card-preview {
       display: flex;
       justify-content: center;
-      background: #f5f7fa;
+      background: var(--prev-bg-color);
       padding: 0;
       border-radius: 12px;
 
diff --git a/frontend/admin/src/diy/pages/theme/myTheme/index.vue b/frontend/admin/src/diy/pages/theme/myTheme/index.vue
index a46a0f310..f120f9633 100644
--- a/frontend/admin/src/diy/pages/theme/myTheme/index.vue
+++ b/frontend/admin/src/diy/pages/theme/myTheme/index.vue
@@ -327,7 +327,7 @@ function handleImportSuccess() {
     cursor: pointer;
   }
   .page-header {
-    background: #fff;
+    background: var(--prev-bg-white);
     padding: 20px;
     border-radius: 4px;
     margin-bottom: 20px;
@@ -336,12 +336,12 @@ function handleImportSuccess() {
     .header-title {
       font-size: 18px;
       font-weight: bold;
-      color: #333;
+      color: var(--prev-color-text-regular);
     }
   }
 
   .content-area {
-    background: #fff;
+    background: var(--prev-bg-white);
     padding: 20px;
     border-radius: 4px;
     min-height: calc(100vh - 140px);
@@ -368,10 +368,10 @@ function handleImportSuccess() {
       .theme-card {
         width: 208px;
         height: 360px;
-        border: 1px solid #eee;
+        border: 1px solid var(--prev-border-color-lighter);
         border-radius: 8px;
         overflow: hidden;
-        background: #fff;
+        background: var(--prev-bg-white);
         display: flex;
         flex-direction: column;
         transition: all 0.3s;
@@ -551,7 +551,7 @@ function handleImportSuccess() {
           }
         }
         .card-info {
-          border-top: 1px solid #eee;
+          border-top: 1px solid var(--prev-border-color-lighter);
 
           .info-top {
             display: flex;
@@ -560,8 +560,8 @@ function handleImportSuccess() {
             padding: 12px 0 0 12px;
 
             .tag {
-              background: #f7f7f7;
-              color: #333;
+              background: var(--prev-bg-color);
+              color: var(--prev-color-text-regular);
               font-size: 12px;
               padding: 2px 6px;
               height: max-content;
@@ -569,13 +569,13 @@ function handleImportSuccess() {
             }
 
             .status {
-              color: #1890ff;
+              color: var(--prev-color-primary);
               font-size: 12px;
             }
             .using-tag {
-              color: rgba(2, 86, 255, 1);
+              color: var(--prev-color-primary);
               font-size: 12px;
-              background: rgba(2, 86, 255, 0.06);
+              background: var(--prev-color-primary-light-9);
               padding: 4px 10px;
               border-radius: 10px 0 0 10px;
               z-index: 5;
@@ -586,7 +586,7 @@ function handleImportSuccess() {
             padding: 12px;
 
             font-size: 14px;
-            color: #333;
+            color: var(--prev-color-text-regular);
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
diff --git a/frontend/admin/src/pages/app/app/index.vue b/frontend/admin/src/pages/app/app/index.vue
index b0bd8c297..974e4d1d5 100644
--- a/frontend/admin/src/pages/app/app/index.vue
+++ b/frontend/admin/src/pages/app/app/index.vue
@@ -230,7 +230,7 @@ function getAgreementData() {
   width: 100%;
   margin: 0 auto;
   text-align: center;
-  background-color: #fff;
+  background-color: var(--prev-bg-white);
   bottom: 0;
   padding: 16px;
   border-top: 3px solid #f5f7f9;
@@ -245,7 +245,7 @@ function getAgreementData() {
   .goodsTitle .title {
     border-bottom: 2px solid var(--prev-color-primary);
     padding: 0 8px 12px 5px;
-    color: #000;
+    color: var(--prev-color-text-regular);
     font-size: 14px;
   }
   .goodsTitle .icons {
@@ -420,7 +420,7 @@ function getAgreementData() {
   display: flex;
   flex-wrap: nowrap;
   padding: 20px;
-  background-color: #fff;
+  background-color: var(--prev-bg-white);
   border-radius: 5px;
   margin: 20px;
 }
diff --git a/frontend/admin/src/pages/app/upload/index.vue b/frontend/admin/src/pages/app/upload/index.vue
index 815ed68e4..b1f1de68a 100644
--- a/frontend/admin/src/pages/app/upload/index.vue
+++ b/frontend/admin/src/pages/app/upload/index.vue
@@ -178,7 +178,7 @@ function loadData(item, callback) {
   box-sizing: border-box;
   overflow-y: auto;
   height: calc(100vh - 50px);
-  background-color: #fff;
+  background-color: var(--prev-bg-white);
 }
 :deep(.el-upload-list--picture-card) {
   display: grid;
@@ -265,7 +265,7 @@ function loadData(item, callback) {
     height: 30px;
     box-sizing: border-box;
     border-radius: 15px;
-    color: #000;
+    color: var(--prev-color-text-regular);
     font-size: 14px;
     font-family: PingFang SC-Regular, PingFang SC;
     font-weight: 400;
@@ -334,7 +334,7 @@ function loadData(item, callback) {
     line-height: 41px;
     font-size: 15px;
     font-weight: 400;
-    color: #333333;
+    color: var(--prev-color-text-regular);
     border: 1px solid #cccccc;
   }
 }
diff --git a/frontend/admin/src/pages/cms/addArticle/index.vue b/frontend/admin/src/pages/cms/addArticle/index.vue
index 1d480a195..4baacb044 100644
--- a/frontend/admin/src/pages/cms/addArticle/index.vue
+++ b/frontend/admin/src/pages/cms/addArticle/index.vue
@@ -372,7 +372,7 @@ function getDetails() {
 }
 
 .form .goodsTitle {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
+  border-bottom: 1px solid var(--prev-border-color-lighter);
   margin-bottom: 25px;
 }
 
@@ -383,7 +383,7 @@ function getDetails() {
 .form .goodsTitle .title {
   border-bottom: 2px solid var(--prev-color-primary);
   padding: 0 8px 12px 5px;
-  color: #000;
+  color: var(--prev-color-text-regular);
   font-size: 14px;
 }
 
diff --git a/frontend/admin/src/pages/driver/bot/edit.vue b/frontend/admin/src/pages/driver/bot/edit.vue
index 5038a41c6..7a19150c6 100644
--- a/frontend/admin/src/pages/driver/bot/edit.vue
+++ b/frontend/admin/src/pages/driver/bot/edit.vue
@@ -212,7 +212,7 @@ function handleSubmit() {
 
 <style scoped>
 .form-tip {
-  color: #909399;
+  color: var(--prev-color-text-secondary);
   font-size: 12px;
   line-height: 1.5;
   margin-top: 5px;
@@ -236,7 +236,7 @@ function handleSubmit() {
 .help-doc-title {
   font-weight: 700;
   font-size: 14px;
-  color: #303133;
+  color: var(--prev-color-text-regular);
   margin-bottom: 10px;
 }
 .form-actions {
diff --git a/frontend/admin/src/pages/driver/copyDriver/edit.vue b/frontend/admin/src/pages/driver/copyDriver/edit.vue
index f244a9876..357107868 100644
--- a/frontend/admin/src/pages/driver/copyDriver/edit.vue
+++ b/frontend/admin/src/pages/driver/copyDriver/edit.vue
@@ -190,7 +190,7 @@ function handleSubmit() {
 
 <style scoped>
 .form-tip {
-  color: #909399;
+  color: var(--prev-color-text-secondary);
   font-size: 12px;
   line-height: 1.5;
   margin-top: 5px;
@@ -201,7 +201,7 @@ function handleSubmit() {
   gap: 8px;
 }
 .text-gray {
-  color: #909399;
+  color: var(--prev-color-text-secondary);
 }
 .form-actions {
   margin-top: 24px;
diff --git a/frontend/admin/src/pages/driver/emailDriver/edit.vue b/frontend/admin/src/pages/driver/emailDriver/edit.vue
index b1b2a0489..7541b5a9b 100644
--- a/frontend/admin/src/pages/driver/emailDriver/edit.vue
+++ b/frontend/admin/src/pages/driver/emailDriver/edit.vue
@@ -205,7 +205,7 @@ function handleSubmit() {
 
 <style scoped>
 .form-tip {
-  color: #909399;
+  color: var(--prev-color-text-secondary);
   font-size: 12px;
   line-height: 1.5;
   margin-top: 5px;
@@ -234,14 +234,14 @@ function handleSubmit() {
 .help-doc-title {
   font-weight: 700;
   font-size: 14px;
-  color: #303133;
+  color: var(--prev-color-text-regular);
   margin-bottom: 10px;
 }
 .help-doc-steps {
   margin: 0;
   padding-left: 20px;
   line-height: 1.8;
-  color: #606266;
+  color: var(--prev-color-text-primary);
   font-size: 13px;
 }
 .form-actions {
diff --git a/frontend/admin/src/pages/driver/expressDriver/companyEdit.vue b/frontend/admin/src/pages/driver/expressDriver/companyEdit.vue
index bc0198549..769df463a 100644
--- a/frontend/admin/src/pages/driver/expressDriver/companyEdit.vue
+++ b/frontend/admin/src/pages/driver/expressDriver/companyEdit.vue
@@ -319,7 +319,7 @@ function handleSubmit() {
   left: 0;
   right: 0;
   padding: 16px 24px;
-  background: #fff;
+  background: var(--prev-bg-white);
   border-top: 1px solid #e8e8e8;
   text-align: right;
   z-index: 10;
diff --git a/frontend/admin/src/pages/driver/expressDriver/edit.vue b/frontend/admin/src/pages/driver/expressDriver/edit.vue
index 45347d781..4331f339d 100644
--- a/frontend/admin/src/pages/driver/expressDriver/edit.vue
+++ b/frontend/admin/src/pages/driver/expressDriver/edit.vue
@@ -190,7 +190,7 @@ function handleSubmit() {
 
 <style scoped>
 .form-tip {
-  color: #909399;
+  color: var(--prev-color-text-secondary);
   font-size: 12px;
   line-height: 1.5;
   margin-top: 5px;
diff --git a/frontend/admin/src/pages/driver/invoiceDriver/edit.vue b/frontend/admin/src/pages/driver/invoiceDriver/edit.vue
index f28cd3629..3f71b3d99 100644
--- a/frontend/admin/src/pages/driver/invoiceDriver/edit.vue
+++ b/frontend/admin/src/pages/driver/invoiceDriver/edit.vue
@@ -187,7 +187,7 @@ function handleSubmit() {
 
 <style scoped>
 .form-tip {
-  color: #909399;
+  color: var(--prev-color-text-secondary);
   font-size: 12px;
   line-height: 1.5;
   margin-top: 5px;
diff --git a/frontend/admin/src/pages/driver/logisticsDriver/edit.vue b/frontend/admin/src/pages/driver/logisticsDriver/edit.vue
index 5e89a7248..f2a8c25e6 100644
--- a/frontend/admin/src/pages/driver/logisticsDriver/edit.vue
+++ b/frontend/admin/src/pages/driver/logisticsDriver/edit.vue
@@ -187,7 +187,7 @@ function handleSubmit() {
 
 <style scoped>
 .form-tip {
-  color: #909399;
+  color: var(--prev-color-text-secondary);
   font-size: 12px;
   line-height: 1.5;
   margin-top: 5px;
@@ -211,14 +211,14 @@ function handleSubmit() {
 .help-doc-title {
   font-weight: 700;
   font-size: 14px;
-  color: #303133;
+  color: var(--prev-color-text-regular);
   margin-bottom: 10px;
 }
 .help-doc-steps {
   margin: 0;
   padding-left: 20px;
   line-height: 1.8;
-  color: #606266;
+  color: var(--prev-color-text-primary);
   font-size: 13px;
 }
 .form-actions {
diff --git a/frontend/admin/src/pages/driver/smsDriver/edit.vue b/frontend/admin/src/pages/driver/smsDriver/edit.vue
index 4be4269cf..e77b96885 100644
--- a/frontend/admin/src/pages/driver/smsDriver/edit.vue
+++ b/frontend/admin/src/pages/driver/smsDriver/edit.vue
@@ -212,7 +212,7 @@ function handleSubmit() {
 
 <style scoped>
 .form-tip {
-  color: #909399;
+  color: var(--prev-color-text-secondary);
   font-size: 12px;
   line-height: 1.5;
   margin-top: 5px;
@@ -236,14 +236,14 @@ function handleSubmit() {
 .help-doc-title {
   font-weight: 700;
   font-size: 14px;
-  color: #303133;
+  color: var(--prev-color-text-regular);
   margin-bottom: 10px;
 }
 .help-doc-steps {
   margin: 0;
   padding-left: 20px;
   line-height: 1.8;
-  color: #606266;
+  color: var(--prev-color-text-primary);
   font-size: 13px;
 }
 .form-actions {
diff --git a/frontend/admin/src/pages/driver/uploadDriver/edit.vue b/frontend/admin/src/pages/driver/uploadDriver/edit.vue
index a4edff297..0f02e5619 100644
--- a/frontend/admin/src/pages/driver/uploadDriver/edit.vue
+++ b/frontend/admin/src/pages/driver/uploadDriver/edit.vue
@@ -567,7 +567,7 @@ function handleSubmit() {
   .help-doc-steps {
     .help-doc-step {
       font-size: 13px;
-      color: #606266;
+      color: var(--prev-color-text-primary);
       line-height: 2;
       padding-left: 10px;
     }
diff --git a/frontend/admin/src/pages/finance/billingRecords/orderDetall.vue b/frontend/admin/src/pages/finance/billingRecords/orderDetall.vue
index 595efdd9b..fb6a66e32 100644
--- a/frontend/admin/src/pages/finance/billingRecords/orderDetall.vue
+++ b/frontend/admin/src/pages/finance/billingRecords/orderDetall.vue
@@ -133,7 +133,7 @@ function getOrderInfo() {
     .box-title {
       padding-top: 20px;
       font-size: 16px;
-      color: #333;
+      color: var(--prev-color-text-regular);
     }
 
     .msg-wrapper {
@@ -146,12 +146,12 @@ function getOrderInfo() {
         .item {
           flex: 1;
           margin-bottom: 15px;
-          color: #606266;
+          color: var(--prev-color-text-primary);
           font-size: 13px;
           span {
             font-size: 13px;
             font-weight: 400;
-            color: #909399;
+            color: var(--prev-color-text-secondary);
           }
         }
       }
diff --git a/frontend/admin/src/pages/finance/commission/handle/commissionDetails.vue b/frontend/admin/src/pages/finance/commission/handle/commissionDetails.vue
index 018846276..719338933 100644
--- a/frontend/admin/src/pages/finance/commission/handle/commissionDetails.vue
+++ b/frontend/admin/src/pages/finance/commission/handle/commissionDetails.vue
@@ -196,7 +196,7 @@ defineExpose({ modals, getDetails, getList });
       &-desc {
         &-sp {
           width: 33.33%;
-          color: #17233d;
+          color: var(--prev-color-text-regular);
           font-size: 12px;
           display: inline-block;
           padding-bottom: 10px;
diff --git a/frontend/admin/src/pages/finance/components/commissionDetails/index.vue b/frontend/admin/src/pages/finance/components/commissionDetails/index.vue
index 8c3b0882c..fcf7ac6c4 100644
--- a/frontend/admin/src/pages/finance/components/commissionDetails/index.vue
+++ b/frontend/admin/src/pages/finance/components/commissionDetails/index.vue
@@ -247,7 +247,7 @@ function cancel() {
   font-size: 13px;
   font-family: PingFangSC-Regular, PingFang SC;
   font-weight: 400;
-  color: rgba(0, 0, 0, 0.85);
+  color: var(--prev-color-text-regular);
   cursor: pointer;
 }
 .table {
@@ -280,7 +280,7 @@ function cancel() {
       &-desc {
         &-sp {
           width: 33.33%;
-          color: #17233d;
+          color: var(--prev-color-text-regular);
           font-size: 12px;
           display: inline-block;
         }
diff --git a/frontend/admin/src/pages/index/components/baseInfo.vue b/frontend/admin/src/pages/index/components/baseInfo.vue
index 28528c0ee..9dc6d5247 100644
--- a/frontend/admin/src/pages/index/components/baseInfo.vue
+++ b/frontend/admin/src/pages/index/components/baseInfo.vue
@@ -78,7 +78,7 @@ onMounted(() => {
   margin-bottom: 10px;
   font-size: 32px;
   font-weight: 400;
-  color: #333333;
+  color: var(--prev-color-text-regular);
   line-height: 40px;
 }
 
diff --git a/frontend/admin/src/pages/index/components/gridMenu.vue b/frontend/admin/src/pages/index/components/gridMenu.vue
index c29453835..5f8064618 100644
--- a/frontend/admin/src/pages/index/components/gridMenu.vue
+++ b/frontend/admin/src/pages/index/components/gridMenu.vue
@@ -121,7 +121,7 @@ const grid = {
     margin-top: 8px;
     font-size: 14px;
     font-weight: 400;
-    color: #333333;
+    color: var(--prev-color-text-regular);
     line-height: 22px;
     white-space: nowrap;
   }
diff --git a/frontend/admin/src/pages/order/afterSale/detail.vue b/frontend/admin/src/pages/order/afterSale/detail.vue
index c65ecab3b..8f3a44763 100644
--- a/frontend/admin/src/pages/order/afterSale/detail.vue
+++ b/frontend/admin/src/pages/order/afterSale/detail.vue
@@ -925,13 +925,13 @@ onMounted(() => {
       .title {
         font-size: 16px;
         font-weight: 500;
-        color: rgba(0, 0, 0, 0.85);
+        color: var(--prev-color-text-regular);
         margin-bottom: 6px;
       }
 
       .sub {
         font-size: 13px;
-        color: #606266;
+        color: var(--prev-color-text-primary);
       }
     }
   }
@@ -971,7 +971,7 @@ onMounted(() => {
   margin: 24px 0 12px;
   font-size: 14px;
   font-weight: 500;
-  color: #303133;
+  color: var(--prev-color-text-regular);
   padding-left: 10px;
   border-left: 3px solid var(--prev-color-primary, #409eff);
 }
@@ -986,7 +986,7 @@ onMounted(() => {
   width: 80px;
   height: 80px;
   border-radius: 4px;
-  border: 1px solid #ebeef5;
+  border: 1px solid var(--prev-border-color-lighter);
 }
 
 .product-img {
@@ -1009,7 +1009,7 @@ onMounted(() => {
   background: #f5f7fa;
   border-radius: 4px;
   font-size: 13px;
-  color: #606266;
+  color: var(--prev-color-text-primary);
   white-space: pre-wrap;
   word-break: break-all;
 }
@@ -1026,7 +1026,7 @@ onMounted(() => {
 
     .action-tip {
       font-size: 14px;
-      color: #606266;
+      color: var(--prev-color-text-primary);
 
       i {
         margin-right: 6px;
diff --git a/frontend/admin/src/pages/order/invoice/index.vue b/frontend/admin/src/pages/order/invoice/index.vue
index 1ee436b5e..38d88125a 100644
--- a/frontend/admin/src/pages/order/invoice/index.vue
+++ b/frontend/admin/src/pages/order/invoice/index.vue
@@ -499,7 +499,7 @@ function onClickTab() {
 <style lang="scss" scoped>
 .order_box .list {
   font-size: 12px;
-  color: #17233d;
+  color: var(--prev-color-text-regular);
   border-bottom: 1px solid #e7eaec;
   margin: 0 10px;
   padding-bottom: 22px;
diff --git a/frontend/admin/src/pages/order/invoice/orderDetall.vue b/frontend/admin/src/pages/order/invoice/orderDetall.vue
index e1448a2ac..c37631c17 100644
--- a/frontend/admin/src/pages/order/invoice/orderDetall.vue
+++ b/frontend/admin/src/pages/order/invoice/orderDetall.vue
@@ -134,7 +134,7 @@ onMounted(() => {
       padding-top: 20px;
       font-size: 15px;
       font-weight: 500;
-      color: #303133;
+      color: var(--prev-color-text-regular);
       line-height: 15px;
     }
 
@@ -148,12 +148,12 @@ onMounted(() => {
         .item {
           flex: 1;
           margin-bottom: 15px;
-          color: #606266;
+          color: var(--prev-color-text-primary);
           font-size: 13px;
           span {
             font-size: 13px;
             font-weight: 400;
-            color: #909399;
+            color: var(--prev-color-text-secondary);
           }
         }
       }
diff --git a/frontend/admin/src/pages/order/orderCenter/components/DetailLogistics.vue b/frontend/admin/src/pages/order/orderCenter/components/DetailLogistics.vue
index a8b3a8452..8321f48c7 100644
--- a/frontend/admin/src/pages/order/orderCenter/components/DetailLogistics.vue
+++ b/frontend/admin/src/pages/order/orderCenter/components/DetailLogistics.vue
@@ -80,8 +80,8 @@ function copyNum() {
   display: flex;
   align-items: center;
   padding: 20px 24px;
-  background: #f5f7fa;
-  border-bottom: 1px solid #ebeef5;
+  background: var(--prev-bg-color);
+  border-bottom: 1px solid var(--prev-border-color-lighter);
 
   .express-icon {
     width: 48px;
@@ -99,7 +99,7 @@ function copyNum() {
   .express-company {
     font-size: 15px;
     font-weight: 600;
-    color: #303133;
+    color: var(--prev-color-text-regular);
     margin-bottom: 6px;
   }
 
@@ -109,18 +109,18 @@ function copyNum() {
     font-size: 13px;
 
     .label {
-      color: #909399;
+      color: var(--prev-color-text-secondary);
       margin-right: 8px;
       flex-shrink: 0;
     }
 
     .value {
-      color: #606266;
+      color: var(--prev-color-text-primary);
       word-break: break-all;
     }
 
     .copy-btn {
-      color: #909399;
+      color: var(--prev-color-text-secondary);
       cursor: pointer;
       margin-left: 8px;
       font-size: 14px;
@@ -164,7 +164,7 @@ function copyNum() {
 .track-item {
   .track-status {
     font-size: 14px;
-    color: #606266;
+    color: var(--prev-color-text-primary);
     line-height: 1.6;
     margin-bottom: 4px;
 
@@ -182,7 +182,7 @@ function copyNum() {
 
 .empty-logistics {
   text-align: center;
-  color: #909399;
+  color: var(--prev-color-text-secondary);
   padding: 60px 0;
   font-size: 14px;
 }
diff --git a/frontend/admin/src/pages/order/orderCenter/components/DetailOrderInfo.vue b/frontend/admin/src/pages/order/orderCenter/components/DetailOrderInfo.vue
index 1b13e01d5..a2bbe4572 100644
--- a/frontend/admin/src/pages/order/orderCenter/components/DetailOrderInfo.vue
+++ b/frontend/admin/src/pages/order/orderCenter/components/DetailOrderInfo.vue
@@ -300,7 +300,7 @@ function buildAddress(addr) {
     border-left: 3px solid var(--prev-color-primary);
     font-size: 15px;
     line-height: 15px;
-    color: #303133;
+    color: var(--prev-color-text-regular);
   }
 
   .list {
@@ -358,7 +358,7 @@ function buildAddress(addr) {
 
 .goods-table {
   margin-top: 16px;
-  border: 1px solid #ebeef5;
+  border: 1px solid var(--prev-border-color-lighter);
   border-radius: 4px;
 
   .goods-header,
@@ -371,14 +371,14 @@ function buildAddress(addr) {
   }
 
   .goods-header {
-    background: #fafafa;
-    color: #909399;
+    background: var(--prev-bg-color);
+    color: var(--prev-color-text-secondary);
     font-weight: 500;
-    border-bottom: 1px solid #ebeef5;
+    border-bottom: 1px solid var(--prev-border-color-lighter);
   }
 
   .goods-row + .goods-row {
-    border-top: 1px solid #ebeef5;
+    border-top: 1px solid var(--prev-border-color-lighter);
   }
 
   .col-goods {
@@ -399,7 +399,7 @@ function buildAddress(addr) {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      color: #303133;
+      color: var(--prev-color-text-regular);
     }
   }
 
@@ -412,7 +412,7 @@ function buildAddress(addr) {
   }
 
   .col-subtotal {
-    color: #303133;
+    color: var(--prev-color-text-regular);
     font-weight: 500;
   }
 }
diff --git a/frontend/admin/src/pages/order/orderCenter/components/DetailOrderList.vue b/frontend/admin/src/pages/order/orderCenter/components/DetailOrderList.vue
index 93fe9b4f8..a30202f75 100644
--- a/frontend/admin/src/pages/order/orderCenter/components/DetailOrderList.vue
+++ b/frontend/admin/src/pages/order/orderCenter/components/DetailOrderList.vue
@@ -37,12 +37,12 @@ defineProps({
       .tl-title {
         font-size: 13px;
         font-weight: 500;
-        color: #303133;
+        color: var(--prev-color-text-regular);
       }
       .tl-desc {
         margin-left: 8px;
         font-size: 12px;
-        color: #909399;
+        color: var(--prev-color-text-secondary);
       }
     }
   }
diff --git a/frontend/admin/src/pages/order/orderCenter/detail.vue b/frontend/admin/src/pages/order/orderCenter/detail.vue
index 8d1dd4804..23b9a7a09 100644
--- a/frontend/admin/src/pages/order/orderCenter/detail.vue
+++ b/frontend/admin/src/pages/order/orderCenter/detail.vue
@@ -165,14 +165,14 @@ onMounted(() => {
       min-width: 0;
       padding-left: 12px;
       font-size: 13px;
-      color: #606266;
+      color: var(--prev-color-text-primary);
 
       .title {
         margin-bottom: 10px;
         font-weight: 500;
         font-size: 16px;
         line-height: 16px;
-        color: rgba(0, 0, 0, 0.85);
+        color: var(--prev-color-text-regular);
       }
     }
   }
@@ -189,7 +189,7 @@ onMounted(() => {
       width: 200px;
       font-size: 14px;
       line-height: 14px;
-      color: rgba(0, 0, 0, 0.85);
+      color: var(--prev-color-text-regular);
 
       .title {
         margin-bottom: 12px;
@@ -206,12 +206,9 @@ onMounted(() => {
   }
 }
 
-:deep(.el-drawer__body) {
-  padding: 20px 0;
-}
-
 :deep(.el-tabs--border-card > .el-tabs__content) {
-  padding: 0 35px;
+  /* 独立路由详情页：与 .head 的 30px 左右缩进对齐 */
+  padding: 0 30px;
 }
 
 :deep(.el-tabs--border-card > .el-tabs__header),
@@ -225,7 +222,7 @@ onMounted(() => {
   border-top: 2px solid var(--prev-color-primary);
   font-size: 13px;
   font-weight: 500;
-  color: #303133;
+  color: var(--prev-color-text-regular);
   line-height: 16px;
 }
 
@@ -241,7 +238,7 @@ onMounted(() => {
   width: 92px !important;
   font-size: 13px;
   font-weight: 400;
-  color: #303133;
+  color: var(--prev-color-text-regular);
   line-height: 16px;
 }
 
diff --git a/frontend/admin/src/pages/order/orderCenter/index.vue b/frontend/admin/src/pages/order/orderCenter/index.vue
index ac48ddd78..6a25fefe8 100644
--- a/frontend/admin/src/pages/order/orderCenter/index.vue
+++ b/frontend/admin/src/pages/order/orderCenter/index.vue
@@ -619,7 +619,7 @@ onMounted(() => {
     .stat-value {
       font-size: 24px;
       font-weight: bold;
-      color: #333;
+      color: var(--prev-color-text-regular);
     }
 
     .stat-label {
diff --git a/frontend/admin/src/pages/product/labelList/index.vue b/frontend/admin/src/pages/product/labelList/index.vue
index 0b8a9411c..e0166a76a 100644
--- a/frontend/admin/src/pages/product/labelList/index.vue
+++ b/frontend/admin/src/pages/product/labelList/index.vue
@@ -497,8 +497,6 @@ function bindMenuItem(name, index) {
 
 .left-wrapper {
   height: 920px;
-  background: #fff;
-  border-right: 1px solid #f2f2f2;
 }
 .w-420 {
   width: 420px;
diff --git a/frontend/admin/src/pages/product/productAdd/productAdd.scss b/frontend/admin/src/pages/product/productAdd/productAdd.scss
index 108ebf63e..76e048836 100644
--- a/frontend/admin/src/pages/product/productAdd/productAdd.scss
+++ b/frontend/admin/src/pages/product/productAdd/productAdd.scss
@@ -347,6 +347,26 @@
   padding: 40px 20px;
   padding-top: 50px;
   margin: 0 auto;
+
+  /* 深色模式：白色手机壳图（"详情预览"标题烧在图里）改为深色面板 + CSS 标题，
+     编辑区已跟随主题，预览保持同观感（2026-09-28 用户裁定） */
+  html[data-theme='dark'] & {
+    background: var(--prev-bg-white);
+    border: 1px solid var(--prev-border-color-light);
+    border-radius: 24px;
+
+    &::before {
+      content: '详情预览';
+      display: block;
+      height: 40px;
+      margin: -50px -20px 10px;
+      line-height: 40px;
+      text-align: center;
+      font-size: 14px;
+      color: var(--prev-color-text-regular);
+    }
+  }
+
   .content {
     height: 560px;
     overflow: hidden;
diff --git a/frontend/admin/src/pages/setting/agreement/index.vue b/frontend/admin/src/pages/setting/agreement/index.vue
index d3ccc4f40..f44846dd4 100644
--- a/frontend/admin/src/pages/setting/agreement/index.vue
+++ b/frontend/admin/src/pages/setting/agreement/index.vue
@@ -198,7 +198,7 @@ fetchList();
   line-height: 54px !important;
 }
 .agreemant {
-  background-color: #fff;
+  background-color: var(--prev-bg-white);
 }
 .content {
   padding: 10px 16px;
@@ -211,6 +211,14 @@ fetchList();
   padding: 40px 20px;
   padding-top: 50px;
   margin: 0 auto 0 20px;
+
+  /* 深色模式：白色手机壳图改为深色面板，与富文本编辑区同观感 */
+  html[data-theme='dark'] & {
+    background: var(--prev-bg-white);
+    border: 1px solid var(--prev-border-color-light);
+    border-radius: 24px;
+  }
+
   .content {
     height: 560px;
     overflow: hidden;
diff --git a/frontend/admin/src/pages/setting/express/index.vue b/frontend/admin/src/pages/setting/express/index.vue
index 4c8a54db0..8104d1cd5 100644
--- a/frontend/admin/src/pages/setting/express/index.vue
+++ b/frontend/admin/src/pages/setting/express/index.vue
@@ -217,7 +217,7 @@ getConfig();
   width: 500px;
 }
 .form-tip {
-  color: #909399;
+  color: var(--prev-color-text-secondary);
   font-size: 12px;
   line-height: 1.5;
   margin-top: 5px;
diff --git a/frontend/admin/src/pages/setting/link/index.vue b/frontend/admin/src/pages/setting/link/index.vue
index 1c013b100..43cd20798 100644
--- a/frontend/admin/src/pages/setting/link/index.vue
+++ b/frontend/admin/src/pages/setting/link/index.vue
@@ -345,7 +345,7 @@ onMounted(() => {
 .box {
   width: 100%;
   height: 100%;
-  background: #fff;
+  background: var(--prev-bg-white);
 }
 :deep(.el-card__body) {
   min-height: 700px;
@@ -358,11 +358,11 @@ onMounted(() => {
   position: absolute;
   white-space: nowrap;
   z-index: 9;
-  background: #eee;
+  background: var(--prev-bg-color);
   height: 20px;
   line-height: 20px;
-  color: #555;
-  border: 1px solid #ebebeb;
+  color: var(--prev-color-text-primary);
+  border: 1px solid var(--prev-border-color-light);
   padding: 0 5px;
   left: 56px;
   bottom: -18px;
@@ -379,12 +379,12 @@ onMounted(() => {
 }
 .Nav {
   width: 100%;
-  border-right: 1px solid #eee;
+  border-right: 1px solid var(--prev-border-color-lighter);
   min-width: 220px;
   max-width: max-content;
 }
 :deep(.tree .is-current) {
-  background-color: #fff !important;
+  background-color: var(--prev-bg-white) !important;
 }
 .trees-coadd {
   width: 100%;
@@ -431,11 +431,11 @@ onMounted(() => {
         padding-right: 20px;
         font-size: 13px;
         font-weight: 400;
-        color: rgba(0, 0, 0, 0.6);
+        color: var(--prev-color-text-primary);
         line-height: 13px;
       }
       :deep(.is-current) {
-        background: #f1f9ff !important;
+        background: var(--prev-color-primary-light-9) !important;
         color: var(--prev-color-primary) !important;
       }
       :deep(.is-current .custom-tree-node) {
@@ -471,7 +471,7 @@ onMounted(() => {
 .Modal {
   width: 100%;
   height: 100%;
-  background: #fff !important;
+  background: var(--prev-bg-white) !important;
 }
 .fill-window {
   height: 100vh;
@@ -519,7 +519,7 @@ onMounted(() => {
 }
 
 .card-tree {
-  background: #fff;
+  background: var(--prev-bg-white);
   height: 72px;
   box-sizing: border-box;
   overflow-x: scroll; /* 设置溢出滚动 */
diff --git a/frontend/admin/src/pages/setting/membershipLevel/index.vue b/frontend/admin/src/pages/setting/membershipLevel/index.vue
index 1eedfd2c0..0222a244e 100644
--- a/frontend/admin/src/pages/setting/membershipLevel/index.vue
+++ b/frontend/admin/src/pages/setting/membershipLevel/index.vue
@@ -559,8 +559,6 @@ onMounted(() => {
 }
 .left-wrapper {
   height: 904px;
-  background: #fff;
-  border-right: 1px solid #f2f2f2;
 }
 .menu-item {
   position: relative;
@@ -619,7 +617,7 @@ onMounted(() => {
   border: 1px solid #dcdee2 !important;
 }
 .headers {
-  background-color: #fff;
+  background-color: var(--prev-bg-white);
   margin-bottom: 20px;
 }
 :deep(.ivu-modal-mask) {
diff --git a/frontend/admin/src/pages/setting/notification/log/index.vue b/frontend/admin/src/pages/setting/notification/log/index.vue
index ff9a41de7..2a78ae51a 100644
--- a/frontend/admin/src/pages/setting/notification/log/index.vue
+++ b/frontend/admin/src/pages/setting/notification/log/index.vue
@@ -321,7 +321,7 @@ getStatistics();
   .stat-value {
     font-size: 28px;
     font-weight: bold;
-    color: #303133;
+    color: var(--prev-color-text-regular);
   }
   &.success .stat-value {
     color: #67c23a;
@@ -334,7 +334,7 @@ getStatistics();
   }
   .stat-label {
     font-size: 14px;
-    color: #909399;
+    color: var(--prev-color-text-secondary);
     margin-top: 5px;
   }
 }
diff --git a/frontend/admin/src/pages/setting/notification/notificationEdit.vue b/frontend/admin/src/pages/setting/notification/notificationEdit.vue
index be7c25c69..a6436f45c 100644
--- a/frontend/admin/src/pages/setting/notification/notificationEdit.vue
+++ b/frontend/admin/src/pages/setting/notification/notificationEdit.vue
@@ -583,7 +583,7 @@ if (!id.value) {
 }
 
 .demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-content > .ivu-tabs-tabpane {
-  background: #fff;
+  background: var(--prev-bg-white);
   padding: 16px;
 }
 
@@ -597,7 +597,7 @@ if (!id.value) {
 
 .tabs {
   padding: 0 30px;
-  background-color: #fff;
+  background-color: var(--prev-bg-white);
 }
 
 .trip {
diff --git a/frontend/admin/src/pages/setting/systemMenus/components/menusFrom.vue b/frontend/admin/src/pages/setting/systemMenus/components/menusFrom.vue
index 759ab719c..2b9c90bd6 100644
--- a/frontend/admin/src/pages/setting/systemMenus/components/menusFrom.vue
+++ b/frontend/admin/src/pages/setting/systemMenus/components/menusFrom.vue
@@ -419,7 +419,7 @@ defineExpose({ modals, valids, getAddFrom });
   margin: 5px;
   border-radius: 3px;
   padding: 10px;
-  color: #333;
+  color: var(--prev-color-text-regular);
   cursor: pointer;
   transition: all 0.1s;
 }
diff --git a/frontend/admin/src/pages/setting/systemMenus/index.vue b/frontend/admin/src/pages/setting/systemMenus/index.vue
index e7e48c3df..47b36e1b0 100644
--- a/frontend/admin/src/pages/setting/systemMenus/index.vue
+++ b/frontend/admin/src/pages/setting/systemMenus/index.vue
@@ -500,7 +500,7 @@ onMounted(() => {
 <style scoped lang="scss">
 .vxeTable {
   > .vxe-table--header-wrapper {
-    background: #fff !important;
+    background: var(--prev-bg-white) !important;
   }
 
   .icon {
@@ -548,7 +548,7 @@ onMounted(() => {
   margin: 5px;
   border-radius: 3px;
   padding: 10px;
-  color: #333;
+  color: var(--prev-color-text-regular);
   cursor: pointer;
   transition: all 0.1s;
 }
diff --git a/frontend/admin/src/pages/setting/user/index.vue b/frontend/admin/src/pages/setting/user/index.vue
index 338a8c106..9bde54cca 100644
--- a/frontend/admin/src/pages/setting/user/index.vue
+++ b/frontend/admin/src/pages/setting/user/index.vue
@@ -118,7 +118,7 @@ function handleSubmit() {
     width: 100%;
     height: 100%;
     border-radius: 50%;
-    border: 1px solid #f2f2f2;
+    border: 1px solid var(--prev-border-color-lighter);
   }
 }
 </style>
diff --git a/frontend/admin/src/pages/statistic/transaction/components/toDay.vue b/frontend/admin/src/pages/statistic/transaction/components/toDay.vue
index cf3a0d7a9..940814b89 100644
--- a/frontend/admin/src/pages/statistic/transaction/components/toDay.vue
+++ b/frontend/admin/src/pages/statistic/transaction/components/toDay.vue
@@ -468,7 +468,7 @@ function getOrderUser() {}
 }
 
 .br {
-  border-right: 1px solid rgba(0, 0, 0, 0.1);
+  border-right: 1px solid var(--prev-border-color-lighter);
 }
 
 .toDay {
@@ -485,14 +485,14 @@ function getOrderUser() {}
 
   &-time {
     font-size: 12px;
-    color: #8c8c8c;
+    color: var(--prev-color-text-secondary);
     margin-bottom: 5px;
   }
 }
 
 .title {
   font-size: 16px;
-  color: #000000;
+  color: var(--prev-color-text-regular);
   font-weight: 500;
 }
 
@@ -500,7 +500,7 @@ function getOrderUser() {}
   i {
     font-style: normal;
     font-size: 21px;
-    color: #000;
+    color: var(--prev-color-text-regular);
   }
 }
 </style>
diff --git a/frontend/admin/src/pages/statistic/transaction/components/transaction.vue b/frontend/admin/src/pages/statistic/transaction/components/transaction.vue
index 07b377fe7..6390e2e68 100644
--- a/frontend/admin/src/pages/statistic/transaction/components/transaction.vue
+++ b/frontend/admin/src/pages/statistic/transaction/components/transaction.vue
@@ -285,11 +285,11 @@ function excel() {
 .header {
   &-title {
     font-size: 16px;
-    color: rgba(0, 0, 0, 0.85);
+    color: var(--prev-color-text-regular);
   }
   &-time {
     font-size: 12px;
-    color: #000000;
+    color: var(--prev-color-text-secondary);
     opacity: 0.45;
   }
 }
@@ -331,20 +331,20 @@ function excel() {
 
 .info {
   .sp1 {
-    color: #666;
+    color: var(--prev-color-text-primary);
     font-size: 14px;
     display: block;
   }
   .sp2 {
     font-weight: 400;
     font-size: 30px;
-    color: rgba(0, 0, 0, 0.85);
+    color: var(--prev-color-text-regular);
     display: block;
   }
   .sp3 {
     font-size: 12px;
     font-weight: 400;
-    color: rgba(0, 0, 0, 0.45);
+    color: var(--prev-color-text-secondary);
     display: block;
   }
 }
diff --git a/frontend/admin/src/pages/system/auth/index.vue b/frontend/admin/src/pages/system/auth/index.vue
index 88e6919f7..77ef8d37c 100644
--- a/frontend/admin/src/pages/system/auth/index.vue
+++ b/frontend/admin/src/pages/system/auth/index.vue
@@ -77,7 +77,7 @@ onMounted(() => {
 .head {
   font-weight: 400;
   font-size: 14px;
-  color: #303133;
+  color: var(--prev-color-text-regular);
   margin-bottom: 20px;
 }
 
diff --git a/frontend/admin/src/pages/system/backendRouting/index.vue b/frontend/admin/src/pages/system/backendRouting/index.vue
index c35039881..7efea27ff 100644
--- a/frontend/admin/src/pages/system/backendRouting/index.vue
+++ b/frontend/admin/src/pages/system/backendRouting/index.vue
@@ -1197,7 +1197,7 @@ getInterfaceList('one');
   border-right: 1px solid #f2f2f2;
 }
 .card-tree {
-  background: #fff;
+  background: var(--prev-bg-white);
   height: 72px;
   box-sizing: border-box;
   overflow-x: scroll; /* 设置溢出滚动 */
@@ -1212,7 +1212,7 @@ getInterfaceList('one');
   display: none; /* Chrome Safari */
 }
 .tabs {
-  background: #fff;
+  background: var(--prev-bg-white);
   padding-left: 20px;
   border-radius: 5px 5px 0 0;
 }
@@ -1220,16 +1220,15 @@ getInterfaceList('one');
   width: 100%;
   display: flex;
   padding-bottom: 16px;
-  background: #fff;
+  background: var(--prev-bg-white);
   border-radius: 6px;
   .main-btn {
     display: flex;
     position: sticky;
     padding: 0px 5px 0 15px;
     width: 100%;
-    background: #fff;
     top: 0px;
-    background-color: rgba(255, 255, 255, 0.6);
+    background-color: color-mix(in srgb, var(--prev-bg-white) 60%, transparent);
     backdrop-filter: blur(4px);
     z-index: 99;
   }
@@ -1269,7 +1268,7 @@ getInterfaceList('one');
     }
     .open {
       font-weight: 500;
-      color: #333;
+      color: var(--prev-color-text-regular);
     }
   }
   :deep(.vtl-node-main .vtl-operation) {
@@ -1296,7 +1295,7 @@ getInterfaceList('one');
     height: 18px;
   }
   :deep(.vtl-node-content:hover .add:hover) {
-    background-color: #fff;
+    background-color: var(--prev-bg-white);
     .pop-menu {
       font-size: 16px;
     }
diff --git a/frontend/admin/src/pages/system/clear/index.vue b/frontend/admin/src/pages/system/clear/index.vue
index 2f4e8b6b8..81e510000 100644
--- a/frontend/admin/src/pages/system/clear/index.vue
+++ b/frontend/admin/src/pages/system/clear/index.vue
@@ -94,7 +94,7 @@ function clearlog() {
   margin-top: 150px;
 }
 .clear_box {
-  border: 1px solid #dadfe6;
+  border: 1px solid var(--prev-border-color-lighter);
   border-radius: 3px;
   display: flex;
   flex-direction: column;
@@ -105,12 +105,12 @@ function clearlog() {
   box-sizing: border-box;
   .clear_box_sp1 {
     font-size: 16px;
-    color: #000000;
+    color: var(--prev-color-text-regular);
     display: block;
   }
   .clear_box_sp2 {
     font-size: 14px;
-    color: #808695;
+    color: var(--prev-color-text-secondary);
     display block {
       margin: 12px 0;
     }
diff --git a/frontend/admin/src/pages/system/codeGeneration/list.vue b/frontend/admin/src/pages/system/codeGeneration/list.vue
index 3997c7f60..d1064ccfe 100644
--- a/frontend/admin/src/pages/system/codeGeneration/list.vue
+++ b/frontend/admin/src/pages/system/codeGeneration/list.vue
@@ -607,17 +607,17 @@ onBeforeUnmount(() => {
 
 // 选项卡头部
 :deep(.ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-nav-container) {
-  background-color: #fff;
+  background-color: var(--prev-bg-white);
 }
 .demo-drawer-footer {
   width: 100%;
   position: absolute;
   bottom: 0;
   left: 0;
-  border-top: 1px solid #e8e8e8;
+  border-top: 1px solid var(--prev-border-color-lighter);
   padding: 10px 16px;
   text-align: right;
-  background: #fff;
+  background: var(--prev-bg-white);
 }
 .file {
   position: relative;
diff --git a/frontend/admin/src/pages/system/crontab/createModal.vue b/frontend/admin/src/pages/system/crontab/createModal.vue
index 46fbfdb7c..da8e97e16 100644
--- a/frontend/admin/src/pages/system/crontab/createModal.vue
+++ b/frontend/admin/src/pages/system/crontab/createModal.vue
@@ -358,7 +358,7 @@ defineExpose({ timerInfo });
     width: 28px;
     height: 100%;
     font-size: 12px;
-    color: #333333;
+    color: var(--prev-color-text-regular);
     pointer-events: none;
   }
 }
@@ -379,7 +379,7 @@ defineExpose({ timerInfo });
   right: 0;
   z-index: 1;
   padding: 10px 20px;
-  background-color: #fff;
+  background-color: var(--prev-bg-white);
   border-top: 1px solid #e8e8e8;
   display: flex;
   justify-content: center;
diff --git a/frontend/admin/src/pages/system/crossVersionUpgrade/index.vue b/frontend/admin/src/pages/system/crossVersionUpgrade/index.vue
index 7d920cbf5..b5ce427ef 100644
--- a/frontend/admin/src/pages/system/crossVersionUpgrade/index.vue
+++ b/frontend/admin/src/pages/system/crossVersionUpgrade/index.vue
@@ -812,19 +812,19 @@ onBeforeUnmount(() => {
   .success-title {
     font-size: 18px;
     font-weight: 500;
-    color: #303133;
+    color: var(--prev-color-text-regular);
     margin-bottom: 8px;
   }
 
   .success-desc {
     font-size: 14px;
-    color: #606266;
+    color: var(--prev-color-text-primary);
   }
 }
 .cross-version-upgrade {
   .new-version-summary {
     padding: 24px 0;
-    background: #fff;
+    background: var(--prev-bg-white);
     border-radius: 8px;
     margin-top: 16px;
     margin-bottom: 16px;
@@ -895,7 +895,7 @@ onBeforeUnmount(() => {
     .content-title {
       font-weight: 500;
       font-size: 14px;
-      color: #333;
+      color: var(--prev-color-text-regular);
       padding-bottom: 8px;
       border-bottom: 1px solid #eaeaea;
       margin-bottom: 12px;
@@ -911,7 +911,7 @@ onBeforeUnmount(() => {
       white-space: pre-wrap;
       font-size: 12px;
       line-height: 18px;
-      color: #333;
+      color: var(--prev-color-text-regular);
     }
   }
 
@@ -921,7 +921,7 @@ onBeforeUnmount(() => {
     font-size: 12px;
     font-weight: 400;
     line-height: 20px;
-    color: #333333;
+    color: var(--prev-color-text-regular);
   }
 
   :deep(.agreement-dialog) {
@@ -933,7 +933,7 @@ onBeforeUnmount(() => {
       font-size: 16px !important;
       line-height: 16px !important;
       font-weight: 500;
-      color: #333333;
+      color: var(--prev-color-text-regular);
     }
   }
 
@@ -1160,7 +1160,7 @@ onBeforeUnmount(() => {
       margin-bottom: 10px;
       font-weight: 500;
       padding-bottom: 10px;
-      border-bottom: 1px solid #eee;
+      border-bottom: 1px solid var(--prev-border-color-lighter);
     }
 
     .logs-content {
@@ -1202,7 +1202,7 @@ onBeforeUnmount(() => {
         }
 
         .log-table {
-          color: #606266;
+          color: var(--prev-color-text-primary);
           min-width: 100px;
         }
 
@@ -1212,7 +1212,7 @@ onBeforeUnmount(() => {
         }
 
         .log-message {
-          color: #909399;
+          color: var(--prev-color-text-secondary);
           font-size: 11px;
           margin-left: auto;
         }
diff --git a/frontend/admin/src/pages/system/event/index.vue b/frontend/admin/src/pages/system/event/index.vue
index ab9f62f81..2433014b0 100644
--- a/frontend/admin/src/pages/system/event/index.vue
+++ b/frontend/admin/src/pages/system/event/index.vue
@@ -191,7 +191,7 @@ getCategories();
   .category-title {
     font-size: 16px;
     font-weight: bold;
-    color: #303133;
+    color: var(--prev-color-text-regular);
     margin-bottom: 8px;
   }
 
@@ -207,7 +207,7 @@ getCategories();
   align-items: center;
   font-size: 16px;
   font-weight: bold;
-  color: #303133;
+  color: var(--prev-color-text-regular);
   margin-top: 20px;
   margin-bottom: 10px;
   padding-left: 10px;
@@ -222,7 +222,7 @@ getCategories();
     margin-left: auto;
     font-size: 12px;
     font-weight: normal;
-    color: #909399;
+    color: var(--prev-color-text-secondary);
   }
 }
 
@@ -232,11 +232,11 @@ getCategories();
 
 .event-name {
   font-weight: 500;
-  color: #303133;
+  color: var(--prev-color-text-regular);
 }
 
 .event-desc {
-  color: #606266;
+  color: var(--prev-color-text-primary);
 }
 
 .listener-tag {
diff --git a/frontend/admin/src/pages/system/file/index.vue b/frontend/admin/src/pages/system/file/index.vue
index c0dc03ced..bc5dbda45 100644
--- a/frontend/admin/src/pages/system/file/index.vue
+++ b/frontend/admin/src/pages/system/file/index.vue
@@ -34,7 +34,7 @@ onMounted(() => {
   width: 100%;
   height: 100%;
   padding-top: 15px;
-  background: #fff;
+  background: var(--prev-bg-white);
 }
 :deep(.el-card__body) {
   min-height: 700px;
diff --git a/frontend/admin/src/pages/system/group/list.vue b/frontend/admin/src/pages/system/group/list.vue
index ff39fa10e..f14ecf0f3 100644
--- a/frontend/admin/src/pages/system/group/list.vue
+++ b/frontend/admin/src/pages/system/group/list.vue
@@ -345,8 +345,6 @@ onMounted(() => {
 }
 .left-wrapper {
   height: 904px;
-  background: #fff;
-  border-right: 1px solid #dcdee2;
 }
 .menu-item {
   z-index: 50;
diff --git a/frontend/admin/src/pages/system/group/visualization.vue b/frontend/admin/src/pages/system/group/visualization.vue
index 79f74322b..3215ad407 100644
--- a/frontend/admin/src/pages/system/group/visualization.vue
+++ b/frontend/admin/src/pages/system/group/visualization.vue
@@ -1078,10 +1078,10 @@ onMounted(() => {
   width: 100%;
   margin: 0 auto;
   text-align: center;
-  background-color: #fff;
+  background-color: var(--prev-bg-white);
   bottom: 0;
   padding: 16px;
-  border-top: 3px solid #f5f7f9;
+  border-top: 3px solid var(--prev-border-color-lighter);
 }
 
 .form {
@@ -1096,7 +1096,7 @@ onMounted(() => {
   .goodsTitle .title {
     border-bottom: 2px solid var(--prev-color-primary);
     padding: 0 8px 12px 5px;
-    color: #000;
+    color: var(--prev-color-text-regular);
     font-size: 14px;
   }
 
@@ -1302,9 +1302,9 @@ onMounted(() => {
 
 .table {
   width: 700px;
-  color: #515a6e;
+  color: var(--prev-color-text-primary);
   font-size: 14px;
-  background-color: #fff;
+  background-color: var(--prev-bg-white);
   margin-left: 20px;
 }
 
@@ -1449,7 +1449,7 @@ onMounted(() => {
 }
 
 .box {
-  border-top: 3px solid #f5f7f9;
+  border-top: 3px solid var(--prev-border-color-lighter);
   padding: 10px;
   padding-top: 25px;
   width: 100%;
@@ -1529,8 +1529,6 @@ onMounted(() => {
 
 .left-wrapper {
   min-width: 213px;
-  background: #fff;
-  border-right: 1px solid #f2f2f2;
 }
 
 .menu-item {
@@ -1777,7 +1775,7 @@ onMounted(() => {
 
         .tips {
           font-size: 14px;
-          color: #333333;
+          color: var(--prev-color-text-regular);
           font-weight: 800;
           margin-bottom: 7px;
           margin-top: 10px;
@@ -1785,7 +1783,7 @@ onMounted(() => {
 
         .tips-samll {
           font-size: 12px;
-          color: #333333;
+          color: var(--prev-color-text-regular);
           margin-bottom: 7px;
 
           p {
@@ -1830,7 +1828,7 @@ onMounted(() => {
   display: flex;
   flex-wrap: nowrap;
   padding: 20px;
-  background-color: #fff;
+  background-color: var(--prev-bg-white);
   border-radius: 5px;
 }
 
diff --git a/frontend/admin/src/pages/system/maintain/systemCleardata/index.vue b/frontend/admin/src/pages/system/maintain/systemCleardata/index.vue
index 6d5677fd4..a5996c1c5 100644
--- a/frontend/admin/src/pages/system/maintain/systemCleardata/index.vue
+++ b/frontend/admin/src/pages/system/maintain/systemCleardata/index.vue
@@ -185,7 +185,7 @@ function changeYU() {
   }
 }
 .clear_box {
-  border: 1px solid #dadfe6;
+  border: 1px solid var(--prev-border-color-light);
   border-radius: 3px;
   display: flex;
   flex-direction: column;
@@ -194,12 +194,12 @@ function changeYU() {
   box-sizing: border-box;
   .clear_box_sp1 {
     font-size: 16px;
-    color: #000000;
+    color: var(--prev-color-text-regular);
     display: block;
   }
   .clear_box_sp2 {
     font-size: 14px;
-    color: #808695;
+    color: var(--prev-color-text-secondary);
     display: block;
     margin: 12px 0;
   }
diff --git a/frontend/admin/src/pages/system/maintain/systemDatabackup/index.vue b/frontend/admin/src/pages/system/maintain/systemDatabackup/index.vue
index 987d80bf1..387bc238f 100644
--- a/frontend/admin/src/pages/system/maintain/systemDatabackup/index.vue
+++ b/frontend/admin/src/pages/system/maintain/systemDatabackup/index.vue
@@ -453,7 +453,7 @@ getfileList();
   padding: 3px 5px;
 }
 .mark :deep(.ivu-input) {
-  background: #fff;
+  background: var(--prev-bg-white);
   border-radius: 0.39rem;
 }
 .mark :deep(.ivu-input),
diff --git a/frontend/admin/src/pages/system/onlineUpgrade/index.vue b/frontend/admin/src/pages/system/onlineUpgrade/index.vue
index 3181a8267..eb694ef0b 100644
--- a/frontend/admin/src/pages/system/onlineUpgrade/index.vue
+++ b/frontend/admin/src/pages/system/onlineUpgrade/index.vue
@@ -609,7 +609,7 @@ onUnmounted(() => {
 
 .upgrade .header {
   font-size: 12px;
-  color: #000;
+  color: var(--prev-color-text-regular);
   // border-bottom:1px dotted rgba(221,221,221,1);
   // padding-bottom: 25px;
 }
@@ -682,7 +682,7 @@ onUnmounted(() => {
   line-height: 20px !important;
   border: 0 !important;
   font-size: 16px !important;
-  color: #333333;
+  color: var(--prev-color-text-regular);
   font-weight: 600;
   // background: #eee;
 }
@@ -826,7 +826,7 @@ onUnmounted(() => {
 
   .success {
     font-size: 20px;
-    color: #333333;
+    color: var(--prev-color-text-regular);
     margin-top: 10px;
   }
 }
@@ -935,7 +935,7 @@ onUnmounted(() => {
 .describe h2 {
   font-size: 22px;
   font-weight: 400;
-  color: #333333;
+  color: var(--prev-color-text-regular);
   margin-bottom: 12px;
 }
 
diff --git a/frontend/admin/src/pages/system/plugin/components/PluginCard.vue b/frontend/admin/src/pages/system/plugin/components/PluginCard.vue
index 22f30e832..b3f03b843 100644
--- a/frontend/admin/src/pages/system/plugin/components/PluginCard.vue
+++ b/frontend/admin/src/pages/system/plugin/components/PluginCard.vue
@@ -149,8 +149,8 @@ function compareVersion(a, b) {
   display: flex;
   flex-direction: column;
   padding: 14px 16px;
-  background: #fff;
-  border: 1px solid #e7e7eb;
+  background: var(--prev-bg-white);
+  border: 1px solid var(--prev-border-color-lighter);
   border-radius: 6px;
   transition: box-shadow 0.2s;
 }
@@ -167,7 +167,7 @@ function compareVersion(a, b) {
   min-width: 0;
   font-weight: 600;
   font-size: 15px;
-  color: #17233d;
+  color: var(--prev-color-text-regular);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -180,8 +180,8 @@ function compareVersion(a, b) {
   max-width: 100%;
   font-family: Menlo, Consolas, monospace;
   font-size: 12px;
-  color: #666;
-  background: #f5f7f9;
+  color: var(--prev-color-text-primary);
+  background: var(--prev-bg-color);
   padding: 2px 6px;
   border-radius: 3px;
   overflow: hidden;
@@ -191,7 +191,7 @@ function compareVersion(a, b) {
 .plugin-card__desc {
   margin-top: 8px;
   min-height: 40px;
-  color: #808695;
+  color: var(--prev-color-text-secondary);
   font-size: 13px;
   line-height: 20px;
   display: -webkit-box;
@@ -208,7 +208,7 @@ function compareVersion(a, b) {
 .plugin-card__footer {
   margin-top: auto;
   padding-top: 10px;
-  border-top: 1px solid #f2f3f5;
+  border-top: 1px solid var(--prev-border-color-lighter);
   display: flex;
   align-items: center;
   gap: 8px;
@@ -216,7 +216,7 @@ function compareVersion(a, b) {
 .plugin-card__version {
   flex: 1;
   min-width: 0;
-  color: #999;
+  color: var(--prev-color-text-secondary);
   font-size: 12px;
   white-space: nowrap;
   overflow: hidden;
diff --git a/frontend/admin/src/pages/system/plugin/index.vue b/frontend/admin/src/pages/system/plugin/index.vue
index a5775951b..96dd90c94 100644
--- a/frontend/admin/src/pages/system/plugin/index.vue
+++ b/frontend/admin/src/pages/system/plugin/index.vue
@@ -375,7 +375,7 @@ function handleUpload() {
 /* 分段胶囊切换器 */
 .segment-tabs {
   display: inline-flex;
-  background: #f2f3f5;
+  background: var(--prev-bg-color);
   border-radius: 8px;
   padding: 4px;
   gap: 4px;
@@ -387,16 +387,16 @@ function handleUpload() {
   padding: 7px 22px;
   border-radius: 6px;
   font-size: 14px;
-  color: #4e5969;
+  color: var(--prev-color-text-primary);
   cursor: pointer;
   user-select: none;
   transition: background 0.2s, color 0.2s, box-shadow 0.2s;
 }
 .segment-item:hover {
-  color: #1d2129;
+  color: var(--prev-color-text-regular);
 }
 .segment-item.active {
-  background: #fff;
+  background: var(--prev-bg-white);
   color: var(--el-color-primary);
   font-weight: 600;
   box-shadow: 0 1px 4px rgba(0, 21, 41, 0.1);
@@ -408,8 +408,8 @@ function handleUpload() {
   line-height: 18px;
   border-radius: 9px;
   padding: 0 5px;
-  background: #e5e6eb;
-  color: #86909c;
+  background: var(--prev-bg-color);
+  color: var(--prev-color-text-secondary);
 }
 .segment-item.active .segment-count {
   background: var(--el-color-primary-light-9, #ecf5ff);
@@ -424,12 +424,12 @@ function handleUpload() {
 .group-title {
   font-size: 15px;
   font-weight: 600;
-  color: #17233d;
+  color: var(--prev-color-text-regular);
 }
 /* 驱动类别 tab 数量 */
 .tab-count {
   font-size: 12px;
-  color: #999;
+  color: var(--prev-color-text-secondary);
 }
 /* 驱动 tab 面板顶部留白 */
 .driver-pane {
diff --git a/frontend/admin/src/pages/system/systemMenus/components/menusFrom.vue b/frontend/admin/src/pages/system/systemMenus/components/menusFrom.vue
index 169f7109f..ab711e2a6 100644
--- a/frontend/admin/src/pages/system/systemMenus/components/menusFrom.vue
+++ b/frontend/admin/src/pages/system/systemMenus/components/menusFrom.vue
@@ -472,7 +472,7 @@ defineExpose({ modals, valids, getAddFrom });
   margin: 5px;
   border-radius: 3px;
   padding: 10px;
-  color: #333;
+  color: var(--prev-color-text-regular);
   cursor: pointer;
   transition: all 0.1s;
 }
diff --git a/frontend/admin/src/pages/system/systemMenus/index.vue b/frontend/admin/src/pages/system/systemMenus/index.vue
index 1104c584e..919b12b31 100644
--- a/frontend/admin/src/pages/system/systemMenus/index.vue
+++ b/frontend/admin/src/pages/system/systemMenus/index.vue
@@ -555,7 +555,7 @@ onMounted(() => {
 <style scoped lang="scss">
 .vxeTable {
   > .vxe-table--header-wrapper {
-    background: #fff !important;
+    background: var(--prev-bg-white) !important;
   }
   .icon {
     font-size: 20px;
@@ -600,7 +600,7 @@ onMounted(() => {
   margin: 5px;
   border-radius: 3px;
   padding: 10px;
-  color: #333;
+  color: var(--prev-color-text-regular);
   cursor: pointer;
   transition: all 0.1s;
 }
diff --git a/frontend/admin/src/pages/user/label/index.vue b/frontend/admin/src/pages/user/label/index.vue
index e82afaefe..984973928 100644
--- a/frontend/admin/src/pages/user/label/index.vue
+++ b/frontend/admin/src/pages/user/label/index.vue
@@ -280,8 +280,6 @@ function bindMenuItem(name, index) {
   display: none;
 }
 .left-wrapper {
-  background: #fff;
-  border-right: 1px solid #f2f2f2;
   .tree {
     // height: 100%;
     height: calc(-220px + 100vh);
diff --git a/frontend/admin/src/pages/user/list/handle/userDetails.vue b/frontend/admin/src/pages/user/list/handle/userDetails.vue
index c3b1335be..2576aef4e 100644
--- a/frontend/admin/src/pages/user/list/handle/userDetails.vue
+++ b/frontend/admin/src/pages/user/list/handle/userDetails.vue
@@ -374,7 +374,7 @@ defineExpose({ modals, getDetails });
   border-top: 2px solid var(--prev-color-primary);
   font-size: 13px;
   font-weight: 500;
-  color: #303133;
+  color: var(--prev-color-text-regular);
   line-height: 16px;
 }
 :deep(.el-tabs--border-card > .el-tabs__header .el-tabs__item) {
@@ -388,7 +388,7 @@ defineExpose({ modals, getDetails });
   width: 92px !important;
   font-size: 13px;
   font-weight: 400;
-  color: #303133;
+  color: var(--prev-color-text-regular);
   line-height: 16px;
 }
 :deep(.el-tabs--border-card) {
@@ -423,14 +423,14 @@ defineExpose({ modals, getDetails });
 
       &-title {
         font-size: 13px;
-        color: #000000;
+        color: var(--prev-color-text-regular);
         margin-bottom: 12px;
       }
 
       &-desc {
         &-sp {
           width: 33.33%;
-          color: #17233d;
+          color: var(--prev-color-text-regular);
           font-size: 13px;
           display: inline-block;
         }
@@ -449,7 +449,7 @@ defineExpose({ modals, getDetails });
           }
 
           span:last-child {
-            color: #808695;
+            color: var(--prev-color-text-secondary);
           }
         }
 
diff --git a/frontend/admin/src/pages/user/list/handle/userEditForm.vue b/frontend/admin/src/pages/user/list/handle/userEditForm.vue
index 1146225b4..1d3f13e32 100644
--- a/frontend/admin/src/pages/user/list/handle/userEditForm.vue
+++ b/frontend/admin/src/pages/user/list/handle/userEditForm.vue
@@ -366,7 +366,7 @@ defineExpose({ setUser: setUserFn });
       font-weight: 500;
       font-size: 14px;
       line-height: 16px;
-      color: #303133;
+      color: var(--prev-color-text-regular);
     }
 
     &-bd {
diff --git a/frontend/admin/src/pages/user/list/handle/userInfo.vue b/frontend/admin/src/pages/user/list/handle/userInfo.vue
index ae5eeb7b7..920f95206 100644
--- a/frontend/admin/src/pages/user/list/handle/userInfo.vue
+++ b/frontend/admin/src/pages/user/list/handle/userInfo.vue
@@ -134,7 +134,7 @@ function timeFormat(value, birthday) {
 .user-info {
   .section {
     padding: 25px 0;
-    border-bottom: 1px dashed #eeeeee;
+    border-bottom: 1px dashed var(--prev-border-color-lighter);
 
     &-hd {
       padding-left: 10px;
@@ -142,7 +142,7 @@ function timeFormat(value, birthday) {
       font-weight: 500;
       font-size: 14px;
       line-height: 16px;
-      color: #303133;
+      color: var(--prev-color-text-regular);
     }
 
     &-bd {
@@ -155,7 +155,7 @@ function timeFormat(value, birthday) {
       display: flex;
       margin: 16px 30px 0 0;
       font-size: 13px;
-      color: #666;
+      color: var(--prev-color-text-primary);
 
       &:nth-child(3n + 3) {
         margin: 16px 0 0;
diff --git a/frontend/admin/src/pages/user/list/index.vue b/frontend/admin/src/pages/user/list/index.vue
index 46eae6e1b..4f6069612 100644
--- a/frontend/admin/src/pages/user/list/index.vue
+++ b/frontend/admin/src/pages/user/list/index.vue
@@ -1211,7 +1211,7 @@ function setChecked() {
   position: fixed;
   bottom: 0;
   width: -webkit-fill-available;
-  background: #fff;
+  background: var(--prev-bg-white);
   padding: 20px 0px;
   box-sizing: border-box;
   z-index: 100;
@@ -1297,10 +1297,10 @@ img {
   position: absolute;
   bottom: 0;
   left: 0;
-  border-top: 1px solid #e8e8e8;
+  border-top: 1px solid var(--prev-border-color-lighter);
   padding: 10px 16px;
   text-align: right;
-  background: #fff;
+  background: var(--prev-bg-white);
 }
 
 .search-form {