diff --git a/designer-demo/src/configurators/MyInputConfigurator.vue b/designer-demo/src/configurators/MyInputConfigurator.vue
index 47a9b11e53..26dbd6be85 100644
--- a/designer-demo/src/configurators/MyInputConfigurator.vue
+++ b/designer-demo/src/configurators/MyInputConfigurator.vue
@@ -57,7 +57,7 @@ export default {
   font-size: 16px;
   &:hover {
     cursor: pointer;
-    color: var(--ti-lowcode-dialog-font-color);
+    color: var(--te-common-text-primary);
   }
 }
 </style>
diff --git a/packages/canvas/container/src/components/CanvasAction.vue b/packages/canvas/container/src/components/CanvasAction.vue
index 04284bf0e6..c3a2ba3f53 100644
--- a/packages/canvas/container/src/components/CanvasAction.vue
+++ b/packages/canvas/container/src/components/CanvasAction.vue
@@ -671,21 +671,8 @@ export default {
     }
   }
 }
-.short-cut-set.tiny-popper.tiny-popover {
-  background: var(--ti-lowcode-toolbar-bg);
+.short-cut-set.short-cut-set.tiny-popper.tiny-popover {
   padding: 10px;
-  .body label,
-  .header {
-    color: var(--ti-lowcode-dialog-font-color);
-    font-size: 12px;
-  }
-  .tiny-popover__title {
-    color: var(--ti-lowcode-dialog-font-color);
-  }
-}
-
-.short-cut-set.tiny-popper.tiny-popover[x-placement^='bottom'] .popper__arrow::after {
-  border-bottom-color: var(--ti-lowcode-toolbar-bg);
 }
 
 .drag-resize {
diff --git a/packages/canvas/container/src/components/CanvasDivider.vue b/packages/canvas/container/src/components/CanvasDivider.vue
index 9f0b9dcd51..0b333fcd1c 100644
--- a/packages/canvas/container/src/components/CanvasDivider.vue
+++ b/packages/canvas/container/src/components/CanvasDivider.vue
@@ -215,7 +215,7 @@ export default {
     left: v-bind('state.horizontalLeft');
   }
   &:hover {
-    background-color: var(--ti-lowcode-common-primary-color);
+    background-color: var(--te-common-bg-primary-checked);
     .divider {
       background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAACbElEQVRIDZ2Vu2sVURCH9yZgbCxMsFFjKQkExScREgQtLISAXbS4GDu10fgHiL1gpxKDCLFRfICCCSpCwEiCYiNWFkYsImIRH4jgY/x+xzNy7t29614HvsycmfnN3j1nd5Nl0cysDrPwEV7DRVjn9Vaent7Y+wYvrWbUG/pJTIHsCzyBd1pg8v0NzcmC2kDswdkizIFmyKZCK4F+uWwGelxPfAx+wFPPpZ58JzyHX3DEa8TdoFmyesYf3ZKu+nd40nyJvGzEc+7JjYWK2aTn3JPXRTRzVhdYhjkvpp78KMieNeW7yGnPZYfSmsfktV3LHSSWoNVhro+CbTTvdzH+KGyI61batdSXdAcXQDYWBcGx1m2+ha/wHRZUwK+C9/ABtA3q6W7S+vadl6AH9LT8hAk4CKdAQtlJuBIis3340zE+gR+PsXqlkVYzNEsz/5wrQR/MQ2qfWYzHX72RWE+UnppPoP3vijUNVm9qCyz60rvSnXTAJtBjOwKr0wbWV8GtaDulkVYzdLbtGaLdINPed1ZVt3Mlf/21r8NVL1Cpj1+sM9IZvAK9uY8qCas2MfAGyPbC9RCZDVXVl/YxbHsc+FCNxDpE3cWDUmHVIoPug2yna4hvhYzZLs/9l2fInjjoZjqA3JaYn07zbccM0Qujw839TyB3B2Q72h4sAcIDQW52uWiABsf63aJ6aQ6h3uqX8A38q5nTULsHsq25YlkCweEgMzv3j77B2He7rK+hhmAFLII+YGsaigULevSU6bHdXFDOp2g8DrIz+Wo+Q99Q6Da7lq9mWdG3aCWNL+BskaA5V6vVHpPT8FpzTevfkrgJcwZ0OJIAAAAASUVORK5CYII=);
     }
@@ -232,7 +232,7 @@ export default {
 
 .divider-line {
   position: absolute;
-  border: 1px dashed var(--ti-lowcode-common-primary-color);
+  border: 1px dashed var(--te-common-border-checked);
   z-index: 2;
 }
 </style>
diff --git a/packages/canvas/container/src/components/CanvasResizeBorder.vue b/packages/canvas/container/src/components/CanvasResizeBorder.vue
index ef310dd225..136d9d46e3 100644
--- a/packages/canvas/container/src/components/CanvasResizeBorder.vue
+++ b/packages/canvas/container/src/components/CanvasResizeBorder.vue
@@ -199,7 +199,7 @@ export default {
   &::after {
     content: '';
     display: block;
-    border: 1px solid var(--ti-lowcode-common-primary-color);
+    border: 1px solid var(--te-common-border-checked);
   }
   &.resize-vertical {
     cursor: ns-resize;
diff --git a/packages/canvas/container/src/components/shortCutPopover.vue b/packages/canvas/container/src/components/shortCutPopover.vue
index e01f26c743..4722705e04 100644
--- a/packages/canvas/container/src/components/shortCutPopover.vue
+++ b/packages/canvas/container/src/components/shortCutPopover.vue
@@ -86,7 +86,7 @@ export default {
   display: flex;
   align-items: center;
   padding: 0 10px;
-  border-bottom: 1px solid var(--ti-lowcode-toolbar-border-color, #333);
+  border-bottom: 1px solid var(--te-common-border-default, #333);
   height: 36px;
 
   div {
@@ -96,7 +96,7 @@ export default {
 
   .icon-setting {
     font-size: 16px;
-    fill: var(--ti-lowcode-toolbar-breadcrumb-color, #d9d9d9);
+    fill: var(--te-common-text-secondary, #d9d9d9);
   }
 
   .icon-wrap {
@@ -111,7 +111,7 @@ export default {
     align-items: center;
     transition: 0.3s;
     &:hover {
-      fill: var(--ti-lowcode-toolbar-icon-color, #fff);
+      fill: var(--te-common-icon-primary, #fff);
       background: var(--ti-lowcode-icon-hover-bg, rgba(255, 255, 255, 0.1));
     }
   }
@@ -164,14 +164,14 @@ export default {
     width: 100%;
     padding: 4px 0;
     display: inline-block;
-    background: var(--ti-lowcode-toolbar-view-hover-bg, #4d4d4d);
+    background: var(--te-common-bg-container, #4d4d4d);
     border-radius: 2px;
     display: flex;
     justify-content: center;
     align-items: center;
   }
   svg {
-    fill: var(--ti-lowcode-toolbar-breadcrumb-color, #d9d9d9);
+    fill: var(--te-common-text-secondary, #d9d9d9);
     margin-left: 4px;
   }
 }
diff --git a/packages/canvas/layout/src/CanvasLayout.vue b/packages/canvas/layout/src/CanvasLayout.vue
index bb75e32265..9ddbbfd1e1 100644
--- a/packages/canvas/layout/src/CanvasLayout.vue
+++ b/packages/canvas/layout/src/CanvasLayout.vue
@@ -21,7 +21,7 @@ const siteCanvasStyle = computed(() => {
 
 <style lang="less" scoped>
 #canvas-wrap {
-  background: var(--ti-lowcode-canvas-wrap-bg);
+  background: var(--te-common-bg-container);
   flex: 1 1 0;
   border: none;
   display: flex;
diff --git a/packages/common/component/BindI18n.vue b/packages/common/component/BindI18n.vue
index c0f99ce0e3..b30f3b2c1f 100644
--- a/packages/common/component/BindI18n.vue
+++ b/packages/common/component/BindI18n.vue
@@ -189,7 +189,7 @@ export default {
     border-color: var(--ti-lowcode-tootip-input-border-color);
     color: var(--ti-lowcode-toolbar-icon-color);
     &:hover {
-      background-color: var(--ti-lowcode-canvas-wrap-bg);
+      background-color: var(--te-common-bg-container);
       border-color: var(--ti-lowcode-tabs-border-color);
     }
   }
diff --git a/packages/common/component/BlockLinkEvent.vue b/packages/common/component/BlockLinkEvent.vue
index 7eefe28518..2e0627f523 100644
--- a/packages/common/component/BlockLinkEvent.vue
+++ b/packages/common/component/BlockLinkEvent.vue
@@ -198,7 +198,7 @@ export default {
   padding: 3px 0;
   border: 1px solid var(--ti-lowcode-tabs-border-color);
   border-radius: 3px;
-  background-color: var(--ti-lowcode-toolbar-view-hover-bg);
+  background-color: var(--te-common-bg-container);
   box-shadow: 0 1px 15px 0 rgb(0 0 0 / 20%);
   display: flex;
   flex-direction: column;
@@ -206,14 +206,14 @@ export default {
     font-size: 12px;
     display: flex;
     justify-content: space-between;
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    color: var(--te-common-text-secondary);
     padding: 6px 15px;
     &:not(:last-child) {
       border-bottom: 1px solid var(--ti-lowcode-tabs-border-color);
     }
     &:hover {
       color: var(--ti-lowcode-toolbar-icon-color);
-      background: var(--ti-lowcode-canvas-wrap-bg);
+      background: var(--te-common-bg-container);
     }
 
     .link-item {
diff --git a/packages/common/component/ConfigCollapse.vue b/packages/common/component/ConfigCollapse.vue
index 1ba8b20e66..01e51fa0ba 100644
--- a/packages/common/component/ConfigCollapse.vue
+++ b/packages/common/component/ConfigCollapse.vue
@@ -40,10 +40,10 @@ export default {
         transition: 0.3s;
 
         &:hover {
-          color: var(--ti-lowcode-toolbar-icon-color);
+          color: var(--te-common-icon-primary);
 
           svg {
-            color: var(--ti-lowcode-toolbar-icon-color);
+            color: var(--te-common-icon-primary);
           }
         }
       }
diff --git a/packages/common/component/ConfigItem.vue b/packages/common/component/ConfigItem.vue
index 39f81f8e31..23c7915f3b 100644
--- a/packages/common/component/ConfigItem.vue
+++ b/packages/common/component/ConfigItem.vue
@@ -673,7 +673,7 @@ export default {
     display: flex;
     align-items: center;
     margin-top: 8px;
-    color: var(--ti-lowcode-common-error-color);
+    color: var(--te-common-color-error);
     font-size: 12px;
     .failure-icon {
       width: 16px;
diff --git a/packages/common/component/EmptyTip.vue b/packages/common/component/EmptyTip.vue
index 8e72800e2a..6b03517550 100644
--- a/packages/common/component/EmptyTip.vue
+++ b/packages/common/component/EmptyTip.vue
@@ -33,12 +33,12 @@ export default {
 <style scoped lang="less">
 .tip {
   display: flex;
-  border: 1px solid var(--ti-lowcode-toolbar-border-color);
-  border-left: 2px solid var(--ti-lowcode-success-border-color);
+  border: 1px solid var(--te-common-border-default);
+  border-left: 2px solid var(--te-common-color-success);
   border-radius: 0 4px 4px 0;
   align-items: center;
   padding: 8px 12px;
-  background-color: var(--ti-lowcode-toolbar-view-hover-bg);
+  background-color: var(--te-common-bg-container);
 
   .left {
     width: 20px;
@@ -52,9 +52,9 @@ export default {
   }
 }
 .waring {
-  border-left: 2px solid var(--ti-lowcode-description-warning-color);
+  border-left: 2px solid var(--te-common-color-warning);
 }
 .error {
-  border-left: 2px solid var(--ti-lowcode-description-error-color);
+  border-left: 2px solid var(--te-common-color-error);
 }
 </style>
diff --git a/packages/common/component/MetaCodeEditor.vue b/packages/common/component/MetaCodeEditor.vue
index d74b7c700d..14f9924525 100644
--- a/packages/common/component/MetaCodeEditor.vue
+++ b/packages/common/component/MetaCodeEditor.vue
@@ -321,7 +321,7 @@ export default {
     margin-left: 4px;
     flex-shrink: 0;
     cursor: pointer;
-    color: var(--ti-lowcode-common-text-main-color);
+    color: var(--te-common-text-secondary);
   }
 }
 
diff --git a/packages/common/component/MetaDescription.vue b/packages/common/component/MetaDescription.vue
index d6609e29ae..56c4ed5517 100644
--- a/packages/common/component/MetaDescription.vue
+++ b/packages/common/component/MetaDescription.vue
@@ -92,34 +92,34 @@ export default {
   padding-block: 4px;
   padding-inline: 11px 8px;
   width: auto;
-  color: var(--ti-lowcode-toolbar-breadcrumb-color);
-  background-color: var(--ti-lowcode-toolbar-view-hover-bg);
+  color: var(--te-common-text-secondary);
+  background-color: var(--te-common-bg-container);
   box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.3);
   &.warning {
-    color: var(--ti-lowcode-description-warning-color);
+    color: var(--te-common-color-warning);
   }
   &.error {
-    color: var(--ti-lowcode-description-error-color);
+    color: var(--te-common-color-error);
   }
 
   &.border {
-    border-top: 1px solid var(--ti-lowcode-collapse-active-border-color);
-    border-right: 1px solid var(--ti-lowcode-collapse-active-border-color);
-    border-bottom: 1px solid var(--ti-lowcode-collapse-active-border-color);
+    border-top: 1px solid var(--te-common-border-default);
+    border-right: 1px solid var(--te-common-border-default);
+    border-bottom: 1px solid var(--te-common-border-default);
   }
   .content {
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    color: var(--te-common-text-secondary);
   }
   .footer {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    color: var(--te-common-text-secondary);
     .footer-text {
       cursor: pointer;
       &.link {
         display: block;
-        color: var(--ti-lowcode-text-link-color);
+        color: var(--te-common-text-link);
         &:hover {
           text-decoration: underline;
         }
diff --git a/packages/common/component/MetaListActions.vue b/packages/common/component/MetaListActions.vue
index 2f77a06796..5013cd0953 100644
--- a/packages/common/component/MetaListActions.vue
+++ b/packages/common/component/MetaListActions.vue
@@ -35,7 +35,7 @@ export default {
 .actionsItem {
   display: inline-block;
   padding: 5px 5px;
-  background-color: var(--ti-lowcode-canvas-wrap-bg);
+  background-color: var(--te-common-bg-container);
   &:not(:last-child) {
     border-right: 1px solid var(--ti-lowcode-optionitem-border-color);
   }
diff --git a/packages/common/component/MetaListItem.vue b/packages/common/component/MetaListItem.vue
index 30b2344e75..f643e115d5 100644
--- a/packages/common/component/MetaListItem.vue
+++ b/packages/common/component/MetaListItem.vue
@@ -251,7 +251,7 @@ export default {
   border-right: none;
   background: var(--ti-lowcode-meta-list-item-bg-color);
   margin-bottom: -1px;
-  color: var(--ti-lowcode-toolbar-breadcrumb-color);
+  color: var(--te-common-text-primary);
   &.active-item {
     background-color: var(--te-common-bg-container);
   }
@@ -266,7 +266,7 @@ export default {
         margin-right: 5px;
         font-size: 12px;
         opacity: 0.4;
-        color: var(--ti-lowcode-toolbar-breadcrumb-color);
+        color: var(--te-common-text-primary);
         &:hover {
           cursor: pointer;
           opacity: 1;
diff --git a/packages/common/component/MetaModal.vue b/packages/common/component/MetaModal.vue
index 8bd2115b73..d44d058965 100644
--- a/packages/common/component/MetaModal.vue
+++ b/packages/common/component/MetaModal.vue
@@ -74,7 +74,7 @@ export default {
 
   .modal-content {
     padding: 8px;
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    color: var(--te-common-text-secondary);
     border: 1px solid var(--ti-lowcode-tabs-border-color);
     border-radius: 4px;
     background-color: var(--ti-lowcode-toolbar-bg);
diff --git a/packages/common/component/MetaModalItem.vue b/packages/common/component/MetaModalItem.vue
index 9347f06e27..f80ef33237 100644
--- a/packages/common/component/MetaModalItem.vue
+++ b/packages/common/component/MetaModalItem.vue
@@ -123,7 +123,7 @@ export default {
       justify-content: space-between;
       align-items: center;
       padding: 10px 0;
-      color: var(--ti-lowcode-toolbar-breadcrumb-color);
+      color: var(--te-common-text-secondary);
 
       .header-title {
         font-size: 14px;
diff --git a/packages/common/component/MonacoEditor.vue b/packages/common/component/MonacoEditor.vue
index 8c6fc85820..06d66c16f1 100644
--- a/packages/common/component/MonacoEditor.vue
+++ b/packages/common/component/MonacoEditor.vue
@@ -143,7 +143,7 @@ export default {
   right: var(--base-left-panel-width);
   z-index: 100;
   padding: 10px 16px 16px 16px;
-  background-color: var(--ti-lowcode-common-component-bg);
+  background-color: var(--te-common-bg-default);
   height: auto !important;
 }
 
diff --git a/packages/common/component/PluginBlockList.vue b/packages/common/component/PluginBlockList.vue
index c1df2e4d2f..9d42792d44 100644
--- a/packages/common/component/PluginBlockList.vue
+++ b/packages/common/component/PluginBlockList.vue
@@ -470,7 +470,7 @@ export default {
   gap: 12px;
   overflow-y: auto;
   overflow-x: hidden;
-  color: var(--ti-lowcode-common-secondary-text-color);
+  color: var(--te-common-text-secondary);
 
   .block-item {
     display: flex;
@@ -489,7 +489,7 @@ export default {
       top: 2px;
       text-align: center;
       display: block;
-      color: var(--ti-lowcode-common-secondary-text-color);
+      color: var(--te-common-text-secondary);
       font-size: 12px;
       background-color: var(--ti-lowcode-component-block-list-item-tag-bg);
       padding: 2px;
@@ -548,7 +548,7 @@ export default {
     }
 
     &.is-active {
-      background: var(--ti-lowcode-component-block-list-item-active-bg, --ti-lowcode-canvas-wrap-bg);
+      background: var(--ti-lowcode-component-block-list-item-active-bg, --te-common-bg-container);
     }
 
     &.is-disabled {
@@ -630,7 +630,7 @@ export default {
       }
 
       .block-detail-icon {
-        color: var(--ti-lowcode-base-gray-50);
+        color: var(--te-common-icon-secondary);
         &:hover {
           cursor: pointer;
           color: var(--ti-lowcode-component-block-list-setting-btn-hover-color);
@@ -771,7 +771,7 @@ export default {
     cursor: pointer;
     &:hover {
       background-color: var(--ti-lowcode-component-block-setting-item-hover-bg);
-      color: var(--ti-lowcode-common-primary-text-color);
+      color: var(--te-common-text-primary);
     }
     .list-item-icon {
       font-size: 14px;
diff --git a/packages/common/component/PluginSetting.vue b/packages/common/component/PluginSetting.vue
index b822f87b12..8228261794 100644
--- a/packages/common/component/PluginSetting.vue
+++ b/packages/common/component/PluginSetting.vue
@@ -129,7 +129,7 @@ export default {
   top: 0;
   width: var(--base-collection-panel-width);
   height: 100%;
-  border-right: 1px solid var(--ti-lowcode-toolbar-border-color);
+  border-right: 1px solid var(--te-common-border-default);
   background: var(--ti-lowcode-plugin-setting-panel-bg, --ti-lowcode-toolbar-bg);
   overflow: hidden;
   border-left: 1px solid var(--ti-lowcode-plugin-panel-header-border-bottom-color);
diff --git a/packages/common/component/SearchEmpty.vue b/packages/common/component/SearchEmpty.vue
index 74b801fc2d..a7eaa6232f 100644
--- a/packages/common/component/SearchEmpty.vue
+++ b/packages/common/component/SearchEmpty.vue
@@ -26,11 +26,10 @@ export default {
   .empty-icon {
     width: 80px;
     height: 80px;
-    color: var(--ti-lowcode-datasource-common-empty-color);
   }
   .empty-text {
     font-size: 12px;
-    color: var(--te-base-text-color-3);
+    color: var(--te-common-text-weaken);
   }
 }
 </style>
diff --git a/packages/common/component/ToolbarBase.vue b/packages/common/component/ToolbarBase.vue
index ffc2a1f88b..1272cb4d87 100644
--- a/packages/common/component/ToolbarBase.vue
+++ b/packages/common/component/ToolbarBase.vue
@@ -67,7 +67,7 @@ export default {
 </script>
 <style scoped>
 .split-line {
-  color: var(--ti-lowcode-toolbar-border-color);
+  color: var(--te-common-border-default);
   margin: 0 4px;
   font-size: 14px;
 }
diff --git a/packages/common/component/VideoGuide.vue b/packages/common/component/VideoGuide.vue
index 825d9d19c7..fbeac0876f 100644
--- a/packages/common/component/VideoGuide.vue
+++ b/packages/common/component/VideoGuide.vue
@@ -50,7 +50,7 @@ export default {
 
 <style lang="less" scoped>
 .block-guide {
-  color: var(--ti-lowcode-toolbar-breadcrumb-color);
+  color: var(--te-common-text-secondary);
   line-height: 2;
   border: none;
   border-color: var(--ti-lowcode-block-video-tip-color);
diff --git a/packages/configurator/src/code-list-configurator/CodeListConfigurator.vue b/packages/configurator/src/code-list-configurator/CodeListConfigurator.vue
index 77648be5a2..94623e86d3 100644
--- a/packages/configurator/src/code-list-configurator/CodeListConfigurator.vue
+++ b/packages/configurator/src/code-list-configurator/CodeListConfigurator.vue
@@ -220,7 +220,7 @@ export default {
     justify-content: space-between;
     align-items: center;
     padding: 10px 0;
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    color: var(--te-common-text-secondary);
 
     .header-title {
       font-size: 14px;
diff --git a/packages/configurator/src/html-attributes-configurator/HtmlAttributesConfigurator.vue b/packages/configurator/src/html-attributes-configurator/HtmlAttributesConfigurator.vue
index e503e11cf9..5b9aa6df5f 100644
--- a/packages/configurator/src/html-attributes-configurator/HtmlAttributesConfigurator.vue
+++ b/packages/configurator/src/html-attributes-configurator/HtmlAttributesConfigurator.vue
@@ -195,8 +195,8 @@ export default {
     width: 24px;
     height: 24px;
     font-size: 16px;
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
-    background: var(--ti-lowcode-canvas-wrap-bg);
+    color: var(--te-common-text-secondary);
+    background: var(--te-common-bg-container);
     border: 1px solid var(--ti-lowcode-left-button-border-color);
     border-radius: 2px;
     display: inline-flex;
@@ -223,7 +223,7 @@ export default {
     border: 1px solid var(--ti-lowcode-optionitem-border-color);
     background: var(--ti-lowcode-optionitem-background-color);
     margin-bottom: -1px;
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    color: var(--te-common-text-secondary);
     padding: 7px;
     display: grid;
     grid-template-columns: 3fr auto;
diff --git a/packages/configurator/src/input-configurator/InputConfigurator.vue b/packages/configurator/src/input-configurator/InputConfigurator.vue
index 37d869347b..f2d28ca2f5 100644
--- a/packages/configurator/src/input-configurator/InputConfigurator.vue
+++ b/packages/configurator/src/input-configurator/InputConfigurator.vue
@@ -66,7 +66,7 @@ export default {
   font-size: 16px;
   &:hover {
     cursor: pointer;
-    color: var(--ti-lowcode-dialog-font-color);
+    color: var(--te-common-text-primary);
   }
 }
 </style>
diff --git a/packages/configurator/src/layout-grid-configurator/LayoutGridConfigurator.vue b/packages/configurator/src/layout-grid-configurator/LayoutGridConfigurator.vue
index b11b6c3684..587eff76ef 100644
--- a/packages/configurator/src/layout-grid-configurator/LayoutGridConfigurator.vue
+++ b/packages/configurator/src/layout-grid-configurator/LayoutGridConfigurator.vue
@@ -268,7 +268,7 @@ export default {
       box-sizing: border-box;
       width: 48px;
       border: 1px solid var(--ti-lowcode-tabs-border-color);
-      background: var(--ti-lowcode-canvas-wrap-bg);
+      background: var(--te-common-bg-container);
       border-radius: 4px;
       padding: 4px;
       margin: 0 4px 4px 4px;
@@ -313,13 +313,13 @@ export default {
     justify-content: center;
     align-items: center;
     display: flex;
-    background: var(--ti-lowcode-canvas-wrap-bg);
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    background: var(--te-common-bg-container);
+    color: var(--te-common-text-secondary);
     transition: none;
   }
 
   :deep(.splitpanes__splitter) {
-    background: var(--ti-lowcode-toolbar-view-hover-bg);
+    background: var(--te-common-bg-container);
     border-left: var(--ti-lowcode-tabs-border-color);
   }
 
@@ -328,7 +328,7 @@ export default {
 
     .customize {
       margin-bottom: 8px;
-      color: var(--ti-lowcode-toolbar-breadcrumb-color);
+      color: var(--te-common-text-secondary);
     }
   }
 }
diff --git a/packages/configurator/src/select-icon-configurator/SelectIconConfigurator.vue b/packages/configurator/src/select-icon-configurator/SelectIconConfigurator.vue
index d428041ccd..f8ad2fd8a7 100644
--- a/packages/configurator/src/select-icon-configurator/SelectIconConfigurator.vue
+++ b/packages/configurator/src/select-icon-configurator/SelectIconConfigurator.vue
@@ -107,15 +107,15 @@ export default {
   padding-right: 20px;
   width: 136px;
   cursor: pointer;
-  background: var(--ti-lowcode-tabs-bg);
-  color: var(--ti-lowcode-toolbar-breadcrumb-color);
+  background: var(--te-common-bg-prompt);
+  color: var(--te-common-text-secondary);
   border: 1px solid var(--ti-lowcode-tabs-active-bg);
   border-radius: 3px;
   .icon-box {
     border-right: 1px solid var(--ti-lowcode-tabs-active-bg);
     padding: 4px 8px;
     .tiny-svg {
-      color: var(--ti-lowcode-toolbar-breadcrumb-color);
+      color: var(--te-common-text-secondary);
       font-size: 14px;
     }
   }
diff --git a/packages/configurator/src/slider-configurator/SliderConfigurator.vue b/packages/configurator/src/slider-configurator/SliderConfigurator.vue
index e9ffb6ca8b..2693550875 100644
--- a/packages/configurator/src/slider-configurator/SliderConfigurator.vue
+++ b/packages/configurator/src/slider-configurator/SliderConfigurator.vue
@@ -95,7 +95,7 @@ export default {
     height: 3px;
     width: 100%;
     border-radius: 2px;
-    background-color: var(--ti-lowcode-canvas-wrap-bg);
+    background-color: var(--te-common-bg-container);
     .tiny-slider__handle {
       width: 10px;
       height: 10px;
@@ -103,14 +103,14 @@ export default {
       border-radius: 50%;
       border: none;
       cursor: ew-resize;
-      background-color: var(--ti-lowcode-toolbar-breadcrumb-color);
+      background-color: var(--te-common-text-secondary);
       box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 1px, rgba(0, 0, 0, 0.3) 0px 0px 0px 0.5px;
     }
     .tiny-slider__range {
       height: 3px;
       border-radius: 3px;
       margin-top: 0;
-      background: var(--ti-lowcode-canvas-wrap-bg);
+      background: var(--te-common-bg-container);
     }
 
     .tiny-slider__tips {
diff --git a/packages/configurator/src/slot-configurator/SlotConfigurator.vue b/packages/configurator/src/slot-configurator/SlotConfigurator.vue
index 6e4989a038..f084357570 100644
--- a/packages/configurator/src/slot-configurator/SlotConfigurator.vue
+++ b/packages/configurator/src/slot-configurator/SlotConfigurator.vue
@@ -141,7 +141,7 @@ export default {
   }
   .slot-name {
     width: 30%;
-    color: var(--ti-lowcode-dialog-font-color);
+    color: var(--te-common-text-primary);
     font-size: 12px;
     display: flex;
     justify-content: space-between;
diff --git a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
index 841beb01a1..1840bcf841 100644
--- a/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
+++ b/packages/configurator/src/tabs-group-configurator/TabsGroupConfigurator.vue
@@ -203,17 +203,17 @@ const change = (item) => {
       line-height: 14px;
       min-width: 20px;
       max-width: 80px;
-      color: var(--te-common-text-weaken);
+      color: var(--te-common-text-secondary);
 
       &:hover {
-        background-color: var(--ti-lowcode-base-gray-101);
-        color: var(--te-common-text-primary);
+        background-color: var(--te-common-bg-prompt);
+        color: var(--te-common-text-secondary);
         border-radius: 4px;
       }
 
       &.selected {
-        background-color: var(--ti-lowcode-base-gray-101);
-        color: var(--te-common-text-primary);
+        background-color: var(--te-common-bg-prompt);
+        color: var(--te-common-text-secondary);
         border-radius: 4px;
       }
     }
@@ -238,11 +238,11 @@ const change = (item) => {
       justify-content: center;
       align-items: center;
       height: 24px;
-      background-color: var(--ti-lowcode-base-bg-5);
-      color: var(--te-common-text-weaken);
+      background-color: var(--te-common-bg-container);
+      color: var(--te-common-text-secondary);
       &.selected {
-        background-color: var(--ti-lowcode-base-gray-101);
-        color: var(--te-common-text-primary);
+        background-color: var(--te-common-bg-prompt);
+        color: var(--te-common-text-secondary);
         border-radius: 4px;
       }
       :deep(.tiny-dropdown__title) {
@@ -260,9 +260,12 @@ const change = (item) => {
       }
 
       &:hover {
-        background-color: var(--ti-lowcode-base-gray-101);
+        background-color: var(--te-common-bg-prompt);
+        color: var(--te-common-text-secondary);
         border-radius: 4px;
-        color: var(--te-common-text-primary);
+      }
+      :deep(.tiny-dropdown__trigger:not(.tiny-dropdown__caret-button):not(.is-disabled)):hover {
+        color: var(--te-common-text-secondary);
       }
     }
   }
@@ -270,8 +273,7 @@ const change = (item) => {
 .tiny-dropdown-menu {
   padding: 8px 0px;
   margin: 0px 0px 0px 20px;
-  background-color: var(--te-common-bg-default);
-  color: var(--te-common-text-weaken);
+  color: var(--te-common-text-secondary);
   z-index: 9999;
   box-shadow: 0 0 10px 0 var(--te-common-border-default);
   --ti-dropdown-menu-arrow-margin-top: 0;
@@ -283,11 +285,10 @@ const change = (item) => {
   :deep(.tiny-dropdown-item__wrap) {
     padding: 4px 12px;
     background-color: var(--te-common-bg-default);
-
     &:hover {
-      background-color: var(--ti-lowcode-base-gray-101);
+      background-color: var(--te-common-bg-prompt);
+      color: var(--te-common-text-secondary);
       border-radius: 4px;
-      color: var(--te-common-text-primary);
     }
   }
 }
diff --git a/packages/design-core/src/preview/src/Toolbar.vue b/packages/design-core/src/preview/src/Toolbar.vue
index 24cc1f0157..008ec2c18c 100644
--- a/packages/design-core/src/preview/src/Toolbar.vue
+++ b/packages/design-core/src/preview/src/Toolbar.vue
@@ -69,7 +69,7 @@ export default {
   width: 100%;
   height: var(--base-top-panel-height);
   text-align: center;
-  background-color: var(--ti-lowcode-common-layout-bg);
+  background-color: var(--te-common-bg-default);
   position: relative;
   z-index: 1001;
   border-bottom: 1px solid var(--ti-lowcode-toolbar-border-bottom-color);
diff --git a/packages/engine-cli/template/designer/src/configurators/MyInputConfigurator.vue b/packages/engine-cli/template/designer/src/configurators/MyInputConfigurator.vue
index 47a9b11e53..26dbd6be85 100644
--- a/packages/engine-cli/template/designer/src/configurators/MyInputConfigurator.vue
+++ b/packages/engine-cli/template/designer/src/configurators/MyInputConfigurator.vue
@@ -57,7 +57,7 @@ export default {
   font-size: 16px;
   &:hover {
     cursor: pointer;
-    color: var(--ti-lowcode-dialog-font-color);
+    color: var(--te-common-text-primary);
   }
 }
 </style>
diff --git a/packages/layout/src/DesignPlugins.vue b/packages/layout/src/DesignPlugins.vue
index da6240dd6f..835e64ca95 100644
--- a/packages/layout/src/DesignPlugins.vue
+++ b/packages/layout/src/DesignPlugins.vue
@@ -201,7 +201,7 @@ export default {
   width: var(--base-left-panel-width);
   height: calc(100vh - var(--base-top-panel-height));
   border-right: 1px solid var(--ti-lowcode-plugin-panel-border-right-color);
-  background: var(--ti-lowcode-common-component-bg);
+  background: var(--te-common-bg-default);
   display: flex;
   flex-direction: column;
   position: absolute;
@@ -236,7 +236,7 @@ export default {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  background: var(--ti-lowcode-common-layout-bg);
+  background: var(--te-common-bg-default);
   box-sizing: border-box;
   z-index: 1000;
   border-right: 1px solid var(--ti-lowcode-plugin-panel-border-right-color);
@@ -282,7 +282,7 @@ export default {
         position: relative;
 
         .item-icon {
-          color: var(--ti-lowcode-common-primary-color);
+          color: var(--te-common-text-checked);
         }
       }
 
diff --git a/packages/layout/src/DesignToolbars.vue b/packages/layout/src/DesignToolbars.vue
index 5e9c042afc..f4fbf84216 100644
--- a/packages/layout/src/DesignToolbars.vue
+++ b/packages/layout/src/DesignToolbars.vue
@@ -89,7 +89,7 @@ export default {
   width: 100%;
   height: var(--base-top-panel-height);
   text-align: center;
-  background-color: var(--ti-lowcode-common-layout-bg);
+  background-color: var(--te-common-bg-default);
   position: relative;
   z-index: 1001;
   border-bottom: 1px solid var(--ti-lowcode-toolbar-border-bottom-color);
@@ -147,7 +147,7 @@ export default {
         background: var(--ti-lowcode-toolbar-view-active-bg);
       }
       &.active {
-        color: var(--ti-lowcode-common-primary-color);
+        color: var(--te-common-text-checked);
       }
       &.disabled {
         cursor: not-allowed;
diff --git a/packages/layout/src/ToolbarCollapse.vue b/packages/layout/src/ToolbarCollapse.vue
index 4bbce01aca..3ffbe5a1ed 100644
--- a/packages/layout/src/ToolbarCollapse.vue
+++ b/packages/layout/src/ToolbarCollapse.vue
@@ -76,7 +76,7 @@ export default {
 
     .empty-line {
       margin: 4px 0px;
-      border-top: 1px solid var(--ti-lowcode-canvas-wrap-bg);
+      border-top: 1px solid var(--te-common-bg-container);
     }
 
     .icon-hides {
diff --git a/packages/plugins/block/src/BlockConfig.vue b/packages/plugins/block/src/BlockConfig.vue
index a5d36ba2bf..c1241ef1f6 100644
--- a/packages/plugins/block/src/BlockConfig.vue
+++ b/packages/plugins/block/src/BlockConfig.vue
@@ -308,7 +308,7 @@ export default {
     line-height: 20px;
     padding-top: 0;
     padding-bottom: 0;
-    border: 1px solid var(--ti-lowcode-base-default-button-border-disable-color);
+    border: 1px solid var(--te-common-border-default);
   }
 
   .tiny-input {
diff --git a/packages/plugins/block/src/BlockEventList.vue b/packages/plugins/block/src/BlockEventList.vue
index 25bedb5070..0a723cd02e 100644
--- a/packages/plugins/block/src/BlockEventList.vue
+++ b/packages/plugins/block/src/BlockEventList.vue
@@ -79,7 +79,7 @@ export default {
 .add-button {
   padding: 0 0 8px 0;
   :deep(.tiny-button) {
-    border: 1px solid var(--ti-lowcode-base-default-button-border-disable-color);
+    border: 1px solid var(--te-common-border-default);
   }
   .icon-plus {
     margin-right: 6px;
diff --git a/packages/plugins/block/src/BlockGroupArrange.vue b/packages/plugins/block/src/BlockGroupArrange.vue
index f2ac355dc9..8569e4937b 100644
--- a/packages/plugins/block/src/BlockGroupArrange.vue
+++ b/packages/plugins/block/src/BlockGroupArrange.vue
@@ -59,10 +59,10 @@ export default {
     align-items: center;
     transition: 0.3s;
     &:hover {
-      color: var(--ti-lowcode-common-primary-color);
+      color: var(--te-common-text-checked);
     }
     &.active {
-      color: var(--ti-lowcode-common-primary-color);
+      color: var(--te-common-text-checked);
     }
   }
   .icon-wrap + .icon-wrap {
diff --git a/packages/plugins/block/src/BlockPropertyForm.vue b/packages/plugins/block/src/BlockPropertyForm.vue
index 374e48b752..7c90847639 100644
--- a/packages/plugins/block/src/BlockPropertyForm.vue
+++ b/packages/plugins/block/src/BlockPropertyForm.vue
@@ -270,7 +270,7 @@ export default {
   display: inline-block;
   margin-top: 6px;
   font-size: 12px;
-  color: var(--ti-lowcode-common-primary-color);
+  color: var(--te-common-text-checked);
   cursor: pointer;
 
   .text {
@@ -296,8 +296,8 @@ export default {
   width: 280px;
   height: 100%;
   padding: 20px;
-  background-color: var(--ti-lowcode-common-component-bg);
-  border-right: 1px solid var(--ti-lowcode-toolbar-border-color);
+  background-color: var(--te-common-bg-default);
+  border-right: 1px solid var(--te-common-border-default);
 }
 
 .config-list {
diff --git a/packages/plugins/block/src/BlockPropertyList.vue b/packages/plugins/block/src/BlockPropertyList.vue
index c94ba9bf26..f33bbf5df2 100644
--- a/packages/plugins/block/src/BlockPropertyList.vue
+++ b/packages/plugins/block/src/BlockPropertyList.vue
@@ -93,7 +93,7 @@ export default {
     padding: 0 12px;
     width: 66px;
     margin-right: 5px;
-    border: 1px solid var(--ti-lowcode-base-default-button-border-disable-color);
+    border: 1px solid var(--te-common-border-default);
   }
   .plus-icon {
     width: 16px;
diff --git a/packages/plugins/block/src/Main.vue b/packages/plugins/block/src/Main.vue
index 43085bebb3..6d707d3ad9 100644
--- a/packages/plugins/block/src/Main.vue
+++ b/packages/plugins/block/src/Main.vue
@@ -488,13 +488,13 @@ export default {
   left: -6px;
   right: 0;
   padding: 10px 16px;
-  background-color: var(--ti-lowcode-component-search-bg);
-  color: var(--ti-lowcode-component-block-list-item-color);
+  background-color: var(--te-common-bg-default);
+  color: var(--te-common-text-primary);
   display: flex;
   justify-content: space-between;
   .footer-layout {
     font-size: 12px;
-    color: var(--ti-lowcode-component-block-list-item-color);
+    color: var(--te-common-text-primary);
     .tiny-svg {
       cursor: pointer;
       margin-left: 8px;
@@ -526,7 +526,7 @@ export default {
     .popper__arrow {
       &,
       &::after {
-        border-right-color: var(--ti-lowcode-common-component-hover-bg);
+        border-right-color: var(--te-common-bg-container);
       }
     }
   }
@@ -539,7 +539,7 @@ export default {
     font-size: 12px;
     color: var(--ti-lowcode-materials-block-group-delete-popover-title-color);
     .icon {
-      color: var(--ti-lowcode-warning-color);
+      color: var(--te-common-color-warning);
       width: 16px;
       height: 16px;
     }
diff --git a/packages/plugins/block/src/SaveNewBlock.vue b/packages/plugins/block/src/SaveNewBlock.vue
index 28fdb0476a..51b214e1ed 100644
--- a/packages/plugins/block/src/SaveNewBlock.vue
+++ b/packages/plugins/block/src/SaveNewBlock.vue
@@ -135,6 +135,6 @@ export default {
 
 <style scoped lang="less">
 .block-tip {
-  color: var(--ti-lowcode-error-tip-color);
+  color: var(--te-common-color-error);
 }
 </style>
diff --git a/packages/plugins/bridge/src/BridgeSetting.vue b/packages/plugins/bridge/src/BridgeSetting.vue
index 7655882176..2c79dd5e0a 100644
--- a/packages/plugins/bridge/src/BridgeSetting.vue
+++ b/packages/plugins/bridge/src/BridgeSetting.vue
@@ -319,7 +319,7 @@ export default {
     color: var(--ti-lowcode-data-source-color);
     .help-link {
       display: inline-block;
-      color: var(--ti-lowcode-common-primary-color);
+      color: var(--te-common-text-link);
       font-size: 12px;
       margin-left: 16px;
       &:hover {
@@ -354,7 +354,7 @@ export default {
     }
 
     .del:hover {
-      background-color: var(--ti-lowcode-delete-button-hover-bg);
+      background-color: var(--te-common-color-error);
     }
   }
   .cdn-label-wrap {
diff --git a/packages/plugins/datasource/src/DataSourceField.vue b/packages/plugins/datasource/src/DataSourceField.vue
index 167458df4b..88e5227b46 100644
--- a/packages/plugins/datasource/src/DataSourceField.vue
+++ b/packages/plugins/datasource/src/DataSourceField.vue
@@ -186,10 +186,10 @@ export default {
         align-items: center;
 
         &.field-row-add {
-          color: var(--ti-lowcode-datasource-json-border-colorr);
+          color: var(--ti-lowcode-datasource-json-border-color);
 
           svg {
-            color: var(--ti-lowcode-datasource-json-border-colorr);
+            color: var(--ti-lowcode-datasource-json-border-color);
           }
         }
       }
diff --git a/packages/plugins/datasource/src/DataSourceList.vue b/packages/plugins/datasource/src/DataSourceList.vue
index 631b84736b..9676700ecc 100644
--- a/packages/plugins/datasource/src/DataSourceList.vue
+++ b/packages/plugins/datasource/src/DataSourceList.vue
@@ -152,7 +152,7 @@ export default {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      color: var(--ti-lowcode-base-gray-90);
+      color: var(--te-common-text-primary);
       .item-name {
         display: flex;
         align-items: center;
diff --git a/packages/plugins/datasource/src/DataSourceRecordList.vue b/packages/plugins/datasource/src/DataSourceRecordList.vue
index f24d2868e3..d23a72c8dc 100644
--- a/packages/plugins/datasource/src/DataSourceRecordList.vue
+++ b/packages/plugins/datasource/src/DataSourceRecordList.vue
@@ -615,7 +615,7 @@ export default {
     font-size: 12px;
     text-align: left;
     padding: 0;
-    color: var(--ti-lowcode-base-text-color);
+    color: var(--te-common-text-primary);
     .icon-download {
       margin: 0 1px 4px 0;
       font-size: 16px;
@@ -631,10 +631,9 @@ export default {
   .empty-icon {
     width: 50px;
     height: 50px;
-    color: var(--ti-lowcode-datasource-common-empty-color);
   }
   .add-column {
-    color: var(--ti-lowcode-datasource-json-border-colorr);
+    color: var(--ti-lowcode-datasource-json-border-color);
     cursor: pointer;
   }
 }
diff --git a/packages/plugins/datasource/src/DataSourceRemoteDataResult.vue b/packages/plugins/datasource/src/DataSourceRemoteDataResult.vue
index 5cdf2319ec..e15f0e9c01 100644
--- a/packages/plugins/datasource/src/DataSourceRemoteDataResult.vue
+++ b/packages/plugins/datasource/src/DataSourceRemoteDataResult.vue
@@ -123,7 +123,7 @@ export default {
   .monaco-editor {
     height: 120px;
     margin-top: 8px;
-    border: 1px solid var(--ti-lowcode-base-gray-101);
+    border: 1px solid var(--te-common-border-divider);
     border-radius: 4px;
   }
 }
diff --git a/packages/plugins/datasource/src/DataSourceRemoteForm.vue b/packages/plugins/datasource/src/DataSourceRemoteForm.vue
index 9bee5dcddb..fe2f016148 100644
--- a/packages/plugins/datasource/src/DataSourceRemoteForm.vue
+++ b/packages/plugins/datasource/src/DataSourceRemoteForm.vue
@@ -100,18 +100,6 @@ export default {
       width: 100px;
       border: none;
     }
-    :deep(.tiny-input-group__prepend) {
-      background: var(--ti-lowcode-datasource-respones-select-color-bg);
-      border-color: var(--ti-lowcode-datasource-select-border-color);
-      .tiny-input-suffix {
-        .tiny-input-display-only {
-          .tiny-input__inner {
-            border-color: var(--ti-lowcode-datasource-select-border-right-color-bg);
-            border-left: none;
-          }
-        }
-      }
-    }
     :deep(.tiny-input-suffix) {
       width: 100px;
       .tiny-input__inner {
@@ -123,9 +111,6 @@ export default {
       border: none;
       background: var(--ti-lowcode-datasource-respones-color-bg);
     }
-    .requestBtn {
-      color: var(--ti-lowcode-datasource-respones-border-color-bg);
-    }
     :deep(.border-input) {
       input {
         border-radius: 0;
diff --git a/packages/plugins/datasource/src/DataSourceRemotePanel.vue b/packages/plugins/datasource/src/DataSourceRemotePanel.vue
index e39ecacdc5..6d4d4f5801 100644
--- a/packages/plugins/datasource/src/DataSourceRemotePanel.vue
+++ b/packages/plugins/datasource/src/DataSourceRemotePanel.vue
@@ -305,19 +305,6 @@ export default {
       :deep(.tiny-tabs__content) {
         margin: 12px 0;
       }
-      :deep(.is-active) {
-        .tiny-tabs__item__title {
-          color: var(--ti-lowcode-datasource-tabs-bottom-border-color);
-        }
-      }
-      :deep(.tiny-tabs__item__title) {
-        font-size: 14px;
-      }
-    }
-    :deep(.tiny-tabs__item__title) {
-      margin-right: 20px;
-      margin-left: 15px;
-      color: var(--ti-lowcode-datasource-label-color);
     }
   }
 }
diff --git a/packages/plugins/datasource/src/DataSourceRemoteParameter.vue b/packages/plugins/datasource/src/DataSourceRemoteParameter.vue
index 18e8727a54..9fd88ef83b 100644
--- a/packages/plugins/datasource/src/DataSourceRemoteParameter.vue
+++ b/packages/plugins/datasource/src/DataSourceRemoteParameter.vue
@@ -43,7 +43,7 @@ export default {
 .monaco-editor {
   height: 180px;
   margin-top: 8px;
-  border: 1px solid var(--ti-lowcode-base-gray-101);
+  border: 1px solid var(--te-common-border-divider);
   border-radius: 4px;
 }
 </style>
diff --git a/packages/plugins/datasource/src/DataSourceTemplate.vue b/packages/plugins/datasource/src/DataSourceTemplate.vue
index e3c49d0684..8c9a998f1e 100644
--- a/packages/plugins/datasource/src/DataSourceTemplate.vue
+++ b/packages/plugins/datasource/src/DataSourceTemplate.vue
@@ -79,7 +79,7 @@ export default {
       }
     }
     .blue::before {
-      border: 1px solid var(--ti-lowcode-datasource-json-border-colorr);
+      border: 1px solid var(--ti-lowcode-datasource-json-border-color);
     }
 
     .green::before {
@@ -105,7 +105,7 @@ export default {
     .tiny-button {
       color: var(--ti-lowcode-datasource-toolbar-breadcrumb-color);
       &.tiny-button--primary {
-        border-color: var(--ti-lowcode-datasource-common-primary-color);
+        border-color: var(--ti-lowcode-datasource-common-border-primary-color);
       }
 
       &.tiny-button--success {
diff --git a/packages/plugins/datasource/src/DataSourceType.vue b/packages/plugins/datasource/src/DataSourceType.vue
index 95d137a490..58f245e44c 100644
--- a/packages/plugins/datasource/src/DataSourceType.vue
+++ b/packages/plugins/datasource/src/DataSourceType.vue
@@ -117,7 +117,7 @@ export default {
     &.is-checked {
       color: var(--ti-lowcode-datasource-toolbar-breadcrumb-color);
       .svg-icon {
-        color: var(--ti-lowcode-datasource-common-primary-color);
+        color: var(--ti-lowcode-datasource-common-border-primary-color);
       }
     }
     .svg-icon {
diff --git a/packages/plugins/datasource/src/RemoteDataAdapterForm.vue b/packages/plugins/datasource/src/RemoteDataAdapterForm.vue
index 464e7cc9b2..88f1be9487 100644
--- a/packages/plugins/datasource/src/RemoteDataAdapterForm.vue
+++ b/packages/plugins/datasource/src/RemoteDataAdapterForm.vue
@@ -55,12 +55,11 @@ export default {
   justify-content: space-between;
   align-items: center;
   padding: 8px 12px;
-  background: var(--ti-lowcode-datasource-toolbar-bg);
   margin-top: 12px;
-  font-size: 14px;
+  font-size: 12px;
 
   div {
-    color: var(--ti-lowcode-datasource-toolbar-breadcrumb-color);
+    color: var(--te-common-text-secondary);
   }
 
   .icon-del {
@@ -73,7 +72,7 @@ export default {
   min-height: 120px;
   height: 100%;
   margin-top: 8px;
-  border: 1px solid var(--ti-lowcode-base-gray-101);
+  border: 1px solid var(--te-common-border-divider);
   border-radius: 4px;
 }
 </style>
diff --git a/packages/plugins/i18n/src/Main.vue b/packages/plugins/i18n/src/Main.vue
index e41bd7d104..5b30193472 100644
--- a/packages/plugins/i18n/src/Main.vue
+++ b/packages/plugins/i18n/src/Main.vue
@@ -505,7 +505,7 @@ export default {
       margin-top: 13px;
     }
     :deep(.path) {
-      stroke: var(--ti-lowcode-toolbar-breadcrumb-color);
+      stroke: var(--te-common-text-secondary);
     }
   }
   .download-btn {
@@ -515,12 +515,12 @@ export default {
     font-size: 12px;
     text-align: left;
     padding: 0;
-    color: var(--ti-lowcode-base-text-color);
+    color: var(--te-common-text-primary);
     svg {
       font-size: 16px;
     }
     .tiny-button.tiny-button--text {
-      color: var(--ti-lowcode-base-text-color);
+      color: var(--te-common-text-primary);
     }
   }
 }
@@ -547,7 +547,7 @@ export default {
   padding: 20px;
   svg {
     font-size: 20px;
-    color: var(--ti-lowcode-warning-color);
+    color: var(--te-common-color-warning);
   }
   .delete-tip {
     margin-left: 5px;
diff --git a/packages/plugins/materials/src/meta/block/src/BlockDetail.vue b/packages/plugins/materials/src/meta/block/src/BlockDetail.vue
index fb4f5863cd..84841d3f6c 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockDetail.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockDetail.vue
@@ -115,7 +115,7 @@ export default {
 <style lang="less" scoped>
 .block-detail-panel {
   width: 228px;
-  background-color: var(--ti-lowcode-toolbar-view-hover-bg);
+  background-color: var(--te-common-bg-container);
   border-radius: 3px;
 
   .block-detail-title {
@@ -125,14 +125,14 @@ export default {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    border-bottom: 1px solid var(--ti-lowcode-toolbar-popover-color);
+    border-bottom: 1px solid var(--te-common-border-default);
 
     .block-detail-icon {
       width: 20px;
       height: 20px;
       color: var(--ti-lowcode-toolbar-title-color);
-      background: var(--ti-lowcode-canvas-wrap-bg);
-      border: 1px solid var(--ti-lowcode-toolbar-border-color);
+      background: var(--te-common-bg-container);
+      border: 1px solid var(--te-common-border-default);
       font-size: 12px;
       cursor: pointer;
       display: inline-flex;
@@ -152,7 +152,7 @@ export default {
 
   .block-detail-content {
     &:not(:last-child) {
-      border-bottom: 1px solid var(--ti-lowcode-toolbar-border-color);
+      border-bottom: 1px solid var(--te-common-border-default);
     }
 
     .block-detail-history {
@@ -161,9 +161,8 @@ export default {
 
     .block-detail-item {
       padding: 8px 12px;
-      color: var(--ti-lowcode-dialog-font-color);
+      color: var(--te-common-text-primary);
       font-size: 12px;
-
       span {
         margin-right: 4px;
       }
diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroup.vue b/packages/plugins/materials/src/meta/block/src/BlockGroup.vue
index 11a0c71d8d..9387d7a837 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockGroup.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockGroup.vue
@@ -476,7 +476,7 @@ export default {
     .popper__arrow {
       &,
       &::after {
-        border-right-color: var(--ti-lowcode-common-component-hover-bg);
+        border-right-color: var(--te-common-bg-container);
       }
     }
   }
@@ -489,7 +489,7 @@ export default {
     font-size: 12px;
     color: var(--ti-lowcode-materials-block-group-delete-popover-title-color);
     .icon {
-      color: var(--ti-lowcode-warning-color);
+      color: var(--te-common-color-warning);
       width: 16px;
       height: 16px;
     }
diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroupArrange.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupArrange.vue
index 20b1fa6bcc..a737a267fb 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockGroupArrange.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockGroupArrange.vue
@@ -82,10 +82,10 @@ export default {
     align-items: center;
     transition: 0.3s;
     &:hover {
-      color: var(--ti-lowcode-common-primary-color);
+      color: var(--te-common-text-checked);
     }
     &.active {
-      color: var(--ti-lowcode-common-primary-color);
+      color: var(--te-common-text-checked);
     }
   }
   .icon-wrap + .icon-wrap {
diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroupSort.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupSort.vue
index f5c2dd2637..df5dc988dd 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockGroupSort.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockGroupSort.vue
@@ -78,11 +78,11 @@ export default {
 
 <style lang="less" scoped>
 .sort-text {
-  color: var(--ti-lowcode-toolbar-breadcrumb-color);
+  color: var(--te-common-text-secondary);
   margin-right: 6px;
 }
 .sort-caret {
-  color: var(--ti-lowcode-toolbar-breadcrumb-color);
+  color: var(--te-common-text-secondary);
   cursor: pointer;
 }
 
diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroupTransfer.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupTransfer.vue
index 3a76ac523b..bb8d2389ae 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockGroupTransfer.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockGroupTransfer.vue
@@ -169,7 +169,7 @@ export default {
       margin-left: 8px;
     }
     .footer-text {
-      color: var(--ti-lowcode-toolbar-breadcrumb-color);
+      color: var(--te-common-text-secondary);
     }
   }
 }
diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroupTransferPanel.vue b/packages/plugins/materials/src/meta/block/src/BlockGroupTransferPanel.vue
index cf9ff78686..8309a803e8 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockGroupTransferPanel.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockGroupTransferPanel.vue
@@ -44,7 +44,7 @@ export default {
 <style lang="less" scoped>
 .block-add-transfer-panel {
   height: 100%;
-  border: 1px solid var(--ti-lowcode-component-block-list-border-color);
+  border: 1px solid var(--te-common-border-default);
   border-radius: 6px;
   overflow: hidden;
   background-color: var(--ti-lowcode-materials-block-transfer-bg-color);
diff --git a/packages/plugins/materials/src/meta/block/src/BlockList.vue b/packages/plugins/materials/src/meta/block/src/BlockList.vue
index 9660f3d343..61768b9848 100644
--- a/packages/plugins/materials/src/meta/block/src/BlockList.vue
+++ b/packages/plugins/materials/src/meta/block/src/BlockList.vue
@@ -209,21 +209,3 @@ export default {
   }
 }
 </script>
-
-<style lang="less" scoped>
-.block-detail-popover {
-  position: fixed;
-  z-index: 20;
-  .arrow {
-    width: 0;
-    height: 0;
-    border: 10px solid transparent;
-    border-bottom-color: var(--ti-lowcode-toolbar-view-hover-bg);
-    display: inline-block;
-    position: absolute;
-    top: -20px;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-}
-</style>
diff --git a/packages/plugins/materials/src/meta/component/src/Main.vue b/packages/plugins/materials/src/meta/component/src/Main.vue
index 9a5e2a2c1a..286c8872bd 100644
--- a/packages/plugins/materials/src/meta/component/src/Main.vue
+++ b/packages/plugins/materials/src/meta/component/src/Main.vue
@@ -146,7 +146,7 @@ export default {
       text-align: center;
       user-select: none;
       cursor: move;
-      background: var(--ti-lowcode-common-component-bg);
+      background: var(--te-common-bg-default);
 
       &:hover {
         background: var(--ti-lowcode-material-component-list-hover-bg);
@@ -159,7 +159,7 @@ export default {
         svg {
           font-size: 40px;
           vertical-align: middle;
-          color: var(--ti-lowcode-component-icon-color);
+          color: var(--te-common-icon-secondary);
           overflow: hidden;
         }
       }
diff --git a/packages/plugins/page/src/PageGeneral.vue b/packages/plugins/page/src/PageGeneral.vue
index c141518e1d..4ae3f3d1de 100644
--- a/packages/plugins/page/src/PageGeneral.vue
+++ b/packages/plugins/page/src/PageGeneral.vue
@@ -238,7 +238,6 @@ export default {
       .tiny-input-group__prepend {
         border: 1px solid var(--ti-lowcode-page-manage-input-group-border-color);
         background: var(--ti-lowcode-page-manage-input-group-color);
-        border-right: 1px solid var(--ti-lowcode-page-manage-input-group-border-right-color);
       }
       .page-type-radio {
         color: var(--ti-lowcode-page-manage-title-background-text-color);
@@ -256,7 +255,7 @@ export default {
     }
   }
   .tip {
-    color: var(--ti-lowcode-page-manage-tip-border-color);
+    color: var(--ti-lowcode-page-manage-tip-text-color);
     font-size: 12px;
     border-radius: 3px;
     display: flex;
@@ -279,7 +278,6 @@ export default {
 .tiny-select-dropdown.parent-fold-select-dropdown {
   .tiny-tree {
     background-color: var(--ti-lowcode-page-manage-tree-text-background-color);
-
     .tiny-tree-node {
       &.is-current {
         .tiny-tree-node__content {
diff --git a/packages/plugins/page/src/PageInputOutput.vue b/packages/plugins/page/src/PageInputOutput.vue
index 83663c81b7..de99e0ad84 100644
--- a/packages/plugins/page/src/PageInputOutput.vue
+++ b/packages/plugins/page/src/PageInputOutput.vue
@@ -128,7 +128,7 @@ export default {
     margin-top: 12px;
   }
   .edit-btn-icon {
-    color: var(--ti-lowcode-common-text-main-color);
+    color: var(--te-common-text-secondary);
     margin-right: 6px;
   }
   :deep(.edit-btn) {
diff --git a/packages/plugins/page/src/PageSetting.vue b/packages/plugins/page/src/PageSetting.vue
index 2578c1d19a..3550e4a34a 100644
--- a/packages/plugins/page/src/PageSetting.vue
+++ b/packages/plugins/page/src/PageSetting.vue
@@ -393,12 +393,6 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.tiny-search {
-  padding: 10px;
-  border-top: 1px solid var(--ti-lowcode-page-manage-tip-border-color);
-  border-bottom: 1px solid var(--ti-lowcode-page-manage-tip-border-color);
-}
-
 .block-add-content {
   display: flex;
   flex-direction: column;
diff --git a/packages/plugins/schema/src/Main.vue b/packages/plugins/schema/src/Main.vue
index aa9df3f789..c02857ab5f 100644
--- a/packages/plugins/schema/src/Main.vue
+++ b/packages/plugins/schema/src/Main.vue
@@ -147,13 +147,13 @@ export default {
   position: fixed;
   top: var(--base-top-panel-height);
   left: 41px;
-  background: var(--ti-lowcode-common-component-bg);
+  background: var(--te-common-bg-default);
   box-shadow: 2px 2px 6px rgb(0 0 0 / 60%);
   z-index: 1000;
   .source-code-header {
     display: flex;
     justify-content: space-between;
-    border-bottom: 1px solid var(--ti-lowcode-toolbar-border-color);
+    border-bottom: 1px solid var(--te-common-border-default);
     margin-bottom: 12px;
   }
   .title {
@@ -192,7 +192,7 @@ export default {
   }
   .source-code-content {
     height: calc(100% - 42px);
-    border: 1px solid var(--ti-lowcode-base-gray-101);
+    border: 1px solid var(--te-common-border-divider);
     border-radius: 4px;
   }
   .code-edit-content {
diff --git a/packages/plugins/script/src/Main.vue b/packages/plugins/script/src/Main.vue
index a4d1251cdb..c9d1cbfc85 100644
--- a/packages/plugins/script/src/Main.vue
+++ b/packages/plugins/script/src/Main.vue
@@ -151,7 +151,7 @@ export default {
         .dots {
           width: 10px;
           height: 10px;
-          background: var(--ti-lowcode-warning-color-1);
+          background: var(--te-common-color-warning);
           border-radius: 50%;
           position: absolute;
           top: 5px;
@@ -166,7 +166,7 @@ export default {
     height: calc(100% - 54px);
 
     & > div {
-      border: 1px solid var(--ti-lowcode-base-gray-101);
+      border: 1px solid var(--te-common-border-divider);
       border-radius: 4px;
       height: 100%;
     }
diff --git a/packages/plugins/state/src/CreateRemoteAPI.vue b/packages/plugins/state/src/CreateRemoteAPI.vue
index f5fedafe19..c8ad2bcee1 100644
--- a/packages/plugins/state/src/CreateRemoteAPI.vue
+++ b/packages/plugins/state/src/CreateRemoteAPI.vue
@@ -190,7 +190,7 @@ export default {
   padding: 12px;
 
   .error-tip {
-    color: var(--ti-lowcode-error-tip-color);
+    color: var(--te-common-color-error);
     margin-top: 4px;
     font-size: 12px;
   }
@@ -240,24 +240,24 @@ export default {
     align-items: center;
     padding: 8px 12px;
     background: var(--ti-lowcode-toolbar-bg);
-    border-top: 1px solid var(--ti-lowcode-toolbar-border-color);
-    border-bottom: 1px solid var(--ti-lowcode-toolbar-border-color);
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    border-top: 1px solid var(--te-common-border-default);
+    border-bottom: 1px solid var(--te-common-border-default);
+    color: var(--te-common-text-secondary);
   }
 
   .use-service {
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    color: var(--te-common-text-secondary);
     font-size: 12px;
     margin-top: 10px;
 
     span {
-      color: var(--ti-lowcode-description-error-color);
+      color: var(--te-common-color-error);
     }
   }
 
   .send-service {
     text-align: right;
-    border-top: 1px solid var(--ti-lowcode-toolbar-border-color);
+    border-top: 1px solid var(--te-common-border-default);
     padding: 20px 10px;
     margin-bottom: 10px;
 
@@ -297,7 +297,7 @@ export default {
     .icon {
       width: 20px;
       height: 20px;
-      color: var(--ti-lowcode-toolbar-breadcrumb-color);
+      color: var(--te-common-text-secondary);
       font-size: 16px;
       border-radius: 2px;
       margin-right: 8px;
diff --git a/packages/plugins/state/src/CreateStore.vue b/packages/plugins/state/src/CreateStore.vue
index 57261ce757..43784ceed7 100644
--- a/packages/plugins/state/src/CreateStore.vue
+++ b/packages/plugins/state/src/CreateStore.vue
@@ -282,7 +282,7 @@ export default {
 
 .create-content-description {
   font-size: 12px;
-  color: var(--ti-lowcode-common-primary-color);
+  color: var(--te-common-text-emphasize);
   margin-left: 8px;
   cursor: pointer;
 }
diff --git a/packages/plugins/state/src/CreateVariable.vue b/packages/plugins/state/src/CreateVariable.vue
index 3206354ee6..0bb46c453b 100644
--- a/packages/plugins/state/src/CreateVariable.vue
+++ b/packages/plugins/state/src/CreateVariable.vue
@@ -482,7 +482,7 @@ export default {
 
 .create-content-description {
   font-size: 12px;
-  color: var(--ti-lowcode-common-primary-color);
+  color: var(--te-common-text-emphasize);
   margin-left: 8px;
   cursor: pointer;
 }
@@ -500,24 +500,3 @@ export default {
   }
 }
 </style>
-
-<style lang="less">
-.tiny-popover.tiny-popper.state-data-example-tips {
-  background-color: var(--ti-lowcode-data-example-bg-color);
-  color: var(--ti-lowcode-data-example-color);
-
-  &[x-placement^='bottom'] .popper__arrow {
-    &,
-    &::after {
-      border-bottom-color: var(--ti-lowcode-data-example-bg-color);
-    }
-  }
-
-  &[x-placement^='top'] .popper__arrow {
-    &,
-    &::after {
-      border-top-color: var(--ti-lowcode-data-example-bg-color);
-    }
-  }
-}
-</style>
diff --git a/packages/plugins/state/src/DataSourceList.vue b/packages/plugins/state/src/DataSourceList.vue
index 1e42506ecd..702bb247fd 100644
--- a/packages/plugins/state/src/DataSourceList.vue
+++ b/packages/plugins/state/src/DataSourceList.vue
@@ -119,19 +119,16 @@ export default {
   padding-top: 12px;
   border-top: 1px solid var(--ti-lowcode-data-source-border-color);
   overflow-y: scroll;
-  .data-source-list-blank {
-    font-size: 12px;
-  }
   .data-source-list-item {
     &.selected,
     &:hover {
-      background: var(--ti-lowcode-common-component-hover-bg);
+      background: var(--te-common-bg-container);
       .item-head-right {
         display: flex;
         justify-content: flex-end;
         width: 30%;
         .svg-button {
-          color: var(--ti-lowcode-toolbar-breadcrumb-color);
+          color: var(--te-common-text-secondary);
           font-size: 14px;
           cursor: pointer;
 
@@ -203,18 +200,13 @@ export default {
     p span {
       &:first-child {
         font-size: 14;
-        color: var(--ti-lowcode-toolbar-breadcrumb-color);
+        color: var(--te-common-text-secondary);
       }
 
       &:last-child {
-        color: var(--ti-lowcode-dialog-font-color);
+        color: var(--te-common-text-primary);
       }
     }
   }
-  &-blank {
-    color: var(--ti-lowcode-state-management-query-color);
-    text-align: center;
-    padding-top: 30px;
-  }
 }
 </style>
diff --git a/packages/plugins/state/src/DataSourceRightPanel.vue b/packages/plugins/state/src/DataSourceRightPanel.vue
index 578e5d9c35..96e0234792 100644
--- a/packages/plugins/state/src/DataSourceRightPanel.vue
+++ b/packages/plugins/state/src/DataSourceRightPanel.vue
@@ -113,7 +113,7 @@ export default {
 .data-source-right-panel {
   width: 442px;
   height: 100%;
-  border-right: 1px solid var(--ti-lowcode-toolbar-border-color);
+  border-right: 1px solid var(--te-common-border-default);
   background: var(--ti-lowcode-toolbar-bg);
   position: absolute;
   left: calc(var(--base-left-panel-width) - 6px);
@@ -126,7 +126,7 @@ export default {
     height: 45px;
     padding: 0 12px;
     color: var(--ti-lowcode-toolbar-icon-color);
-    background: var(--ti-lowcode-toolbar-view-hover-bg);
+    background: var(--te-common-bg-container);
     border-bottom: 1px solid var(--ti-lowcode-tabs-border-color);
   }
 }
diff --git a/packages/plugins/state/src/Main.vue b/packages/plugins/state/src/Main.vue
index 8d49ec06eb..12fafb80cf 100644
--- a/packages/plugins/state/src/Main.vue
+++ b/packages/plugins/state/src/Main.vue
@@ -443,8 +443,8 @@ export default {
   .data-source-right-panel {
     width: 492px;
     height: 100%;
-    border-right: 1px solid var(--ti-lowcode-toolbar-border-color);
-    background: var(--ti-lowcode-common-component-bg);
+    border-right: 1px solid var(--te-common-border-default);
+    background: var(--te-common-bg-default);
     position: absolute;
     left: var(--base-left-panel-width);
     top: 0;
@@ -458,7 +458,7 @@ export default {
       font-size: 12px;
       font-weight: 700;
       color: var(--ti-lowcode-data-source-color);
-      background: var(--ti-lowcode-common-component-bg);
+      background: var(--te-common-bg-default);
       border-bottom: 1px solid var(--ti-lowcode-data-header-border-bottom-color);
       .options-wrap {
         display: flex;
@@ -495,21 +495,12 @@ export default {
   :deep(.tiny-tabs__item) {
     flex: 1 1 auto;
     text-align: center;
-    color: var(--ti-lowcode-common-primary-text-color);
-    &:not(.is-active) {
-      background-color: var(--ti-lowcode-data-radio-group-bg);
-    }
   }
 
   :deep(.tiny-tabs__nav) {
     float: none;
     display: flex;
     flex-wrap: wrap;
-    .tiny-tabs__item {
-      &.is-active {
-        background-color: var(--ti-lowcode-data-radio-group-active-bg);
-      }
-    }
   }
 
   :deep(.tiny-tabs__content) {
diff --git a/packages/plugins/tree/src/Main.vue b/packages/plugins/tree/src/Main.vue
index 6c87a84b4d..aa52b17dab 100644
--- a/packages/plugins/tree/src/Main.vue
+++ b/packages/plugins/tree/src/Main.vue
@@ -295,7 +295,6 @@ export default {
     .tree-handle {
       svg {
         color: var(--ti-lowcode-tree-icon-color);
-
         &:hover {
           color: var(--ti-lowcode-tree-hover-icon-color);
         }
@@ -317,10 +316,6 @@ export default {
         width: 14px;
         height: 14px;
         margin-bottom: 2px;
-
-        &:hover {
-          color: var(--ti-lowcode-tree-icon-hover-color);
-        }
       }
     }
     .high-light-node {
@@ -331,15 +326,15 @@ export default {
   }
 
   :deep(.tiny-grid .tiny-grid__body-wrapper .tiny-grid-body__row) {
-    background-color: var(--ti-lowcode-common-component-bg);
+    background-color: var(--te-common-bg-default);
     &:hover {
-      background-color: var(--ti-lowcode-common-component-hover-bg);
+      background-color: var(--te-common-bg-container);
     }
   }
   :deep(.tiny-grid .tiny-grid__body-wrapper .tiny-grid-body__row:not(.row__hover):nth-child(2n)) {
-    background-color: var(--ti-lowcode-common-component-bg);
+    background-color: var(--te-common-bg-default);
     &:hover {
-      background-color: var(--ti-lowcode-common-component-hover-bg);
+      background-color: var(--te-common-bg-container);
     }
   }
   :deep(.tiny-grid-body__row.nav-tree .tiny-grid-cell) {
diff --git a/packages/plugins/tutorial/src/TutorialVideoPanel.vue b/packages/plugins/tutorial/src/TutorialVideoPanel.vue
index ac17ff157f..d8e5404b25 100644
--- a/packages/plugins/tutorial/src/TutorialVideoPanel.vue
+++ b/packages/plugins/tutorial/src/TutorialVideoPanel.vue
@@ -95,13 +95,13 @@ export default {
   }
 
   .content {
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    color: var(--te-common-text-secondary);
     line-height: 25px;
     text-indent: 24px;
     padding-top: 20px;
   }
   :deep(.md) {
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    color: var(--te-common-text-secondary);
     ul {
       padding-left: 20px;
     }
diff --git a/packages/settings/design/src/App.vue b/packages/settings/design/src/App.vue
index 6f70c0610e..1e3c55f175 100644
--- a/packages/settings/design/src/App.vue
+++ b/packages/settings/design/src/App.vue
@@ -97,14 +97,9 @@ export default {
 
 <style lang="less">
 :root {
-  --ti-lowcode-common-primary-color: #5e7ce0;
-  --ti-lowcode-common-text-title-color: #252b3a;
   --ti-lowcode-common-secondary-text-color: #adb0b8;
-  --ti-lowcode-common-text-main-color: #575d6c;
-  --ti-lowcode-design-plugin-color: #8a8e99;
   --ti-lowcode-common-border-color: #dfe1e6;
   --ti-lowcode-common-hover-bg-color: #f2f5fc;
-  --ti-lowcode-title-color: #333;
   --ti-lowcode-mask-bg: #fafafa;
   --max-height: calc(65vh - 70px);
 }
@@ -189,7 +184,7 @@ td {
   .source-code {
     --ti-lowcode-toolbar-bg: var(--ti-lowcode-mask-bg);
     .tiny-button {
-      --ti-button-info-normal-bg-color: var(--ti-lowcode-common-primary-color);
+      --ti-button-info-normal-bg-color: var(--te-common-color-info);
     }
   }
 }
diff --git a/packages/settings/design/src/components/ArrayConfigItemForm.vue b/packages/settings/design/src/components/ArrayConfigItemForm.vue
index 977dc5e67b..c80612269b 100644
--- a/packages/settings/design/src/components/ArrayConfigItemForm.vue
+++ b/packages/settings/design/src/components/ArrayConfigItemForm.vue
@@ -197,7 +197,7 @@ export default {
   cursor: pointer;
   display: flex;
   align-items: center;
-  color: var(--ti-lowcode-common-text-title-color);
+  color: var(--te-common-text-primary);
   .config-title {
     margin-left: 6px;
   }
@@ -205,12 +205,12 @@ export default {
 .config-item-form {
   :deep(.tiny-form-item) {
     .tiny-form-item__label {
-      color: var(--ti-lowcode-common-text-main-color);
+      color: var(--te-common-text-secondary);
     }
     .tiny-form-item__content {
       .editor-warp {
-        --ti-lowcode-meta-codeEditor-border-color: var(--ti-lowcode-common-secondary-text-color);
-        --ti-lowcode-meta-codeEditor-color: var(--ti-lowcode-common-secondary-text-color);
+        --ti-lowcode-meta-codeEditor-border-color: var(--te-common-text-secondary);
+        --ti-lowcode-meta-codeEditor-color: var(--te-common-text-secondary);
       }
     }
   }
diff --git a/packages/settings/design/src/components/PropertyCanvas.vue b/packages/settings/design/src/components/PropertyCanvas.vue
index 20acad7891..27476a48b2 100644
--- a/packages/settings/design/src/components/PropertyCanvas.vue
+++ b/packages/settings/design/src/components/PropertyCanvas.vue
@@ -246,11 +246,11 @@ export default {
         align-items: center;
         justify-content: space-between;
         h6 {
-          color: var(--ti-lowcode-common-text-title-color);
+          color: var(--te-common-text-primary);
         }
         .option-icon {
           display: inline-block;
-          color: var(--ti-lowcode-design-plugin-color);
+          color: var(--ti-lowcode-design-plugin-icon-color);
         }
         .option-tips + .option-tips {
           margin-left: 8px;
@@ -259,12 +259,12 @@ export default {
     }
 
     .tiny-collapse-item__header {
-      color: var(--ti-lowcode-toolbar-breadcrumb-color);
-      background-color: var(--ti-lowcode-tabs-bg);
+      color: var(--te-common-text-secondary);
+      background-color: var(--te-common-bg-prompt);
       font-weight: 600;
 
       svg {
-        color: var(--ti-lowcode-toolbar-breadcrumb-color);
+        color: var(--te-common-text-secondary);
         margin-right: 4px;
       }
     }
@@ -276,7 +276,7 @@ export default {
       background: var(--ti-lowcode-tabs-active-bg);
       border-top: none;
       border-bottom: 1px solid var(--ti-lowcode-tabs-border-color);
-      color: var(--ti-lowcode-toolbar-breadcrumb-color);
+      color: var(--te-common-text-secondary);
 
       .properties-item {
         padding: 3px 10px;
@@ -293,7 +293,7 @@ export default {
         .item-input {
           .meta-array-wrap {
             .top {
-              color: var(--ti-lowcode-toolbar-breadcrumb-color);
+              color: var(--te-common-text-secondary);
             }
             .actions {
               display: none;
@@ -303,7 +303,7 @@ export default {
       }
       .item-container {
         .empty {
-          color: var(--ti-lowcode-common-secondary-text-color);
+          color: var(--te-common-text-secondary);
         }
       }
     }
diff --git a/packages/settings/design/src/components/PropertyList.vue b/packages/settings/design/src/components/PropertyList.vue
index 2f7e40483c..ae0f6bab4b 100644
--- a/packages/settings/design/src/components/PropertyList.vue
+++ b/packages/settings/design/src/components/PropertyList.vue
@@ -110,7 +110,7 @@ export default {
   padding: 5px 10px;
   cursor: pointer;
   margin-bottom: 5px;
-  color: var(--ti-lowcode-common-text-title-color);
+  color: var(--te-common-text-primary);
   padding: 7px 7px;
   list-style: none;
   border: 1px solid var(--ti-lowcode-common-border-color);
diff --git a/packages/settings/design/src/components/SettingPanel.vue b/packages/settings/design/src/components/SettingPanel.vue
index 6aa65a8744..b24c10ca85 100644
--- a/packages/settings/design/src/components/SettingPanel.vue
+++ b/packages/settings/design/src/components/SettingPanel.vue
@@ -257,30 +257,30 @@ export default {
       font-size: 12px;
       flex-shrink: 0;
       margin-right: 10px;
-      color: var(--ti-lowcode-common-text-main-color);
+      color: var(--te-common-text-secondary);
     }
   }
 
   h5 {
     font-size: 13px;
-    color: var(--ti-lowcode-title-color);
+    color: var(--te-common-text-primary);
     margin: 20px 0;
   }
   .array-config-item {
     width: 100%;
     :deep(.list-group) {
       .option-item {
-        border-top: 1px solid var(--ti-lowcode-common-border-color);
+        border-top: 1px solid var(--te-common-border-default);
       }
       .option-item:last-child {
-        border-bottom: 1px solid var(--ti-lowcode-common-border-color);
+        border-bottom: 1px solid var(--te-common-border-default);
       }
       .item-icon {
-        color: var(--ti-lowcode-design-plugin-color);
+        color: var(--ti-lowcode-design-plugin-icon-color);
         fill: currentColor;
       }
       .item-text {
-        color: var(--ti-lowcode-title-color);
+        color: var(--te-common-text-primary);
       }
     }
     .operate-tips-item + .operate-tips-item {
@@ -288,7 +288,7 @@ export default {
     }
     .add-item {
       cursor: pointer;
-      color: var(--ti-lowcode-common-primary-color);
+      color: var(--te-common-text-emphasize);
       margin-top: 8px;
       .icon {
         margin-right: 4px;
@@ -310,7 +310,7 @@ export default {
       .item-label {
         width: 38%;
         word-break: break-all;
-        color: var(--ti-lowcode-toolbar-breadcrumb-color);
+        color: var(--te-common-text-secondary);
       }
       .component-wrap {
         flex: 1;
@@ -382,7 +382,7 @@ export default {
         border-color: transparent;
         padding: 6px 10px;
         &:hover {
-          background-color: var(--ti-lowcode-common-primary-color);
+          background-color: var(--te-common-bg-primary-checked);
         }
       }
     }
diff --git a/packages/settings/events/src/components/BindEventsDialogContent.vue b/packages/settings/events/src/components/BindEventsDialogContent.vue
index 3da6c581e1..8ae30bdb94 100644
--- a/packages/settings/events/src/components/BindEventsDialogContent.vue
+++ b/packages/settings/events/src/components/BindEventsDialogContent.vue
@@ -127,7 +127,7 @@ export default {
         width: 100%;
         height: 216px;
         padding: 12px 8px;
-        color: var(--ti-lowcode-toolbar-breadcrumb-color);
+        color: var(--te-common-text-secondary);
       }
       .mark {
         width: 100%;
@@ -141,7 +141,7 @@ export default {
 
     .params-tip {
       margin: 8px 0;
-      color: var(--ti-lowcode-error-tip-color);
+      color: var(--te-common-color-error);
     }
   }
   .content-right-top .content-right-title,
@@ -156,11 +156,11 @@ export default {
 
   .tip-error {
     .content-right-monaco {
-      border: 1px solid var(--ti-lowcode-error-tip-color);
+      border: 1px solid var(--te-common-color-error);
     }
     .params-tip,
     .new-action-tip {
-      color: var(--ti-lowcode-error-tip-color);
+      color: var(--te-common-color-error);
     }
   }
 }
diff --git a/packages/settings/props/src/components/Empty.vue b/packages/settings/props/src/components/Empty.vue
index 3095530b69..d5abc4081c 100644
--- a/packages/settings/props/src/components/Empty.vue
+++ b/packages/settings/props/src/components/Empty.vue
@@ -36,7 +36,7 @@ export default {
 
 <style lang="less" scoped>
 .empty-tips {
-  color: var(--ti-lowcode-common-text-color-5);
+  color: var(--te-common-text-weaken);
   text-align: center;
   margin-top: 50px;
   font-size: 12px;
diff --git a/packages/settings/props/src/components/groups/LifeCycle.vue b/packages/settings/props/src/components/groups/LifeCycle.vue
index 6de26ba538..95aa890e46 100644
--- a/packages/settings/props/src/components/groups/LifeCycle.vue
+++ b/packages/settings/props/src/components/groups/LifeCycle.vue
@@ -211,7 +211,7 @@ export default {
   li {
     padding: 4px 12px;
     &:hover {
-      background: var(--ti-lowcode-canvas-wrap-bg);
+      background: var(--te-common-bg-container);
       cursor: pointer;
     }
   }
@@ -225,10 +225,10 @@ export default {
     justify-content: space-between;
     padding: 8px 12px;
     cursor: pointer;
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    color: var(--te-common-text-secondary);
 
     svg {
-      color: var(--ti-lowcode-toolbar-breadcrumb-color);
+      color: var(--te-common-text-secondary);
     }
     .icon {
       margin-right: 8px;
@@ -239,7 +239,7 @@ export default {
     }
 
     &:hover {
-      background: var(--ti-lowcode-canvas-wrap-bg);
+      background: var(--te-common-bg-container);
     }
   }
 }
@@ -252,7 +252,7 @@ export default {
     margin-right: 12px;
 
     .life-cycle-list {
-      border: 1px solid var(--ti-lowcode-collapse-active-border-color);
+      border: 1px solid var(--te-common-border-default);
       box-shadow: 0 -1px 4px 0 rgba(0, 0, 0, 0.1);
       border-radius: 4px;
       height: 320px;
@@ -278,7 +278,7 @@ export default {
 
       &:hover {
         color: var(--ti-lowcode-toolbar-icon-color);
-        background: var(--ti-lowcode-canvas-wrap-bg);
+        background: var(--te-common-bg-container);
         .life-cycle-selected {
           opacity: 1;
         }
diff --git a/packages/settings/props/src/components/groups/TableColumn.vue b/packages/settings/props/src/components/groups/TableColumn.vue
index e298b8acbb..32d10a07ea 100644
--- a/packages/settings/props/src/components/groups/TableColumn.vue
+++ b/packages/settings/props/src/components/groups/TableColumn.vue
@@ -194,7 +194,7 @@ export default {
 .colums {
   width: 100%;
   .top {
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    color: var(--te-common-text-secondary);
     display: flex;
     justify-content: space-between;
     margin-bottom: 5px;
diff --git a/packages/settings/props/src/components/groups/TablePager.vue b/packages/settings/props/src/components/groups/TablePager.vue
index 2d321ea498..3897381089 100644
--- a/packages/settings/props/src/components/groups/TablePager.vue
+++ b/packages/settings/props/src/components/groups/TablePager.vue
@@ -62,7 +62,7 @@ export default {
 .colums {
   width: 100%;
   .top {
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    color: var(--te-common-text-secondary);
     display: flex;
     justify-content: space-between;
     margin-bottom: 5px;
diff --git a/packages/settings/props/src/components/inputs/DraggableOptions.vue b/packages/settings/props/src/components/inputs/DraggableOptions.vue
index 33d7ba57cb..804baf526f 100644
--- a/packages/settings/props/src/components/inputs/DraggableOptions.vue
+++ b/packages/settings/props/src/components/inputs/DraggableOptions.vue
@@ -176,7 +176,7 @@ export default {
 .options {
   width: 100%;
   .top {
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    color: var(--te-common-text-secondary);
     display: flex;
     justify-content: space-between;
     margin-bottom: 5px;
diff --git a/packages/settings/props/src/components/inputs/NumericSelect.vue b/packages/settings/props/src/components/inputs/NumericSelect.vue
index 32cea45a2f..05cb3fbdc1 100644
--- a/packages/settings/props/src/components/inputs/NumericSelect.vue
+++ b/packages/settings/props/src/components/inputs/NumericSelect.vue
@@ -118,7 +118,6 @@ export default {
         font-size: 14px;
         text-align: center;
         &:hover {
-          color: var(--ti-lowcode-tootip-input-colorf);
           background: var(--ti-lowcode-icon-hover-bg);
         }
       }
diff --git a/packages/settings/styles/src/Main.vue b/packages/settings/styles/src/Main.vue
index 2ac04daea1..99a10d509a 100644
--- a/packages/settings/styles/src/Main.vue
+++ b/packages/settings/styles/src/Main.vue
@@ -229,7 +229,7 @@ export default {
       display: block;
       margin-bottom: 8px;
       font-size: 12px;
-      color: var(--ti-lowcode-setting-style-title-color);
+      color: var(--te-common-text-secondary);
     }
   }
   .inline-style {
diff --git a/packages/settings/styles/src/components/background/BackgroundGroup.vue b/packages/settings/styles/src/components/background/BackgroundGroup.vue
index 92bd6ba456..96d6bdda46 100644
--- a/packages/settings/styles/src/components/background/BackgroundGroup.vue
+++ b/packages/settings/styles/src/components/background/BackgroundGroup.vue
@@ -398,7 +398,7 @@ export default {
     padding: 2px;
   }
   .background-label {
-    color: var(--te-common-text-primary);
+    color: var(--te-common-text-secondary);
   }
   .background-color,
   .background-clip {
diff --git a/packages/settings/styles/src/components/background/ImageSetting.vue b/packages/settings/styles/src/components/background/ImageSetting.vue
index bcb0227de7..76a8e22912 100644
--- a/packages/settings/styles/src/components/background/ImageSetting.vue
+++ b/packages/settings/styles/src/components/background/ImageSetting.vue
@@ -288,7 +288,7 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   font-size: 12px;
-  color: var(--ti-lowcode-common-text-color-2);
+  color: var(--te-common-text-secondary);
   margin-left: 8px;
   white-space: nowrap;
   overflow: hidden;
@@ -312,7 +312,7 @@ onMounted(() => {
   }
 }
 .choose-image {
-  border-color: var(--ti-lowcode-component-setting-panel-label-color);
+  border-color: var(--te-common-border-default);
   outline: 0px;
   cursor: default;
   user-select: none;
@@ -327,7 +327,7 @@ onMounted(() => {
   justify-content: center;
   height: 24px;
   border-radius: 4px;
-  color: var(--te-common-bg-prompt);
+  color: var(--te-common-text-primary);
   border-width: 1px;
   border-style: solid;
   align-self: center;
diff --git a/packages/settings/styles/src/components/background/RadialGradient.vue b/packages/settings/styles/src/components/background/RadialGradient.vue
index dc62e2dc4d..1a4930eb38 100644
--- a/packages/settings/styles/src/components/background/RadialGradient.vue
+++ b/packages/settings/styles/src/components/background/RadialGradient.vue
@@ -134,7 +134,7 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   font-size: 12px;
-  color: var(--ti-lowcode-common-text-color-2);
+  color: var(--te-common-text-secondary);
   margin-left: 8px;
   white-space: nowrap;
   overflow: hidden;
diff --git a/packages/settings/styles/src/components/border/BorderGroup.vue b/packages/settings/styles/src/components/border/BorderGroup.vue
index 5eb2432e76..157d502f09 100644
--- a/packages/settings/styles/src/components/border/BorderGroup.vue
+++ b/packages/settings/styles/src/components/border/BorderGroup.vue
@@ -555,7 +555,7 @@ export default {
     }
   }
   svg {
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    color: var(--te-common-text-secondary);
   }
 }
 .item-row {
diff --git a/packages/settings/styles/src/components/classNamesContainer/index.vue b/packages/settings/styles/src/components/classNamesContainer/index.vue
index b9af5b6edf..16613efb5d 100644
--- a/packages/settings/styles/src/components/classNamesContainer/index.vue
+++ b/packages/settings/styles/src/components/classNamesContainer/index.vue
@@ -480,7 +480,7 @@ const handleDeleteCurSelector = () => {
 .title {
   margin: 0;
   font-size: 12px;
-  color: var(--ti-lowcode-className-selector-title-color);
+  color: var(--te-common-text-secondary);
   font-weight: normal;
   .help-link {
     vertical-align: middle;
diff --git a/packages/settings/styles/src/components/inputs/ImageSelect.vue b/packages/settings/styles/src/components/inputs/ImageSelect.vue
index 1dc9289dd2..e4eaebb4f3 100644
--- a/packages/settings/styles/src/components/inputs/ImageSelect.vue
+++ b/packages/settings/styles/src/components/inputs/ImageSelect.vue
@@ -70,7 +70,7 @@ export default {
   width: 100%;
   .icon {
     font-size: 20px;
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    color: var(--te-common-text-secondary);
     margin-right: 4px;
   }
 }
diff --git a/packages/settings/styles/src/components/inputs/InputSelect.vue b/packages/settings/styles/src/components/inputs/InputSelect.vue
index 642a50a2a8..1dd947a3ad 100644
--- a/packages/settings/styles/src/components/inputs/InputSelect.vue
+++ b/packages/settings/styles/src/components/inputs/InputSelect.vue
@@ -118,7 +118,7 @@ export default {
 .input-select {
   display: flex;
   align-items: center;
-  background-color: var(--ti-lowcode-tabs-bg);
+  background-color: var(--te-common-bg-default);
   border-radius: 3px;
   transition: 0.3s;
   &.focus {
diff --git a/packages/settings/styles/src/components/inputs/ModalMask.vue b/packages/settings/styles/src/components/inputs/ModalMask.vue
index 5266892be5..dd2cd466a5 100644
--- a/packages/settings/styles/src/components/inputs/ModalMask.vue
+++ b/packages/settings/styles/src/components/inputs/ModalMask.vue
@@ -92,7 +92,7 @@ export default {
     left: 16px;
     z-index: 1000;
     padding: 8px;
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    color: var(--te-common-text-secondary);
     border: 1px solid var(--ti-lowcode-tabs-border-color);
     box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
     border-radius: 8px;
diff --git a/packages/settings/styles/src/components/inputs/NumericSelect.vue b/packages/settings/styles/src/components/inputs/NumericSelect.vue
index b0a775bb38..7d92d67c6a 100644
--- a/packages/settings/styles/src/components/inputs/NumericSelect.vue
+++ b/packages/settings/styles/src/components/inputs/NumericSelect.vue
@@ -105,7 +105,7 @@ export default {
 .style-numeric {
   display: flex;
   align-items: center;
-  background-color: var(--ti-lowcode-tabs-bg);
+  background-color: var(--te-common-bg-default);
   border-radius: 3px;
   transition: 0.3s;
   &.focus {
diff --git a/packages/settings/styles/src/components/inputs/ResetButton.vue b/packages/settings/styles/src/components/inputs/ResetButton.vue
index d315561197..540283740d 100644
--- a/packages/settings/styles/src/components/inputs/ResetButton.vue
+++ b/packages/settings/styles/src/components/inputs/ResetButton.vue
@@ -41,6 +41,6 @@ export default {
   display: block;
   padding: 8px 4px;
   text-align: center;
-  color: var(--te-common-text-description);
+  color: var(--te-common-text-secondary);
 }
 </style>
diff --git a/packages/settings/styles/src/components/layout/GridBox.vue b/packages/settings/styles/src/components/layout/GridBox.vue
index 9a2e0a497c..de9e031e5b 100644
--- a/packages/settings/styles/src/components/layout/GridBox.vue
+++ b/packages/settings/styles/src/components/layout/GridBox.vue
@@ -527,6 +527,7 @@ export default {
       }
     }
   }
+
   .grid-item-wrap {
     grid-column: 1 / -1;
     grid-row-start: 3;
@@ -559,4 +560,8 @@ export default {
     display: inline-block;
   }
 }
+.grid-edit-spacing {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
 </style>
diff --git a/packages/settings/styles/src/components/layout/LayoutGroup.vue b/packages/settings/styles/src/components/layout/LayoutGroup.vue
index 6d927efbdc..86c4a20773 100644
--- a/packages/settings/styles/src/components/layout/LayoutGroup.vue
+++ b/packages/settings/styles/src/components/layout/LayoutGroup.vue
@@ -129,7 +129,7 @@ export default {
     flex: 0 0 50px;
     padding: 0 3px;
     line-height: 24px;
-
+    color: var(--te-common-text-secondary);
     span {
       padding: 2px;
     }
@@ -146,50 +146,6 @@ export default {
   .display-content {
     flex: auto;
     display: flex;
-
-    .display-content-item {
-      flex: 1;
-      padding: 4px 0;
-      font-size: 16px;
-      background: var(--ti-lowcode-canvas-wrap-bg);
-      position: relative;
-      color: var(--ti-lowcode-component-setting-panel-icon-color);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      &:not(:last-child)::after {
-        content: '';
-        width: 1px;
-        height: 100%;
-        background: var(--ti-lowcode-tabs-border-color);
-        display: inline-block;
-        position: absolute;
-        top: 0;
-        right: 0;
-      }
-
-      &:hover {
-        color: var(--ti-lowcode-property-hover-color);
-      }
-
-      &.selected {
-        color: var(--ti-lowcode-toolbar-icon-color);
-        background-color: var(--ti-lowcode-tabs-bg);
-      }
-
-      &.disabled {
-        background-color: var(--ti-lowcode-error-tip-color);
-
-        &:hover {
-          cursor: not-allowed;
-        }
-      }
-
-      .display-svg {
-        margin: auto;
-      }
-    }
   }
 }
 </style>
diff --git a/packages/settings/styles/src/components/size/SizeGroup.vue b/packages/settings/styles/src/components/size/SizeGroup.vue
index 89ab3a67a2..193cbdaf42 100644
--- a/packages/settings/styles/src/components/size/SizeGroup.vue
+++ b/packages/settings/styles/src/components/size/SizeGroup.vue
@@ -487,6 +487,7 @@ span {
     flex: 0 0 54px;
     padding: 0 2px;
     line-height: 24px;
+    color: var(--te-common-text-secondary);
   }
 }
 
@@ -562,7 +563,7 @@ span {
     width: 20px;
     height: 20px;
     font-size: 18px;
-    color: var(--ti-lowcode-description-minor-color);
+    color: var(--te-common-text-secondary);
     margin-left: 4px;
     border-radius: 2px;
     &.selected {
diff --git a/packages/settings/styles/src/components/spacing/SpacingGroup.vue b/packages/settings/styles/src/components/spacing/SpacingGroup.vue
index 347d441110..2359e4753c 100644
--- a/packages/settings/styles/src/components/spacing/SpacingGroup.vue
+++ b/packages/settings/styles/src/components/spacing/SpacingGroup.vue
@@ -3,10 +3,11 @@
     <div class="spacing-max-icon">
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        fill="#F5F5F5"
+        fill="currentColor"
         width="256"
         height="120"
         style="grid-area: 1 / 1 / -1 / -1"
+        class="margin-color"
       >
         <g>
           <g>
@@ -21,7 +22,7 @@
             "
               data-automation-id="margin-top-button"
               aria-label="Margin top button"
-              class="tb-path-color"
+              class="padding-color"
               @click="clickMargin(SPACING_PROPERTY.MarginTop, $event)"
             ></path>
           </g>
@@ -39,7 +40,7 @@
             "
               data-automation-id="margin-right-button"
               aria-label="Margin right button"
-              class="lr-path-color"
+              class="padding-color"
               @click="clickMargin(SPACING_PROPERTY.MarginRight, $event)"
             ></path>
           </g>
@@ -57,7 +58,7 @@
             "
               data-automation-id="margin-bottom-button"
               aria-label="Margin bottom button"
-              class="tb-path-color"
+              class="padding-color"
               @click="clickMargin(SPACING_PROPERTY.MarginBottom, $event)"
             ></path>
           </g>
@@ -75,37 +76,55 @@
             "
               data-automation-id="margin-left-button"
               aria-label="Margin left button"
-              class="lr-path-color"
+              class="margin-color"
               @click="clickMargin(SPACING_PROPERTY.MarginLeft, $event)"
             ></path>
           </g>
         </g>
-        <clipPath id="margin-outer">
-          <rect x="0" y="0" width="256" height="120" fill="#F5F5F5" rx="4" ry="4" style="pointer-events: none"></rect>
+        <clipPath id="margin-outer" class="margin-color">
+          <rect
+            x="0"
+            y="0"
+            width="256"
+            height="120"
+            fill="currentColor"
+            rx="4"
+            ry="4"
+            style="pointer-events: none"
+          ></rect>
         </clipPath>
         <rect
-          class="stroke"
+          class="margin-color"
           clip-path="url(#margin-outer)"
           x="0"
           y="0"
           width="256"
           height="120"
-          fill="#F5F5F5"
+          fill="currentColor"
           rx="4"
           ry="4"
           style="pointer-events: none; stroke-width: 0"
         ></rect>
-        <clipPath id="margin-inner">
-          <rect x="45" y="25" width="168" height="70" fill="#E6E6E6" rx="4" ry="4" style="pointer-events: none"></rect>
+        <clipPath id="margin-inner" class="margin-color">
+          <rect
+            x="45"
+            y="25"
+            width="168"
+            height="70"
+            fill="currentColor"
+            rx="4"
+            ry="4"
+            style="pointer-events: none"
+          ></rect>
         </clipPath>
         <rect
-          class="stroke"
+          class="padding-color"
           clip-path="url(#margin-inner)"
           x="45"
           y="25"
           width="168"
           height="70"
-          fill="#E6E6E6"
+          fill="currentColor"
           rx="4"
           ry="4"
           style="pointer-events: none; stroke-width: 0"
@@ -165,7 +184,14 @@
       </div>
     </div>
     <div class="spacing-min-icon">
-      <svg xmlns="http://www.w3.org/2000/svg" fill="#F5F5F5" width="168" height="70" style="grid-area: 1 / 1 / -1 / -1">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="currentColor"
+        width="168"
+        height="70"
+        style="grid-area: 1 / 1 / -1 / -1"
+        class="margin-color"
+      >
         <g>
           <g>
             <path
@@ -179,7 +205,7 @@
             "
               data-automation-id="padding-top-button"
               aria-label="Padding top button"
-              class="tb-path-color"
+              class="padding-color"
               @click="clickPadding(SPACING_PROPERTY.PaddingTop, $event)"
             ></path>
           </g>
@@ -197,7 +223,7 @@
             "
               data-automation-id="padding-right-button"
               aria-label="Padding right button"
-              class="lr-path-color"
+              class="padding-color"
               @click="clickPadding(SPACING_PROPERTY.PaddingRight, $event)"
             ></path>
           </g>
@@ -215,7 +241,7 @@
             "
               data-automation-id="padding-bottom-button"
               aria-label="Padding bottom button"
-              class="tb-path-color"
+              class="padding-color"
               @click="clickPadding(SPACING_PROPERTY.PaddingBottom, $event)"
             ></path>
           </g>
@@ -233,37 +259,54 @@
             "
               data-automation-id="padding-left-button"
               aria-label="Padding left button"
-              class="lr-path-color"
+              class="margin-color"
               @click="clickPadding(SPACING_PROPERTY.PaddingLeft, $event)"
             ></path>
           </g>
         </g>
-        <clipPath id="padding-outer">
-          <rect x="5" y="-4" width="168" height="70" fill="#E6E6E6" rx="4" ry="4" style="pointer-events: none"></rect>
+        <clipPath id="padding-outer" class="padding-color">
+          <rect
+            x="5"
+            y="-4"
+            width="168"
+            height="70"
+            fill="currentColor"
+            rx="4"
+            ry="4"
+            style="pointer-events: none"
+          ></rect>
         </clipPath>
         <rect
-          class="stroke"
+          class="stroke padding-color"
           clip-path="url(#padding-outer)"
           x="0"
           y="0"
           width="168"
           height="70"
-          fill="#E6E6E6"
+          fill="currentColor"
           rx="4"
           ry="4"
           style="pointer-events: none; stroke-width: 0"
         ></rect>
-        <clipPath id="padding-inner">
-          <rect x="64" y="25" width="48" height="20" fill="#FFF" rx="4" ry="4" style="pointer-events: none"></rect>
+        <clipPath id="padding-inner" class="inner-color">
+          <rect
+            x="64"
+            y="25"
+            width="48"
+            height="20"
+            fill="currentColor"
+            rx="4"
+            ry="4"
+            style="pointer-events: none"
+          ></rect>
         </clipPath>
         <rect
-          class="stroke"
+          class="stroke inner-color"
           clip-path="url(#padding-inner)"
           x="64"
           y="25"
           width="48"
           height="20"
-          fill="#FFF"
           rx="4"
           ry="4"
           style="pointer-events: none; stroke-width: 0"
@@ -465,7 +508,7 @@ export default {
   outline-style: none;
   cursor: default;
   user-select: none;
-
+  background-color: black;
   .spacing-max-icon {
     grid-area: 1 / 1 / -1 / -1;
     display: grid;
@@ -499,7 +542,7 @@ export default {
     line-height: 10px;
     letter-spacing: -0.2px;
     display: flex;
-    color: var(--te-base-text-color);
+    color: var(--te-common-text-primary);
     background: transparent;
     padding: 2px 4px;
     margin-left: -2px;
@@ -545,24 +588,16 @@ export default {
     }
   }
 
-  .lr-path-color {
+  .margin-color {
     cursor: pointer;
-    color: var(--ti-lowcode-spacing-lr-color);
-    &:hover {
-      color: var(--ti-lowcode-spacing-lr-hover-color);
-    }
+    color: var(--ti-lowcode-spacing-margin-color);
   }
-
-  .tb-path-color {
+  .padding-color {
     cursor: pointer;
-    color: var(--ti-lowcode-spacing-tb-color);
-    &:hover {
-      color: var(--ti-lowcode-spacing-tb-hover-color);
-    }
+    color: var(--ti-lowcode-spacing-padding-color);
   }
-
-  .stroke {
-    stroke: var(--ti-lowcode-spacing-border-color);
+  .inner-color {
+    color: var(--te-common-bg-default);
   }
 }
 </style>
diff --git a/packages/settings/styles/src/components/spacing/SpacingSetting.vue b/packages/settings/styles/src/components/spacing/SpacingSetting.vue
index c906e2dba8..1f3e43345a 100644
--- a/packages/settings/styles/src/components/spacing/SpacingSetting.vue
+++ b/packages/settings/styles/src/components/spacing/SpacingSetting.vue
@@ -121,7 +121,7 @@ export default {
     align-items: center;
     .icon {
       font-size: 16px;
-      color: var(--ti-lowcode-toolbar-breadcrumb-color);
+      color: var(--te-common-text-secondary);
       margin-right: 18px;
     }
 
@@ -142,8 +142,8 @@ export default {
       height: 60px;
       line-height: 60px;
       text-align: center;
-      border: 1px solid var(--ti-lowcode-toolbar-border-color);
-      background: var(--ti-lowcode-canvas-wrap-bg);
+      border: 1px solid var(--te-common-border-default);
+      background: var(--te-common-bg-container);
       cursor: pointer;
       box-sizing: border-box;
 
@@ -178,8 +178,8 @@ export default {
         line-height: 26px;
         margin-left: 3%;
         text-align: center;
-        border: 1px solid var(--ti-lowcode-toolbar-border-color);
-        background: var(--ti-lowcode-canvas-wrap-bg);
+        border: 1px solid var(--te-common-border-default);
+        background: var(--te-common-bg-container);
         cursor: pointer;
         transition: 0.3s;
         box-sizing: border-box;
diff --git a/packages/settings/styles/src/components/typography/TypographyGroup.vue b/packages/settings/styles/src/components/typography/TypographyGroup.vue
index 9d6c5ac131..dca82610a9 100644
--- a/packages/settings/styles/src/components/typography/TypographyGroup.vue
+++ b/packages/settings/styles/src/components/typography/TypographyGroup.vue
@@ -497,6 +497,7 @@ export default {
 <style lang="less" scoped>
 .typography-wrap {
   span {
+    color: var(--te-common-text-secondary);
     padding: 2px;
   }
   .typography-row {
diff --git a/packages/settings/styles/src/components/typography/TypographyMore.vue b/packages/settings/styles/src/components/typography/TypographyMore.vue
index 88d858265e..d0e2050dfa 100644
--- a/packages/settings/styles/src/components/typography/TypographyMore.vue
+++ b/packages/settings/styles/src/components/typography/TypographyMore.vue
@@ -123,7 +123,7 @@ export default {
       .tiny-collapse-item__header {
         height: 24px;
         line-height: 24px;
-        background-color: var(--ti-lowcode-toolbar-view-hover-bg);
+        background-color: var(--te-common-bg-container);
         justify-content: center;
         transition: 0.3s;
 
@@ -141,7 +141,6 @@ export default {
 
         &:hover {
           color: var(--ti-lowcode-toolbar-icon-color);
-          background-color: var(--ti-lowcode-more-collapse-header-hover-color);
 
           svg {
             color: var(--ti-lowcode-toolbar-icon-color);
@@ -191,8 +190,8 @@ export default {
           flex: 1;
           padding: 4px 0;
           font-size: 16px;
-          color: var(--ti-lowcode-toolbar-breadcrumb-color);
-          background: var(--ti-lowcode-canvas-wrap-bg);
+          color: var(--te-common-text-secondary);
+          background: var(--te-common-bg-container);
           position: relative;
           display: flex;
           justify-content: center;
@@ -229,7 +228,7 @@ export default {
 
       svg {
         font-size: 14px;
-        color: var(--ti-lowcode-toolbar-breadcrumb-color);
+        color: var(--te-common-text-secondary);
       }
     }
   }
diff --git a/packages/theme/base/src/base.less b/packages/theme/base/src/base.less
index a195c7a41d..0d534d7531 100644
--- a/packages/theme/base/src/base.less
+++ b/packages/theme/base/src/base.less
@@ -4,445 +4,241 @@
   --te-base-color-inherit: inherit;
   --te-base-color-unset: unset;
 
-  // 灰阶
-  --te-base-gray-1: #fff;
-  --te-base-gray-2: #fafafa;
-  --te-base-gray-3: #f2f2f2;
-  --te-base-gray-4: #f2f5fc;
-  --te-base-gray-5: #f5f5f5;
-  --te-base-gray-6: #f0f0f0;
-  --te-base-gray-7: #e6e6e6;
-  --te-base-gray-8: #eeeeee;
-  --te-base-gray-9: #dfe1e6;
-  --te-base-gray-10: #e3e3e3;
-  --te-base-gray-11: #ebebeb;
-  --te-base-gray-12: #d9d9d9;
-  --te-base-gray-13: #dbdbdb;
-  --te-base-gray-14: #e5e5e5;
-  --te-base-gray-15: #e9e9e9;
-  --te-base-gray-16: #b9b9b9;
-  --te-base-gray-17: #ccc;
-  --te-base-gray-18: #c2c2c2;
-  --te-base-gray-19: #afafaf;
-  --te-base-gray-20: #ababab;
-  --te-base-gray-21: #adb0b8;
-  --te-base-gray-22: #1476ff1a;
-  --te-base-gray-23: #a6a6a6;
-  --te-base-gray-24: #a7aab2;
-  --te-base-gray-25: #4d4d4d;
-  --te-base-gray-26: #464c59;
-  --te-base-gray-27: #5a5a5a;
-  --te-base-gray-28: #555;
-  --te-base-gray-29: #5e5e5e;
-  --te-base-gray-30: #575d6c;
-  --te-base-gray-31: #595959;
-  --te-base-gray-32: #666;
-  --te-base-gray-33: #6a6a6a;
-  --te-base-gray-34: #6b6b6b;
-  --te-base-gray-35: #606165;
-  --te-base-gray-36: #dddddd;
-  --te-base-gray-37: #cbcbcb;
-  --te-base-gray-38: #626262;
-  --te-base-gray-39: #737373;
-  --te-base-gray-40: #757575;
-  --te-base-gray-41: #888;
-  --te-base-gray-42: #8d8d8d;
-  --te-base-gray-43: #808080;
-  --te-base-gray-44: #8a8e99;
-  --te-base-gray-45: #9a9a9a;
-  --te-base-gray-46: #999;
-  --te-base-gray-47: #9d9d9d;
-  --te-base-gray-48: #9f9f9f;
-  --te-base-gray-49: #999999;
-  --te-base-gray-50: #8a887b;
-  --te-base-gray-51: #f3f3f3;
-  --te-base-gray-52: #d1d1d1;
-  --te-base-gray-53: #bdbdbd;
-  --te-base-gray-54: #dfdfdf;
-  --te-base-gray-55: #bfbfbf;
-  --te-base-gray-56: #b5b5b5;
-  --te-base-gray-57: #f3f3f5;
-  --te-base-gray-58: #919191;
-  --te-base-gray-59: #e7e8e9;
-  --te-base-gray-60: #9e9e9e;
-  --te-base-gray-61: #63666c;
-  --te-base-gray-62: #858585;
-  --te-base-gray-63: #f6eeee;
-  --te-base-gray-64: #f0f1f5;
-  --te-base-gray-65: #b4b5b8;
-  --te-base-gray-66: #8b8c8f;
-  --te-base-gray-67: #4d4e52;
-  --te-base-gray-68: #36383d;
-  --te-base-gray-69: #2b2d33;
-
-  // black
-  --te-base-dark-1: #1f1f1f;
-  --te-base-dark-2: #1a1a1a;
-  --te-base-dark-3: #141414;
-  --te-base-dark-4: #191818;
-  --te-base-dark-5: #191919;
-  --te-base-dark-6: #202020;
-  --te-base-dark-7: #2e2e2e;
-  --te-base-dark-8: #2f2f2f;
-  --te-base-dark-9: #212121;
-  --te-base-dark-10: #232323;
-  --te-base-dark-11: #252b3a;
-  --te-base-dark-12: #2b2b2b;
-  --te-base-dark-13: #262626;
-  --te-base-dark-14: #222;
-  --te-base-dark-15: #323644;
-  --te-base-dark-16: #1e1e1e;
-  --te-base-dark-17: #292929;
-  --te-base-dark-18: #3c3c3c;
-  --te-base-dark-19: #313131;
-  --te-base-dark-20: #333;
-  --te-base-dark-21: #363636;
-  --te-base-dark-22: #404040;
-  --te-base-dark-23: #414141;
-  --te-base-dark-24: #433535;
-  --te-base-dark-25: #041320;
-  --te-base-dark-26: #000;
-  --te-base-dark-27: #212329;
-  --te-base-dark-28: #1d312a;
-  --te-base-dark-29: #2a2c31;
+  --te-base-gray-0: #fff;
+  --te-base-gray-5: #fafafa;
+  --te-base-gray-10: #f5f5f5;
+  --te-base-gray-15: #f0f0f0;
+  --te-base-gray-20: #e6e6e6;
+  --te-base-gray-25: #dbdbdb;
+  --te-base-gray-30: #c2c2c2;
+  --te-base-gray-35: #b4b5b8;
+  --te-base-gray-40: #8b8c8f;
+  --te-base-gray-45: #808080;
+  --te-base-gray-50: #595959;
+  --te-base-gray-55: #4d4e52;
+  --te-base-gray-60: #36383d;
+  --te-base-gray-65: #333;
+  --te-base-gray-70: #2a2c31;
+  --te-base-gray-80: #212329;
+  --te-base-gray-90: #191919;
+  --te-base-gray-100: #000;
+  --te-base-gray-110: #0f1115;
 
   // expand-red
-  --te-base-red-1: #ffeae8;
-  --te-base-red-2: #fccdca;
-  --te-base-red-3: #faa9a5;
-  --te-base-red-4: #fa8682;
-  --te-base-red-5: #f76360;
-  --te-base-red-6: #f23030;
-  --te-base-red-7: #cc272a;
-  --te-base-red-8: #a3171c;
-  --te-base-red-9: #78080e;
-  --te-base-red-10: #4d0005;
-  --te-base-red-11: #a64242;
-  --te-base-red-12: #d4827f;
-  --te-base-red-13: #f2c5c2;
-  --te-base-red-14: #c7000b;
-  --te-base-red-15: #fce3e1;
-  --te-base-red-16: #feeaeb;
-  --te-base-red-17: #dc544f;
-  --te-base-red-18: #ff0000;
-  --te-base-red-19: #ea384c;
-  --te-base-red-20: #c92c3f;
-  --te-base-red-21: #de504e;
+  --te-base-red-10: #fff1f0;
+  --te-base-red-20: #fce2e0;
+  --te-base-red-30: #faa7a3;
+  --te-base-red-40: #fa8682;
+  --te-base-red-50: #f76360;
+  --te-base-red-60: #f23030;
+  --te-base-red-70: #bf0a1c;
+  --te-base-red-80: #a3171c;
+  --te-base-red-90: #78080e;
+  --te-base-red-100: #4d0005;
+  --te-base-red-110: #a64242;
+  --te-base-red-120: #d4827f;
+  --te-base-red-130: #f2c5c2;
+  --te-base-red-140: rgba(242, 48, 48, 0.3);
 
   // expand-orange
-  --te-base-orange-1: #fff5e8;
-  --te-base-orange-2: #fcdfb8;
-  --te-base-orange-3: #fcc98b;
-  --te-base-orange-4: #fcb25c;
-  --te-base-orange-5: #ff9a2e;
-  --te-base-orange-6: #ff8800;
-  --te-base-orange-7: #d96900;
-  --te-base-orange-8: #a64d00;
-  --te-base-orange-9: #733400;
-  --te-base-orange-10: #4d2201;
-  --te-base-orange-11: #9e6d3f;
-  --te-base-orange-12: #d6a981;
-  --te-base-orange-13: #f2d8c2;
-  --te-base-orange-14: #fa9841;
-  --te-base-orange-15: #facb4b;
-  --te-base-orange-16: #ffb100;
+  --te-base-orange-10: #fff5e8;
+  --te-base-orange-20: #ffebd1;
+  --te-base-orange-30: #fcd5a4;
+  --te-base-orange-40: #fcbc72;
+  --te-base-orange-50: #ff9a2e;
+  --te-base-orange-60: #ff8800;
+  --te-base-orange-70: #d96900;
+  --te-base-orange-80: #a64d00;
+  --te-base-orange-90: #733400;
+  --te-base-orange-100: #4d2201;
+  --te-base-orange-110: #9e6d3f;
+  --te-base-orange-120: #d6a981;
+  --te-base-orange-130: #f2d8c2;
 
   // expand-yellow
-  --te-base-yellow-1: #fcf9eb;
-  --te-base-yellow-2: #fcf0c2;
-  --te-base-yellow-3: #fae396;
-  --te-base-yellow-4: #f7d56d;
-  --te-base-yellow-5: #f7c845;
-  --te-base-yellow-6: #fcbe1e;
-  --te-base-yellow-7: #d99b0b;
-  --te-base-yellow-8: #a67711;
-  --te-base-yellow-9: #7a5202;
-  --te-base-yellow-10: #4d3200;
-  --te-base-yellow-11: #9e7e3f;
-  --te-base-yellow-12: #d4b57f;
-  --te-base-yellow-13: #e6d3b8;
-  --te-base-yellow-14: #501c1c;
-  --te-base-yellow-15: #8d5421;
+  --te-base-yellow-10: #fffae6;
+  --te-base-yellow-20: #fcf0c2;
+  --te-base-yellow-30: #fae49d;
+  --te-base-yellow-40: #f7d56f;
+  --te-base-yellow-50: #fac532;
+  --te-base-yellow-60: #ffb700;
+  --te-base-yellow-70: #e0a210;
+  --te-base-yellow-80: #a67711;
+  --te-base-yellow-90: #7a5202;
+  --te-base-yellow-100: #4d3200;
+  --te-base-yellow-110: #9e7e3f;
+  --te-base-yellow-120: #d4b57f;
+  --te-base-yellow-130: #e6d3b8;
 
   // expand-lemon
-  --te-base-lemon-1: #fcfae8;
-  --te-base-lemon-2: #fcf6c2;
-  --te-base-lemon-3: #fcf092;
-  --te-base-lemon-4: #fae969;
-  --te-base-lemon-5: #f7e04a;
-  --te-base-lemon-6: #f7d916;
-  --te-base-lemon-7: #d9bb16;
-  --te-base-lemon-8: #a38708;
-  --te-base-lemon-9: #756002;
-  --te-base-lemon-10: #4d3d00;
-  --te-base-lemon-11: #9e8f46;
-  --te-base-lemon-12: #d6c581;
-  --te-base-lemon-13: #eddfb2;
+  --te-base-lemon-10: #ffffe6;
+  --te-base-lemon-20: #fcfcc2;
+  --te-base-lemon-30: #faf78e;
+  --te-base-lemon-40: #fcf26a;
+  --te-base-lemon-50: #faee46;
+  --te-base-lemon-60: #f2e70c;
+  --te-base-lemon-70: #d9c816;
+  --te-base-lemon-80: #a38f08;
+  --te-base-lemon-90: #756202;
+  --te-base-lemon-100: #4d3c00;
+  --te-base-lemon-110: #9e8f46;
+  --te-base-lemon-120: #d6c581;
+  --te-base-lemon-130: #eddfb2;
 
   // expand-lime
-  --te-base-lime-1: #f8fae3;
-  --te-base-lime-2: #eff5bf;
-  --te-base-lime-3: #e2ed8e;
-  --te-base-lime-4: #d5e667;
-  --te-base-lime-5: #c6de3e;
-  --te-base-lime-6: #b2d119;
-  --te-base-lime-7: #95b312;
-  --te-base-lime-8: #728c0a;
-  --te-base-lime-9: #576e05;
-  --te-base-lime-10: #3b4d00;
-  --te-base-lime-11: #808c46;
-  --te-base-lime-12: #c1cc7a;
-  --te-base-lime-13: #3b4d00;
+  --te-base-lime-10: #fdffe6;
+  --te-base-lime-20: #eff5bf;
+  --te-base-lime-30: #e2ed8e;
+  --te-base-lime-40: #d5e667;
+  --te-base-lime-50: #c6de3e;
+  --te-base-lime-60: #b2d119;
+  --te-base-lime-70: #95b312;
+  --te-base-lime-80: #728c0a;
+  --te-base-lime-90: #576e05;
+  --te-base-lime-100: #3b4d00;
+  --te-base-lime-110: #808c46;
+  --te-base-lime-120: #c1cc7a;
+  --te-base-lime-130: #3b4d00;
 
   // expand-kelly
-  --te-base-kelly-1: #f2fae6;
-  --te-base-kelly-2: #daf2bb;
-  --te-base-kelly-3: #b9e683;
-  --te-base-kelly-4: #9edb58;
-  --te-base-kelly-5: #7dcc29;
-  --te-base-kelly-6: #5cb300;
-  --te-base-kelly-7: #4b9902;
-  --te-base-kelly-8: #3c8001;
-  --te-base-kelly-9: #2e6600;
-  --te-base-kelly-10: #1f4700;
-  --te-base-kelly-11: #628c38;
-  --te-base-kelly-12: #a2c777;
-  --te-base-kelly-13: #d2e6bb;
+  --te-base-kelly-10: #edf7df;
+  --te-base-kelly-20: #daf2bb;
+  --te-base-kelly-30: #b9e683;
+  --te-base-kelly-40: #9edb58;
+  --te-base-kelly-50: #7dcc29;
+  --te-base-kelly-60: #5cb300;
+  --te-base-kelly-70: #4b9902;
+  --te-base-kelly-80: #3c8001;
+  --te-base-kelly-90: #2e6600;
+  --te-base-kelly-100: #1f4700;
+  --te-base-kelly-110: #628c38;
+  --te-base-kelly-120: #a2c777;
+  --te-base-kelly-130: #d2e6b8;
 
   // expand-green
-  --te-base-green-1: #e8fced;
-  --te-base-green-2: #bbf2c8;
-  --te-base-green-3: #82e09a;
-  --te-base-green-4: #51d675;
-  --te-base-green-5: #25c251;
-  --te-base-green-6: #00b336;
-  --te-base-green-7: #029931;
-  --te-base-green-8: #01802b;
-  --te-base-green-9: #006624;
-  --te-base-green-10: #004a1b;
-  --te-base-green-11: #3d995c;
-  --te-base-green-12: #77c78f;
-  --te-base-green-13: #b8e6c7;
-  --te-base-green-14: #e6f2d5;
-  --te-base-green-15: #2ad986;
+  --te-base-green-10: #e4f7e9;
+  --te-base-green-20: #d5f2dc;
+  --te-base-green-30: #92e0a5;
+  --te-base-green-40: #60d680;
+  --te-base-green-50: #25c251;
+  --te-base-green-60: #00b336;
+  --te-base-green-70: #029931;
+  --te-base-green-80: #01802b;
+  --te-base-green-90: #006624;
+  --te-base-green-100: #004a1b;
+  --te-base-green-110: #1d312a;
+  --te-base-green-120: #77c78f;
+  --te-base-green-130: #b8e6c7;
+  --te-base-green-140: rgba(92, 179, 54, 0.1);
 
   // expand-mint
-  --te-base-mint-1: #e8fcfa;
-  --te-base-mint-2: #bff5ef;
-  --te-base-mint-3: #8be8e0;
-  --te-base-mint-4: #5dded5;
-  --te-base-mint-5: #38d6ce;
-  --te-base-mint-6: #10c7c1;
-  --te-base-mint-7: #0aaba8;
-  --te-base-mint-8: #048c8c;
-  --te-base-mint-9: #046466;
-  --te-base-mint-10: #004547;
-  --te-base-mint-11: #3d9996;
-  --te-base-mint-12: #77c7c2;
-  --te-base-mint-13: #b8e6e1;
-  --te-base-mint-14: #50d4ab;
+  --te-base-mint-10: #e6fcfa;
+  --te-base-mint-20: #d0f5f1;
+  --te-base-mint-30: #97e8e1;
+  --te-base-mint-40: #64ded6;
+  --te-base-mint-50: #38d6ce;
+  --te-base-mint-60: #10c7c1;
+  --te-base-mint-70: #0bb8b2;
+  --te-base-mint-80: #048c8c;
+  --te-base-mint-90: #046466;
+  --te-base-mint-100: #004547;
+  --te-base-mint-110: #3d9996;
+  --te-base-mint-120: #77c7c2;
+  --te-base-mint-130: #b8e6e1;
 
   // expand-sky
-  --te-base-sky-1: #e8f8fc;
-  --te-base-sky-2: #c4f2ff;
-  --te-base-sky-3: #9de4fa;
-  --te-base-sky-4: #79d8f7;
-  --te-base-sky-5: #58cbf5;
-  --te-base-sky-6: #33bcf2;
-  --te-base-sky-7: #1f9acf;
-  --te-base-sky-8: #1075a3;
-  --te-base-sky-9: #065278;
-  --te-base-sky-10: #00304a;
-  --te-base-sky-11: #3d7f99;
-  --te-base-sky-12: #7ab8cc;
-  --te-base-sky-13: #b6e5f2;
+  --te-base-sky-10: #e8faff;
+  --te-base-sky-20: #d6f6ff;
+  --te-base-sky-30: #a5e6fa;
+  --te-base-sky-40: #79d8f7;
+  --te-base-sky-50: #58cbf5;
+  --te-base-sky-60: #33bcf2;
+  --te-base-sky-70: #1f9acf;
+  --te-base-sky-80: #1075a3;
+  --te-base-sky-90: #065278;
+  --te-base-sky-100: #00304a;
+  --te-base-sky-110: #3d7f99;
+  --te-base-sky-120: #7ab8cc;
+  --te-base-sky-130: #b6e5f2;
 
   // expand-blue
-  --te-base-blue-1: #e3effa;
-  --te-base-blue-2: #c4e1ff;
-  --te-base-blue-3: #99c9ff;
-  --te-base-blue-4: #68abfc;
-  --te-base-blue-5: #4191fa;
-  --te-base-blue-6: #1476ff;
-  --te-base-blue-7: #0f5ed4;
-  --te-base-blue-8: #0845a6;
-  --te-base-blue-9: #022e7a;
+  --te-base-blue-10: #f0f7ff;
+  --te-base-blue-20: #e7f1ff;
+  --te-base-blue-30: #b3d6ff;
+  --te-base-blue-40: #7eb7fc;
+  --te-base-blue-50: #4191fa;
+  --te-base-blue-60: #1476ff;
+  --te-base-blue-70: #0f5ed4;
+  --te-base-blue-80: #0845a6;
+  --te-base-blue-90: #022e7a;
   --te-base-blue-10: #001a4a;
-  --te-base-blue-11: #3d6899;
-  --te-base-blue-12: #7fa6d4;
-  --te-base-blue-13: #b6d4f2;
-  --te-base-blue-14: #4f77ff;
-  --te-base-blue-15: #3961eb;
-  --te-base-blue-16: #7693f5;
-  --te-base-blue-17: #526ecc;
-  --te-base-blue-18: #deecff;
-  --te-base-blue-19: #5073e5;
-  --te-base-blue-20: #5e7ce0;
-  --te-base-blue-21: #6bb0ff;
-  --te-base-blue-22: #006cff;
-  --te-base-blue-23: #8bbefa;
-  --te-base-blue-24: #476be5;
-  --te-base-blue-25: rgba(20, 118, 255, 0.1);
+  --te-base-blue-110: #202b3f;
+  --te-base-blue-120: #7fa6d4;
+  --te-base-blue-130: #b6d4f2;
+  --te-base-blue-140: rgba(20, 118, 255, 0.1);
 
   // expand-indigo
-  --te-base-indigo-1: #eee8ff;
-  --te-base-indigo-2: #ddd7fa;
-  --te-base-indigo-3: #b19cf7;
-  --te-base-indigo-4: #957af5;
-  --te-base-indigo-5: #6e51e0;
-  --te-base-indigo-6: #512fd6;
-  --te-base-indigo-7: #391eb0;
-  --te-base-indigo-8: #27108f;
-  --te-base-indigo-9: #19056e;
-  --te-base-indigo-10: #0e004d;
-  --te-base-indigo-11: #584d99;
-  --te-base-indigo-12: #847acc;
-  --te-base-indigo-13: #bbb8e6;
-  --te-base-indigo-14: #a790ff;
+  --te-base-indigo-10: #f0ebff;
+  --te-base-indigo-20: #e2d9fc;
+  --te-base-indigo-30: #a790ff;
+  --te-base-indigo-40: #9479f2;
+  --te-base-indigo-50: #6e51e0;
+  --te-base-indigo-60: #512fd6;
+  --te-base-indigo-70: #391eb0;
+  --te-base-indigo-80: #27108f;
+  --te-base-indigo-90: #19056e;
+  --te-base-indigo-100: #0e004d;
+  --te-base-indigo-110: #2f2e3f;
+  --te-base-indigo-120: #847acc;
+  --te-base-indigo-130: #bbb8e6;
 
   // expand-purple
-  --te-base-purple-1: #f5e8ff;
-  --te-base-purple-2: #e4c5fc;
-  --te-base-purple-3: #d0a1f7;
-  --te-base-purple-4: #b878f0;
-  --te-base-purple-5: #9f53e6;
-  --te-base-purple-6: #832fd6;
-  --te-base-purple-7: #641eb0;
-  --te-base-purple-8: #4c1091;
-  --te-base-purple-9: #370673;
-  --te-base-purple-10: #20004d;
-  --te-base-purple-11: #683d99;
-  --te-base-purple-12: #a07acc;
-  --te-base-purple-13: #cbb8e6;
-  --te-base-purple-14: #f0edfc;
+  --te-base-purple-10: #f9ebff;
+  --te-base-purple-20: #f4e0fc;
+  --te-base-purple-30: #dea3f7;
+  --te-base-purple-40: #cc78f0;
+  --te-base-purple-50: #ba53e6;
+  --te-base-purple-60: #a42fd6;
+  --te-base-purple-70: #841eb0;
+  --te-base-purple-80: #6b1091;
+  --te-base-purple-90: #520673;
+  --te-base-purple-100: #36004d;
+  --te-base-purple-110: #7d3d99;
+  --te-base-purple-120: #b47acc;
+  --te-base-purple-130: #d8b8e6;
 
   // expand-pink
-  --te-base-pink-1: #fce6fb;
-  --te-base-pink-2: #fcc2f9;
-  --te-base-pink-3: #f794f2;
-  --te-base-pink-4: #eb67e6;
-  --te-base-pink-5: #e841e5;
-  --te-base-pink-6: #d91ad9;
-  --te-base-pink-7: #b50fb8;
-  --te-base-pink-8: #8f0a94;
-  --te-base-pink-9: #6b0370;
-  --te-base-pink-10: #47004d;
-  --te-base-pink-11: #993d99;
-  --te-base-pink-12: #c97acc;
-  --te-base-pink-13: #e2b8e6;
+  --te-base-pink-10: #fce8fb;
+  --te-base-pink-20: #fcd4fa;
+  --te-base-pink-30: #f7a1f3;
+  --te-base-pink-40: #eb75e7;
+  --te-base-pink-50: #e841e5;
+  --te-base-pink-60: #d91ad9;
+  --te-base-pink-70: #b50fb8;
+  --te-base-pink-80: #8f0a94;
+  --te-base-pink-90: #6b0370;
+  --te-base-pink-100: #47004d;
+  --te-base-pink-110: #993d99;
+  --te-base-pink-120: #c97acc;
+  --te-base-pink-130: #e2b8e6;
 
   // expand-rose
-  --te-base-rose-1: #fce6ef;
-  --te-base-rose-2: #ffc4de;
-  --te-base-rose-3: #fa9bc9;
-  --te-base-rose-4: #f56cac;
-  --te-base-rose-5: #eb4696;
-  --te-base-rose-6: #e61c81;
-  --te-base-rose-7: #b50e65;
-  --te-base-rose-8: #940a54;
-  --te-base-rose-9: #70033f;
-  --te-base-rose-10: #4d002b;
-  --te-base-rose-11: #993d6e;
-  --te-base-rose-12: #cc7aa6;
-  --te-base-rose-13: #e6b8d2;
-  --te-base-rose-14: #f66f6a;
-
-  // 公司品牌色
-  --te-base-brand-color: #c7000b;
-
-  // 主色
-  --te-base-primary-color-1: #191919;
-  --te-base-primary-color-2: #1476ff;
-
-  // 背景色
-  --te-base-bg: #f5f5f5;
-  --te-base-bg-1: rgba(0, 0, 0, 0.05);
-  --te-base-bg-2: #fafafa;
-  --te-base-bg-3: #191919;
-  --te-base-bg-4: #595959;
-  --te-base-bg-5: #fff;
-  --te-base-bg-6: #5959591a;
-  --te-base-bg-7: rgba(0, 255, 0, 0.1);
-  --te-base-bg-8: rgba(242, 48, 48, 0.3);
-  --te-base-dark-bg: #141414;
-  --te-base-dark-bg-2: #333;
-  --te-base-dark-bg-3: #e6e6e6;
-  --te-base-dark-bg-4: #a6a6a6;
-  --te-base-dark-bg-5: #000;
-  --te-base-dark-bg-6: #a6a6a61a;
-  --te-base-dark-bg-7: rgba(255, 255, 255, 0.1);
-  --te-base-dark-bg-8: rgba(0, 0, 0, 0.16);
-
-  // 文本色
-  --te-base-text-color: #191919;
-  --te-base-text-color-1: #595959;
-  --te-base-text-color-2: #1476ff;
-  --te-base-text-color-3: #808080;
-  --te-base-text-color-4: #c2c2c2;
-  --te-base-dark-text-color: #e6e6e6;
-  --te-base-dark-text-color-1: #a6a6a6;
-
-  // 文本链接色
-  --te-base-text-link-color: #191919;
-  --te-base-text-link-color-1: #595959;
-  --te-base-text-link-color-2: #c2c2c2;
-  --te-base-text-link-color-3: #fff;
-  --te-base-dark-text-link-color: #e6e6e6;
-  --te-base-dark-text-link-color-1: #a6a6a6;
-
-  // 按钮边框色
-  --te-base-button-border-none: none;
-  --te-base-secondary-button-border-color: #595959;
-  --te-base-secondary-button-border-hover-color: #c2c2c2;
-  --te-base-default-button-border-color: #c2c2c2;
-  --te-base-default-button-border-disable-color: #dbdbdb;
-  --te-base-dark-secondary-button-border-color: #a6a6a6;
-  --te-base-dark-secondary-button-border-hover-color: #3d3d3d;
-  --te-base-dark-default-button-border-hover-color: #e6e6e6;
-
-  // 分割线
-  --te-base-split-color-1: rgba(0, 0, 0, 0.08); // 白色背景分割线
-  --te-base-split-color-2: rgba(0, 0, 0, 0.15); // 灰色背景分割线
-  --te-base-dark-split-color-1: rgba(255, 255, 255, 0.08); // 白色背景分割线
-  --te-base-dark-split-color-2: rgba(255, 255, 255, 0.15);
-
-  // rgba
-  --te-base-rgba-1: rgba(0, 0, 0, 0.2);
-  --te-base-rgba-2: rgba(0, 0, 0, 0.08);
-  --te-base-rgba-3: rgba(242, 48, 48, 0.1);
-  --te-base-rgba-4: rgba(20, 118, 255, 0.1);
-  --te-base-rgba-5: rgba(255, 0, 0);
-  --te-base-rgba-6: rgba(0, 0, 0, 0.5);
-  --te-base-rgba-7: rgba(200, 200, 200, 0.2);
-  --te-base-rgba-8: rgba(255, 255, 255, 0.1);
-  --te-base-rgba-9: rgba(76, 152, 241, 0.15);
-  --te-base-rgba-10: rgba(173, 176, 184, 0.6);
-  --te-base-rgba-11: rgba(0, 255, 0, 0.1);
-  --te-base-rgba-12: rgba(242, 48, 48, 0.3);
-  --te-base-rgba-13: rgba(255, 255, 255, 0.08);
-  --te-base-rgba-14: rgba(246, 111, 106, 0.1);
-  --te-base-rgba-15: rgba(217, 217, 217, 0.8);
-  --te-base-rgba-16: rgba(0, 179, 54, 0.6);
-  --te-base-rgba-17: rgba(217, 217, 217, 0.4);
-  --te-base-rgba-18: rgba(255, 255, 255, 0.4);
-  --te-base-rgba-19: rgba(255, 255, 255, 0.5);
-  --te-base-rgba-20: rgba(94, 94, 94, 0.8);
-  --te-base-rgba-21: rgba(121, 121, 121, 0.4);
-  --te-base-rgba-22: rgba(138, 142, 153, 0.99);
-  --te-base-rgba-23: rgba(25, 25, 25, 0.15);
-  --te-base-rgba-24: rgba(0, 0, 0, 0.16);
-  --te-base-rgba-25: rgba(0, 255, 0, 0.1);
-  --te-base-rgba-26: rgba(242, 48, 48, 0.3);
-  --te-base-rgba-27: rgba(0, 0, 0, 0.16);
-  --te-base-rgb-1: rgb(80, 212, 171);
+  --te-base-rose-10: #ffebf3;
+  --te-base-rose-20: #ffd6e8;
+  --te-base-rose-30: #faa0cb;
+  --te-base-rose-40: #f56ead;
+  --te-base-rose-50: #f24998;
+  --te-base-rose-60: #e61c81;
+  --te-base-rose-70: #b50e65;
+  --te-base-rose-80: #940a54;
+  --te-base-rose-90: #70033f;
+  --te-base-rose-100: #4d002b;
+  --te-base-rose-110: #993d6e;
+  --te-base-rose-120: #cc7aa6;
+  --te-base-rose-130: #e6b8d2;
 
-  // 状态色
-  --te-base-error-color: #f23030;
-  --te-base-warn-color: #ff8800;
-  --te-base-warn-color-1: #f7d916;
-  --te-base-success-color: #5cb300;
-  --te-base-prompt-color: #1476ff;
-  --te-base-invalidate-color: #ebebeb;
+  --te-base-box-shadow-rgba-1: rgba(25, 25, 25, 0.15);
+  --te-base-box-shadow-rgba-2: rgba(0, 0, 0, 0.16);
 
   /**
   * 1.1 行高
diff --git a/packages/theme/base/src/common.less b/packages/theme/base/src/common.less
index fe510a02b4..ceb6dcd1b7 100644
--- a/packages/theme/base/src/common.less
+++ b/packages/theme/base/src/common.less
@@ -1,52 +1,54 @@
 // common变量定义
 :root {
   //功能色
-  --te-common-color-success: var(--te-base-success-color); // 注释，成功-背景色 #5cb300
-  --te-common-color-warning: var(--te-base-warn-color); // 注释，告警-背景色 #ff8800
-  --te-common-color-error: var(--te-base-error-color); // 注释，错误-背景色 #f23030
-  --te-common-color-info: var(--te-base-prompt-color); // 注释，告警-背景色  #1476ff
-  --te-common-color-prompt-secondary: var(--te-base-indigo-5); // 注释，区块提示-背景色 #6e51e0
+  --te-common-color-success: var(--te-base-kelly-60); // 注释，成功-背景色 #5cb300
+  --te-common-color-warning: var(--te-base-orange-60); // 注释，告警-背景色 #ff8800
+  --te-common-color-error: var(--te-base-red-60); // 注释，错误-背景色 #f23030
+  --te-common-color-info: var(--te-base-blue-60); // 注释，告警-背景色  #1476ff
+  --te-common-color-prompt-secondary: var(--te-base-indigo-50); // 注释，区块提示-背景色 #6e51e0
 
   // 文本色
-  --te-common-text-primary: var(--te-base-dark-5); // 一级文本色-重要信息/标题颜色/输入类文本颜色 #191919
-  --te-common-text-secondary: var(--te-base-gray-31); // 二级文本色-次要信息/表单标签颜色/选块按钮默认色 #595959
-  --te-common-text-weaken: var(--te-base-gray-43); // 三级文本色-弱化信息/提示文字 #808080
-  --te-common-text-disabled: var(--te-base-gray-18); // 文本禁用色 #c2c2c2
-  --te-common-text-link: var(--te-base-blue-6); // 链接色 #1476ff
-  --te-common-text-inverse: var(--te-base-gray-1); // 主按钮上的文本色 #fff
-  --te-common-text-dark-inverse: var(--te-base-gray-1); // 深色背景下按钮上的文本色 #fff
-  --te-common-text-emphasize: var(--te-base-blue-6); // 强调性文字 #1476ff
-  --te-common-text-description: var(--te-base-gray-47); // 描述性文字 #9d9d9d
+  --te-common-text-primary: var(--te-base-gray-90); // 一级文本色-重要信息/标题颜色/输入类文本颜色 #191919
+  --te-common-text-secondary: var(--te-base-gray-50); // 二级文本色-次要信息/表单标签颜色/选块按钮默认色 #595959
+  --te-common-text-weaken: var(--te-base-gray-45); // 三级文本色-弱化信息/提示文字 #808080
+  --te-common-text-disabled: var(--te-base-gray-30); // 文本禁用色 #c2c2c2
+  --te-common-text-link: var(--te-base-blue-60); // 链接色 #1476ff
+  --te-common-text-inverse: var(--te-base-gray-0); // 主按钮上的文本色 #fff
+  --te-common-text-dark-inverse: var(--te-base-gray-0); // 深色背景下按钮上的文本色 #fff
+  --te-common-text-emphasize: var(--te-base-blue-60); // 强调性文字 #1476ff
+  --te-common-text-checked: var(--te-base-blue-60); // 选中或者hover文字 #1476ff
 
-  --te-common-icon-primary: var(--te-base-dark-5); // 重要图标色 #191919
-  --te-common-icon-secondary: var(--te-base-gray-43); // 图标默认色 #808080
-  --te-common-icon-disabled: var(--te-base-gray-18); // 图标禁用色 #c2c2c2
-  --te-common-icon-link: var(--te-base-blue-6); // 图标提示色 #1476ff
+  --te-common-icon-primary: var(--te-base-gray-90); // 重要图标色 #191919
+  --te-common-icon-secondary: var(--te-base-gray-45); // 图标默认色 #808080
+  --te-common-icon-disabled: var(--te-base-gray-30); // 图标禁用色 #c2c2c2
+  --te-common-icon-link: var(--te-base-blue-60); // 图标提示色 #1476ff
 
-  --te-common-border-default: var(--te-base-gray-13); // 线条-输入框默认色 #dbdbdb
-  --te-common-border-active: var(--te-base-dark-5); // 线条-输入框悬浮色/激活色  #191919
-  --te-common-border-disabled: var(--te-base-dark-5); // 线条-禁用色  #dbdbdb
-  --te-common-border-secondary: var(--te-base-gray-31); // 线条-次要按钮描边色  #595959
-  --te-common-border-prompt: var(--te-base-gray-13); // 线条-三级按钮默认色/表单内按钮 #dbdbdb
-  --te-common-border-hover: var(--te-base-gray-18); // 线条-按钮边框悬浮色/复选框/单选框，欧仁边框色 #c2c2c2
-  --te-common-border-divider: var(--te-base-gray-11); //线条-白色背景分割线颜色 #ebebeb
-  --te-common-border-bg-divider: var(--te-base-gray-13); // 线条-灰色背景分割线颜色/表头分割线/选块分割线 #dbdbdb
-  --te-common-border-checked: var(--te-base-blue-6); // 线条 选中色 #1476ff
+  --te-common-border-default: var(--te-base-gray-25); // 线条-输入框默认色 #dbdbdb
+  --te-common-border-active: var(--te-base-gray-90); // 线条-输入框悬浮色/激活色  #191919
+  --te-common-border-disabled: var(--te-base-gray-25); // 线条-禁用色  #dbdbdb
+  --te-common-border-secondary: var(--te-base-gray-50); // 线条-次要按钮描边色  #595959
+  --te-common-border-prompt: var(--te-base-gray-25); // 线条-三级按钮默认色/表单内按钮 #dbdbdb
+  --te-common-border-hover: var(--te-base-gray-30); // 线条-按钮边框悬浮色/复选框/单选框默认边框色 #c2c2c2
+  --te-common-border-divider: var(--te-base-gray-20); //线条-白色背景分割线颜色 #e6e6e6
+  --te-common-border-bg-divider: var(--te-base-gray-25); // 线条-灰色背景分割线颜色/表头分割线/选块分割线 #dbdbdb
+  --te-common-border-checked: var(--te-base-blue-60); // 线条 选中色 #1476ff
 
-  --te-common-bg-primary: var(--te-base-dark-5); // 主要按钮-背景色 #191919
-  --te-common-bg-primary-checked: var(--te-base-blue-6); // 主色-背景色 #1476ff
-  --te-common-bg-primary-emphasize: var(--te-base-blue-6); // 主色-背景色 #1476ff
+  --te-common-bg-primary: var(--te-base-gray-90); // 主要按钮-背景色 #191919
+  --te-common-bg-primary-checked: var(--te-base-blue-60); // 主色-背景色  选中和hover等颜色 #1476ff
+  --te-common-bg-primary-emphasize: var(--te-base-blue-60); // 主色-背景色 强调背景 #1476ff
 
-  --te-common-bg-secondary: var(--te-base-gray-31); // 次要按钮-背景色 #595959
-  --te-common-bg-prompt: var(--te-base-gray-7); // 导航按钮-背景色/选块-选中色 #e6e6e6
+  --te-common-bg-secondary: var(--te-base-gray-50); // 次要按钮-背景色 #595959
+  --te-common-bg-prompt: var(--te-base-gray-20); // 导航按钮-背景色/选块-选中色 #e6e6e6
   --te-common-bg-container: var(
-    --te-base-gray-5
+    --te-base-gray-10
   ); // 列表悬浮色/表格悬浮色/顶部导航按钮悬浮色/选块背景色/提示背景色 #f5f5f5
-  --te-common-bg-container-weaken: var(--te-base-gray-2); // 浅编辑代码--背景色 #fafafa
-  --te-common-bg-tag: var(--te-base-green-14); // tag标签-背景色 #e6f2d5
-  --te-common-bg-default: var(--te-base-gray-1); // 白色背景-输入框背景/面板背景色 #fff
-  --te-common-bg-disabled: var(--te-base-gray-6); // 禁用/标签/下拉框多选标签 背景色 #f0f0f0
-  --te-common-bg-switch: var(--te-base-gray-18); // 开关默认色 #c2c2c2
+  --te-common-bg-container-weaken: var(--te-base-gray-5); // 浅编辑代码--背景色 #fafafa
+  --te-common-bg-tag: var(--te-base-green-10); // tag标签-背景色 #e4f7e9
+  --te-common-bg-default: var(--te-base-gray-0); // 白色背景-输入框背景/面板背景色 #fff
+  --te-common-bg-disabled: var(--te-base-gray-15); // 禁用/标签/下拉框多选标签 背景色 #f0f0f0
+  --te-common-bg-switch: var(--te-base-gray-30); // 开关默认色 #c2c2c2
+  --te-common-bg-error: var(--te-base-red-20); // 浅色错误背景-背景色 #fce2e0
+  --te-common-bg-popover: var(--te-base-gray-0); // 对话框/tooltip/popover背景 #fff
 
   // 通用间距
   --te-common-vertical-item-spacing-normal: 12px; // 表单元素之间的距离，标题和列表之间的距离、一个独立元素的padding等等
@@ -55,49 +57,52 @@
 
 :root[data-theme='dark'] {
   //功能色
-  --te-common-color-success: var(--te-base-success-color); // 注释，成功-背景色 #5cb300
-  --te-common-color-warning: var(--te-base-warn-color); // 注释，告警-背景色 #ff8800
-  --te-common-color-error: var(--te-base-error-color); // 注释，错误-背景色 #f23030
-  --te-common-color-info: var(--te-base-prompt-color); // 注释，说明-背景色  #1476ff
-  --te-common-color-prompt-secondary: var(--te-base-indigo-14); // 注释，区块提示-背景色 #A790FF
+  --te-common-color-success: var(--te-base-kelly-60); // 注释，成功-背景色 #5cb300
+  --te-common-color-warning: var(--te-base-orange-60); // 注释，告警-背景色 #ff8800
+  --te-common-color-error: var(--te-base-red-60); // 注释，错误-背景色 #f23030
+  --te-common-color-info: var(--te-base-blue-60); // 注释，告警-背景色  #1476ff
+  --te-common-color-prompt-secondary: var(--te-base-indigo-30); // 注释，区块提示-背景色 #A790FF
   // 文本色
-  --te-common-text-primary: var(--te-base-gray-64); // 一级文本色-重要信息/标题颜色/输入类文本颜色 #F0F1F5
-  --te-common-text-secondary: var(--te-base-gray-65); // 二级文本色-次要信息/表单标签颜色 #B4B5B8
-  --te-common-text-weaken: var(--te-base-gray-66); // 三级文本色-弱化信息/提示文字 #8B8C8F
-  --te-common-text-disabled: var(--te-base-gray-67); // 文本禁用色 #4D4E52
-  --te-common-text-link: var(--te-base-blue-6); // 链接色 #1476ff
-  --te-common-text-inverse: var(--te-base-dark-26); // 主按钮上的文本色 #000000
-  --te-common-text-dark-inverse: var(--te-base-gray-1); // 深色背景下按钮上的文本色 #fff
-  --te-common-text-emphasize: var(--te-base-blue-6); // 强调性文字 #1476ff
+  --te-common-text-primary: var(--te-base-gray-15); // 一级文本色-重要信息/标题颜色/输入类文本颜色 #F0F0F0
+  --te-common-text-secondary: var(--te-base-gray-35); // 二级文本色-次要信息/表单标签颜色 #B4B5B8
+  --te-common-text-weaken: var(--te-base-gray-40); // 三级文本色-弱化信息/提示文字 #8B8C8F
+  --te-common-text-disabled: var(--te-base-gray-55); // 文本禁用色 #4D4E52
+  --te-common-text-link: var(--te-base-blue-60); // 链接色 #1476ff
+  --te-common-text-inverse: var(--te-base-gray-100); // 主按钮上的文本色 #000000
+  --te-common-text-dark-inverse: var(--te-base-gray-0); // 深色背景下按钮上的文本色 #fff
+  --te-common-text-emphasize: var(--te-base-blue-60); // 强调性文字 #1476ff
+  --te-common-text-checked: var(--te-base-blue-60); // 选中或者hover文字 #1476ff
 
-  --te-common-icon-primary: var(--te-base-gray-64); // 重要图标色 #F0F1F5
-  --te-common-icon-secondary: var(--te-base-gray-66); // 图标默认色 #8B8C8F
-  --te-common-icon-disabled: var(--te-base-gray-18); // 图标禁用色 #C2C2C2
-  --te-common-icon-link: var(--te-base-blue-6); // 图标提示色 #1476ff
+  --te-common-icon-primary: var(--te-base-gray-15); // 重要图标色 #F0F0F0
+  --te-common-icon-secondary: var(--te-base-gray-40); // 图标默认色 #8B8C8F
+  --te-common-icon-disabled: var(--te-base-gray-30); // 图标禁用色 #C2C2C2
+  --te-common-icon-link: var(--te-base-blue-60); // 图标提示色 #1476ff
 
-  --te-common-border-default: var(--te-base-gray-67); // 线条-输入框默认色 #4D4E52
-  --te-common-border-active: var(--te-base-gray-64); // 线条-输入框悬浮色/激活色  #F0F1F5
-  --te-common-border-disabled: var(--te-base-gray-68); // 线条-禁用色  #36383D
-  --te-common-border-secondary: var(--te-base-gray-65); // 线条-次要按钮描边色  #B4B5B8
-  --te-common-border-prompt: var(--te-base-gray-67); // 线条-三级按钮默认色/表单内按钮 #4D4E52
-  --te-common-border-hover: var(--te-base-gray-66); // 线条-按钮边框悬浮色 #8B8C8F
-  --te-common-border-divider: var(--te-base-gray-68); //线条-白色背景分割线颜色 #36383D
-  --te-common-border-bg-divider: var(--te-base-gray-67); // 线条-灰色背景分割线颜色/表头分割线/选块分割线 #4D4E52
-  --te-common-border-checked: var(--te-base-blue-6); // 线条 选中色 #1476ff
+  --te-common-border-default: var(--te-base-gray-55); // 线条-输入框默认色 #4D4E52
+  --te-common-border-active: var(--te-base-gray-15); // 线条-输入框悬浮色/激活色  #F0F0F0
+  --te-common-border-disabled: var(--te-base-gray-60); // 线条-禁用色  #36383D
+  --te-common-border-secondary: var(--te-base-gray-35); // 线条-次要按钮描边色/禁用色  #B4B5B8
+  --te-common-border-prompt: var(--te-base-gray-55); // 线条-三级按钮默认色/表单内按钮 #4D4E52
+  --te-common-border-hover: var(--te-base-gray-40); // 线条-按钮边框悬浮色/复选框/单选框默认边框色 #8B8C8F
+  --te-common-border-divider: var(--te-base-gray-60); //线条-白色背景分割线颜色 #36383D
+  --te-common-border-bg-divider: var(--te-base-gray-55); // 线条-灰色背景分割线颜色/表头分割线/选块分割线 #4D4E52
+  --te-common-border-checked: var(--te-base-blue-60); // 线条 选中色 #1476ff
 
-  --te-common-bg-primary: var(--te-base-gray-64); // 主要按钮-背景色 #F0F1F5
-  --te-common-bg-primary-checked: var(--te-base-blue-6); // 主色-背景色 #1476ff
-  --te-common-bg-primary-emphasize: var(--te-base-blue-6); // 主色-背景色 #1476ff
-  --te-common-bg-secondary: var(--te-base-gray-65); // 次要按钮-背景色 #B4B5B8
-  --te-common-bg-prompt: var(--te-base-gray-66); // 导航按钮-背景色/选块-选中色 #8B8C8F
+  --te-common-bg-primary: var(--te-base-gray-15); // 主要按钮-背景色 #F0F0F0
+  --te-common-bg-primary-checked: var(--te-base-blue-60); // 主色-背景色 选中和hover等颜色 #1476ff
+  --te-common-bg-primary-emphasize: var(--te-base-blue-60); // 主色-背景色 强调背景 #1476ff
+  --te-common-bg-secondary: var(--te-base-gray-35); // 次要按钮-背景色 #B4B5B8
+  --te-common-bg-prompt: var(--te-base-gray-40); // 导航按钮-背景色/选块-选中色 #8B8C8F
   --te-common-bg-container: var(
-    --te-base-gray-68
+    --te-base-gray-60
   ); // 列表悬浮色/表格悬浮色/顶部导航按钮悬浮色/选块背景色/提示背景色 #36383D
-  --te-common-bg-container-weaken: var(--te-base-gray-69); // 浅编辑代码--背景色 #2B2D33
-  --te-common-bg-tag: var(--te-base-dark-28); // tag标签-背景色 #1d312a
-  --te-common-bg-default: var(--te-base-dark-27); // 深色背景-输入框背景/面板背景色 #212329
-  --te-common-bg-disabled: var(--te-base-dark-29); // 禁用/标签/下拉框多选标签 背景色 #2a2c31
-  --te-common-bg-switch: var(--te-base-gray-67); // 开关默认色 #4D4E52
+  --te-common-bg-container-weaken: var(--te-base-gray-70); // 浅编辑代码--背景色 #2a2c31
+  --te-common-bg-tag: var(--te-base-green-110); // tag标签-背景色 #1d312a
+  --te-common-bg-default: var(--te-base-gray-80); // 深色背景-输入框背景/面板背景色 #212329
+  --te-common-bg-disabled: var(--te-base-gray-70); // 禁用/标签/下拉框多选标签 背景色 #2a2c31
+  --te-common-bg-switch: var(--te-base-gray-55); // 开关默认色 #4D4E52
+  --te-common-bg-error: var(--te-base-red-20); // 浅色错误背景-背景色 #fce2e0
+  --te-common-bg-popover: var(--te-base-gray-110); // 对话框/tooltip/popover背景 #0F1115
 
   // 通用间距
   --te-common-vertical-item-spacing-normal: 12px; // 表单元素之间的距离，标题和列表之间的距离、一个独立元素的padding等等
diff --git a/packages/theme/base/src/component-common.less b/packages/theme/base/src/component-common.less
index ecd0351942..5fe4a85978 100644
--- a/packages/theme/base/src/component-common.less
+++ b/packages/theme/base/src/component-common.less
@@ -29,6 +29,7 @@
 }
 
 .tiny-select-dropdown.tiny-select-dropdown {
+  background-color: var(--te-common-bg-default);
   // 下拉新增列
   .tiny-select__top-create {
     margin: 8px 12px 4px 12px;
@@ -85,6 +86,7 @@
     height: 24px;
     border-color: var(--te-common-border-default);
     color: var(--te-common-text-primary);
+    background-color: transparent;
     font-size: var(--te-base-font-size-base);
     &:hover {
       border-color: var(--te-common-border-active);
@@ -103,6 +105,7 @@
 // 3、折叠框
 .tiny-collapse.tiny-collapse {
   border-top: 0;
+  border-bottom: 0;
   .tiny-collapse-item__header {
     flex-direction: row-reverse;
     font-size: var(--te-base-font-size-base);
@@ -128,6 +131,7 @@
   }
   .tiny-collapse-item {
     border-top-color: var(--te-common-border-bg-divider);
+    border-bottom-color: var(--te-common-border-bg-divider);
     border-bottom: 0;
     border-left: 0;
     border-right: 0;
@@ -162,7 +166,9 @@
         height: 24px;
         .tiny-tree-node__content-left {
           padding: 0 12px;
+          background-color: var(--te-common-bg-default);
           .tiny-tree-node__content-box {
+            color: var(--te-common-text-primary);
             padding: 0 12px 0 4px;
             background-color: var(--te-common-bg-default);
             &:hover {
@@ -242,10 +248,15 @@
 // 7、dialog组件
 .tiny-dialog-box.tiny-dialog-box {
   padding: 20px;
+  background-color: var(--te-common-bg-popover);
   .tiny-dialog-box__header {
     font-size: var(--te-base-font-size-1);
     color: var(--te-common-text-primary);
     padding: 0;
+    background-color: var(--te-common-bg-popover);
+    .tiny-dialog-box__close {
+      color: var(--te-common-text-primary);
+    }
   }
   .tiny-dialog-box__body {
     color: var(--te-common-text-secondary);
@@ -359,7 +370,7 @@
 .tiny-modal__box.tiny-modal__box {
   padding: 20px;
   border-radius: var(--te-base-border-radius-1);
-  box-shadow: 0 0 10px 0 var(--te-base-rgba-23);
+  box-shadow: 0 0 10px 0 var(--te-base-box-shadow-rgba-1);
   .tiny-modal__header {
     padding: 0;
     font-size: var(--te-base-font-size-1);
@@ -391,7 +402,7 @@
 .tiny-modal.tiny-modal.tiny-modal__wrapper.type__message {
   .tiny-modal__box {
     border-radius: var(--te-base-border-radius-2);
-    box-shadow: 0 2px 12px 0 var(--te-base-rgba-24);
+    box-shadow: 0 2px 12px 0 var(--te-base-box-shadow-rgba-2);
     padding: 0;
     height: 38px;
     .tiny-modal__body {
@@ -418,6 +429,7 @@
     color: var(--te-common-text-primary);
     border-color: var(--te-common-border-default);
     text-align: left;
+    background-color: var(--te-common-bg-default);
   }
   &.is-controls-right {
     .tiny-numeric__input-inner {
@@ -459,9 +471,9 @@
   padding: 0px 8px;
   font-size: var(--te-base-font-size-base);
   color: var(--te-common-text-primary);
-  background-color: var(--te-common-bg-default);
+  background-color: var(--te-common-bg-popover);
   border: 0;
-  box-shadow: 0 8px 24px 0 var(--te-base-rgba-27);
+  box-shadow: 0 8px 24px 0 var(--te-base-box-shadow-rgba-2);
 
   height: auto;
 }
@@ -541,8 +553,9 @@
 .tiny-notify.tiny-notify {
   border-radius: var(--te-base-border-radius-2);
   padding: 12px;
-  background-color: var(--te-common-bg-default);
-  box-shadow: 0 2px 12px 0 var(--te-base-rgba-24);
+  background-color: var(--te-common-bg-popover);
+  color: var(--te-common-text-primary);
+  box-shadow: 0 2px 12px 0 var(--te-base-box-shadow-rgba-2);
   .tiny-notify__icon-zone {
     height: 24px;
     .tiny-notify__icon-status {
@@ -550,6 +563,9 @@
       height: 16px;
     }
   }
+  .tiny-notify__title {
+    color: var(--te-common-text-primary);
+  }
   .tiny-notify__content {
     color: var(--te-common-text-secondary);
     font-size: var(--te-base-font-size-base);
@@ -604,11 +620,11 @@
 // 17、tooltip文字提示
 .tiny-tooltip.tiny-tooltip {
   &.tiny-tooltip__popper {
-    background: var(--te-common-bg-default);
+    background: var(--te-common-bg-popover);
     color: var(--te-common-text-primary);
-    box-shadow: 0 0 20px 0 var(--te-base-dark-bg-8);
+    box-shadow: 0 0 20px 0 var(--te-base-box-shadow-rgba-2);
     &[class*='is-'] {
-      background: var(--te-common-bg-default);
+      background: var(--te-common-bg-popover);
       color: var(--te-common-text-primary);
       font-size: var(--te-base-font-size-base);
       padding: 12px;
@@ -683,6 +699,7 @@
       .tiny-grid__header {
         .tiny-grid-header__row {
           .tiny-grid-header__column {
+            color: var(--te-common-text-primary);
             height: 24px;
             &.col__center {
               text-align: left;
@@ -715,6 +732,7 @@
       }
       .tiny-grid__body {
         .tiny-grid-body__row {
+          background-color: var(--te-common-bg-default);
           &.nav-tree .tiny-grid-cell {
             line-height: inherit;
           }
@@ -784,3 +802,21 @@
     }
   }
 }
+
+// 指引弹窗
+
+.tiny-guide.tiny-guide {
+  background-color: var(--te-common-bg-popover);
+  .shepherd-content .shepherd-header,
+  .shepherd-arrow:before {
+    background-color: var(--te-common-bg-popover);
+  }
+  &.shepherd-has-title[data-popper-placement^='bottom'],
+  &.shepherd-has-title[data-popper-placement^='top'],
+  &.shepherd-has-title[data-popper-placement^='left'],
+  &.shepherd-has-title[data-popper-placement^='right'] {
+    .shepherd-arrow:before {
+      background-color: var(--te-common-bg-popover);
+    }
+  }
+}
diff --git a/packages/theme/base/src/page/base-config-page.less b/packages/theme/base/src/page/base-config-page.less
index 3f2e7c305f..89a3480d19 100644
--- a/packages/theme/base/src/page/base-config-page.less
+++ b/packages/theme/base/src/page/base-config-page.less
@@ -50,6 +50,7 @@ body {
   margin: 0;
   font-family: 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
     sans-serif;
+  color: var(--te-common-text-primary);
 }
 
 ol,
@@ -133,15 +134,16 @@ td {
 }
 
 .tiny-popover.tiny-popover.option-popper {
-  background: var(--ti-lowcode-popover-bg-color);
-  border: 1px solid var(--ti-lowcode-popover-option-popper-border-color);
-  color: var(--ti-lowcode-toolbar-breadcrumb-color);
+  background: var(--te-common-bg-popover);
+  border: 1px solid transparent;
+  color: var(--te-common-text-secondary);
   padding: 0px 8px 12px;
   &[x-placement^='bottom'] {
     .popper__arrow {
+      border-color: transparent;
       &,
       &::after {
-        border-bottom-color: var(--ti-lowcode-popover-bg-color);
+        border-bottom-color: var(--te-common-bg-popover);
       }
     }
   }
@@ -152,18 +154,19 @@ td {
     .popper__arrow {
       left: -7px;
       border-color: transparent;
-
+      &,
       &::after {
-        border-right-color: var(--ti-lowcode-popover-bg-color);
+        border-right-color: var(--te-common-bg-popover);
       }
     }
   }
 
   &[x-placement^='top'] {
     .popper__arrow {
+      border-color: transparent;
       &,
       &::after {
-        border-top-color: var(--ti-lowcode-popover-bg-color);
+        border-top-color: var(--te-common-bg-popover);
       }
     }
   }
@@ -171,17 +174,17 @@ td {
   &[x-placement^='left'] {
     .popper__arrow {
       right: -7px;
-
+      border-color: transparent;
       &,
       &::after {
-        border-left-color: var(--ti-lowcode-popover-bg-color);
+        border-left-color: var(--te-common-bg-popover);
       }
     }
   }
 
   .add-options {
     &.top {
-      border-bottom: 1px solid var(--ti-lowcode-tabs-border-color);
+      border-bottom: 1px solid var(--te-common-border-default);
       margin-bottom: 15px;
       overflow: hidden;
       display: flex;
@@ -207,16 +210,14 @@ td {
         margin-bottom: 4px;
 
         :deep(.tiny-form-item__label) {
-          color: var(--ti-lowcode-toolbar-breadcrumb-color);
+          color: var(--te-common-text-secondary);
         }
 
         :deep(.tiny-input__inner) {
-          color: var(--ti-lowcode-tootip-input-color);
-          background: var(--ti-lowcode-tootip-input-background-color);
-          border-color: var(--ti-lowcode-tootip-input-border-color);
+          border-color: var(--te-common-border-default);
 
           &:focus {
-            border-color: var(--ti-lowcode-canvas-handle-hover-bg);
+            border-color: var(--te-common-bg-primary-checked);
           }
         }
       }
@@ -247,7 +248,7 @@ td {
       }
 
       &.isBind {
-        color: var(--ti-lowcode-icon-bind-color);
+        color: var(--te-common-text-checked);
       }
     }
   }
diff --git a/packages/theme/dark/base.less b/packages/theme/dark/base.less
deleted file mode 100644
index 2713efff9b..0000000000
--- a/packages/theme/dark/base.less
+++ /dev/null
@@ -1,273 +0,0 @@
-:root {
-  // 灰阶
-  --ti-lowcode-base-gray-0: #fff;
-  --ti-lowcode-base-gray-10: #e6e6e6;
-  --ti-lowcode-base-gray-20: #d9d9d9;
-  --ti-lowcode-base-gray-30: #ccc;
-  --ti-lowcode-base-gray-40: #a6a6a6;
-  --ti-lowcode-base-gray-50: #808080;
-  --ti-lowcode-base-gray-60: #595959;
-  --ti-lowcode-base-gray-70: #333;
-  --ti-lowcode-base-gray-80: #292929;
-  --ti-lowcode-base-gray-90: #1f1f1f;
-  --ti-lowcode-base-gray-95: #141414;
-  --ti-lowcode-base-gray-100: #000;
-
-  // expand-red
-  --ti-lowcode-base-red-1: #ffeae8;
-  --ti-lowcode-base-red-2: #fccdca;
-  --ti-lowcode-base-red-3: #faa9a5;
-  --ti-lowcode-base-red-4: #fa8682;
-  --ti-lowcode-base-red-5: #f76360;
-  --ti-lowcode-base-red-6: #f23030;
-  --ti-lowcode-base-red-7: #cc272a;
-  --ti-lowcode-base-red-8: #a3171c;
-  --ti-lowcode-base-red-9: #78080e;
-  --ti-lowcode-base-red-10: #4d0005;
-  --ti-lowcode-base-red-11: #a64242;
-  --ti-lowcode-base-red-12: #d4827f;
-  --ti-lowcode-base-red-13: #f2c5c2;
-
-  // expand-orange
-  --ti-lowcode-base-orange-1: #fff5e8;
-  --ti-lowcode-base-orange-2: #fcdfb8;
-  --ti-lowcode-base-orange-3: #fcc98b;
-  --ti-lowcode-base-orange-4: #fcb25c;
-  --ti-lowcode-base-orange-5: #ff9a2e;
-  --ti-lowcode-base-orange-6: #ff8800;
-  --ti-lowcode-base-orange-7: #d96900;
-  --ti-lowcode-base-orange-8: #a64d00;
-  --ti-lowcode-base-orange-9: #733400;
-  --ti-lowcode-base-orange-10: #4d2201;
-  --ti-lowcode-base-orange-11: #9e6d3f;
-  --ti-lowcode-base-orange-12: #d6a981;
-  --ti-lowcode-base-orange-13: #f2d8c2;
-
-  // expand-yellow
-  --ti-lowcode-base-yellow-1: #fcf9eb;
-  --ti-lowcode-base-yellow-2: #fcf0c2;
-  --ti-lowcode-base-yellow-3: #fae396;
-  --ti-lowcode-base-yellow-4: #f7d56d;
-  --ti-lowcode-base-yellow-5: #f7c845;
-  --ti-lowcode-base-yellow-6: #fcbe1e;
-  --ti-lowcode-base-yellow-7: #d99b0b;
-  --ti-lowcode-base-yellow-8: #a67711;
-  --ti-lowcode-base-yellow-9: #7a5202;
-  --ti-lowcode-base-yellow-10: #4d3200;
-  --ti-lowcode-base-yellow-11: #9e7e3f;
-  --ti-lowcode-base-yellow-12: #d4b57f;
-  --ti-lowcode-base-yellow-13: #e6d3b8;
-
-  // expand-lemon
-  --ti-lowcode-base-lemon-1: #fcfae8;
-  --ti-lowcode-base-lemon-2: #fcf6c2;
-  --ti-lowcode-base-lemon-3: #fcf092;
-  --ti-lowcode-base-lemon-4: #fae969;
-  --ti-lowcode-base-lemon-5: #f7e04a;
-  --ti-lowcode-base-lemon-6: #f7d916;
-  --ti-lowcode-base-lemon-7: #d9bb16;
-  --ti-lowcode-base-lemon-8: #a38708;
-  --ti-lowcode-base-lemon-9: #756002;
-  --ti-lowcode-base-lemon-10: #4d3d00;
-  --ti-lowcode-base-lemon-11: #9e8f46;
-  --ti-lowcode-base-lemon-12: #d6c581;
-  --ti-lowcode-base-lemon-13: #eddfb2;
-
-  // expand-lime
-  --ti-lowcode-base-lime-1: #f8fae3;
-  --ti-lowcode-base-lime-2: #eff5bf;
-  --ti-lowcode-base-lime-3: #e2ed8e;
-  --ti-lowcode-base-lime-4: #d5e667;
-  --ti-lowcode-base-lime-5: #c6de3e;
-  --ti-lowcode-base-lime-6: #b2d119;
-  --ti-lowcode-base-lime-7: #95b312;
-  --ti-lowcode-base-lime-8: #728c0a;
-  --ti-lowcode-base-lime-9: #576e05;
-  --ti-lowcode-base-lime-10: #3b4d00;
-  --ti-lowcode-base-lime-11: #808c46;
-  --ti-lowcode-base-lime-12: #c1cc7a;
-  --ti-lowcode-base-lime-13: #3b4d00;
-
-  // expand-kelly
-  --ti-lowcode-base-kelly-1: #f2fae6;
-  --ti-lowcode-base-kelly-2: #daf2bb;
-  --ti-lowcode-base-kelly-3: #b9e683;
-  --ti-lowcode-base-kelly-4: #9edb58;
-  --ti-lowcode-base-kelly-5: #7dcc29;
-  --ti-lowcode-base-kelly-6: #5cb300;
-  --ti-lowcode-base-kelly-7: #4b9902;
-  --ti-lowcode-base-kelly-8: #3c8001;
-  --ti-lowcode-base-kelly-9: #2e6600;
-  --ti-lowcode-base-kelly-10: #1f4700;
-  --ti-lowcode-base-kelly-11: #628c38;
-  --ti-lowcode-base-kelly-12: #a2c777;
-  --ti-lowcode-base-kelly-13: #d2e6bb;
-
-  // expand-green
-  --ti-lowcode-base-green-1: #e8fced;
-  --ti-lowcode-base-green-2: #bbf2c8;
-  --ti-lowcode-base-green-3: #82e09a;
-  --ti-lowcode-base-green-4: #51d675;
-  --ti-lowcode-base-green-5: #25c251;
-  --ti-lowcode-base-green-6: #00b336;
-  --ti-lowcode-base-green-7: #029931;
-  --ti-lowcode-base-green-8: #01802b;
-  --ti-lowcode-base-green-9: #006624;
-  --ti-lowcode-base-green-10: #004a1b;
-  --ti-lowcode-base-green-11: #3d995c;
-  --ti-lowcode-base-green-12: #77c78f;
-  --ti-lowcode-base-green-13: #b8e6c7;
-
-  // expand-mint
-  --ti-lowcode-base-mint-1: #e8fcfa;
-  --ti-lowcode-base-mint-2: #bff5ef;
-  --ti-lowcode-base-mint-3: #8be8e0;
-  --ti-lowcode-base-mint-4: #5dded5;
-  --ti-lowcode-base-mint-5: #38d6ce;
-  --ti-lowcode-base-mint-6: #10c7c1;
-  --ti-lowcode-base-mint-7: #0aaba8;
-  --ti-lowcode-base-mint-8: #048c8c;
-  --ti-lowcode-base-mint-9: #046466;
-  --ti-lowcode-base-mint-10: #004547;
-  --ti-lowcode-base-mint-11: #3d9996;
-  --ti-lowcode-base-mint-12: #77c7c2;
-  --ti-lowcode-base-mint-13: #b8e6e1;
-
-  // expand-sky
-  --ti-lowcode-base-sky-1: #e8f8fc;
-  --ti-lowcode-base-sky-2: #c4f2ff;
-  --ti-lowcode-base-sky-3: #9de4fa;
-  --ti-lowcode-base-sky-4: #79d8f7;
-  --ti-lowcode-base-sky-5: #58cbf5;
-  --ti-lowcode-base-sky-6: #33bcf2;
-  --ti-lowcode-base-sky-7: #1f9acf;
-  --ti-lowcode-base-sky-8: #1075a3;
-  --ti-lowcode-base-sky-9: #065278;
-  --ti-lowcode-base-sky-10: #00304a;
-  --ti-lowcode-base-sky-11: #3d7f99;
-  --ti-lowcode-base-sky-12: #7ab8cc;
-  --ti-lowcode-base-sky-13: #b6e5f2;
-
-  // expand-blue
-  --ti-lowcode-base-blue-1: #e3effa;
-  --ti-lowcode-base-blue-2: #c4e1ff;
-  --ti-lowcode-base-blue-3: #99c9ff;
-  --ti-lowcode-base-blue-4: #68abfc;
-  --ti-lowcode-base-blue-5: #4191fa;
-  --ti-lowcode-base-blue-6: #1476ff;
-  --ti-lowcode-base-blue-7: #0f5ed4;
-  --ti-lowcode-base-blue-8: #0845a6;
-  --ti-lowcode-base-blue-9: #022e7a;
-  --ti-lowcode-base-blue-10: #001a4a;
-  --ti-lowcode-base-blue-11: #3d6899;
-  --ti-lowcode-base-blue-12: #7fa6d4;
-  --ti-lowcode-base-blue-13: #b6d4f2;
-
-  // expand-indigo
-  --ti-lowcode-base-indigo-1: #eee8ff;
-  --ti-lowcode-base-indigo-2: #ddd7fa;
-  --ti-lowcode-base-indigo-3: #b19cf7;
-  --ti-lowcode-base-indigo-4: #957af5;
-  --ti-lowcode-base-indigo-5: #6e51e0;
-  --ti-lowcode-base-indigo-6: #512fd6;
-  --ti-lowcode-base-indigo-7: #391eb0;
-  --ti-lowcode-base-indigo-8: #27108f;
-  --ti-lowcode-base-indigo-9: #19056e;
-  --ti-lowcode-base-indigo-10: #0e004d;
-  --ti-lowcode-base-indigo-11: #584d99;
-  --ti-lowcode-base-indigo-12: #847acc;
-  --ti-lowcode-base-indigo-13: #bbb8e6;
-
-  // expand-purple
-  --ti-lowcode-base-purple-1: #f5e8ff;
-  --ti-lowcode-base-purple-2: #e4c5fc;
-  --ti-lowcode-base-purple-3: #d0a1f7;
-  --ti-lowcode-base-purple-4: #b878f0;
-  --ti-lowcode-base-purple-5: #9f53e6;
-  --ti-lowcode-base-purple-6: #832fd6;
-  --ti-lowcode-base-purple-7: #641eb0;
-  --ti-lowcode-base-purple-8: #4c1091;
-  --ti-lowcode-base-purple-9: #370673;
-  --ti-lowcode-base-purple-10: #20004d;
-  --ti-lowcode-base-purple-11: #683d99;
-  --ti-lowcode-base-purple-12: #a07acc;
-  --ti-lowcode-base-purple-13: #cbb8e6;
-
-  // expand-pink
-  --ti-lowcode-base-pink-1: #fce6fb;
-  --ti-lowcode-base-pink-2: #fcc2f9;
-  --ti-lowcode-base-pink-3: #f794f2;
-  --ti-lowcode-base-pink-4: #eb67e6;
-  --ti-lowcode-base-pink-5: #e841e5;
-  --ti-lowcode-base-pink-6: #d91ad9;
-  --ti-lowcode-base-pink-7: #b50fb8;
-  --ti-lowcode-base-pink-8: #8f0a94;
-  --ti-lowcode-base-pink-9: #6b0370;
-  --ti-lowcode-base-pink-10: #47004d;
-  --ti-lowcode-base-pink-11: #993d99;
-  --ti-lowcode-base-pink-12: #c97acc;
-  --ti-lowcode-base-pink-13: #e2b8e6;
-
-  // expand-rose
-  --ti-lowcode-base-rose-1: #fce6ef;
-  --ti-lowcode-base-rose-2: #ffc4de;
-  --ti-lowcode-base-rose-3: #fa9bc9;
-  --ti-lowcode-base-rose-4: #f56cac;
-  --ti-lowcode-base-rose-5: #eb4696;
-  --ti-lowcode-base-rose-6: #e61c81;
-  --ti-lowcode-base-rose-7: #b50e65;
-  --ti-lowcode-base-rose-8: #940a54;
-  --ti-lowcode-base-rose-9: #70033f;
-  --ti-lowcode-base-rose-10: #4d002b;
-  --ti-lowcode-base-rose-11: #993d6e;
-  --ti-lowcode-base-rose-12: #cc7aa6;
-  --ti-lowcode-base-rose-13: #e6b8d2;
-
-  // 公司品牌色
-  --ti-lowcode-base-brand-color: #c7000b;
-
-  // 主色
-  --ti-lowcode-base-primary-color-1: #e6e6e6;
-  --ti-lowcode-base-primary-color-2: #1476ff;
-
-  // 背景色
-  --ti-lowcode-base-bg: #141414;
-  --ti-lowcode-base-bg-1: rgba(0, 0, 0, 0.05);
-  --ti-lowcode-base-bg-2: #333;
-  --ti-lowcode-base-bg-3: #e6e6e6;
-  --ti-lowcode-base-bg-4: #a6a6a6;
-  --ti-lowcode-base-bg-5: #000;
-  --ti-lowcode-base-bg-6: #a6a6a61a;
-
-  // 文本色
-  --ti-lowcode-base-text-color: #e6e6e6;
-  --ti-lowcode-base-text-color-1: #a6a6a6;
-  --ti-lowcode-base-text-color-2: #1476ff;
-  --ti-lowcode-base-text-color-3: #808080;
-  --ti-lowcode-base-text-color-4: #595959;
-
-  // 文本链接色
-  --ti-lowcode-base-text-link-color: #e6e6e6;
-  --ti-lowcode-base-text-link-color-1: #a6a6a6;
-  --ti-lowcode-base-text-link-color-2: #595959;
-  --ti-lowcode-base-text-link-color-3: #fff;
-
-  // 按钮边框色
-  --ti-lowcode-base-secondary-button-border-color: #a6a6a6;
-  --ti-lowcode-base-secondary-button-border-hover-color: #3d3d3d;
-  --ti-lowcode-base-default-button-border-color: #595959;
-  --ti-lowcode-base-default-button-border-hover-color: #e6e6e6;
-  --ti-lowcode-base-default-button-border-disable-color: #dbdbdb;
-
-  // 分割线
-  --ti-lowcode-base-split-color-1: rgba(255, 255, 255, 0.08); // 白色背景分割线
-  --ti-lowcode-base-split-color-2: rgba(255, 255, 255, 0.15); // 灰色背景分割线
-
-  // 状态色
-  --ti-lowcode-base-error-color: #f23030;
-  --ti-lowcode-base-warn-color: #ff8800;
-  --ti-lowcode-base-warn-color-1: #f7d916;
-  --ti-lowcode-base-success-color: #5cb300;
-  --ti-lowcode-base-prompt-color: #1476ff;
-  --ti-lowcode-base-invalidate-color: #ebebeb;
-}
diff --git a/packages/theme/dark/block.less b/packages/theme/dark/block.less
index 2b43fe9cb2..94edaef18e 100644
--- a/packages/theme/dark/block.less
+++ b/packages/theme/dark/block.less
@@ -1,57 +1,55 @@
 :root {
   // 历史备份列表
-  --ti-lowcode-component-block-history-list-item-border-color: var(--ti-lowcode-common-border-color-1); // 组件边框色
+  --ti-lowcode-component-block-history-list-item-border-color: var(--te-common-border-default); // 组件边框色
   // 组件 hover 背景 色
-  --ti-lowcode-component-block-history-list-item-hover-bg: var(--ti-lowcode-common-component-hover-bg);
+  --ti-lowcode-component-block-history-list-item-hover-bg: var(--te-common-bg-container);
   // 组件默认颜色
-  --ti-lowcode-component-block-history-list-item-text-color: var(--ti-lowcode-common-secondary-text-color);
+  --ti-lowcode-component-block-history-list-item-text-color: var(--te-common-text-secondary);
   // 预览还原 hover 颜色
-  --ti-lowcode-component-block-history-list-item-btn-hover-color: var(--ti-lowcode-common-primary-text-color);
-  --ti-lowcode-component-block-history-list-item-btn-hover-bg: var(--ti-lowcode-common-hover-bg-1); // 预览还原背景色
+  --ti-lowcode-component-block-history-list-item-btn-hover-color: var(--te-common-text-secondary);
+  --ti-lowcode-component-block-history-list-item-btn-hover-bg: var(--te-common-bg-container); // 预览还原背景色
   // 预览还原边框色
-  --ti-lowcode-component-block-history-list-item-btn-border-color: var(--ti-lowcode-common-border-color-3);
-  --ti-lowcode-component-block-history-list-item-title-color: var(--ti-lowcode-common-text-color-2); // 组件title颜色
-  --ti-lowcode-component-block-history-list-item-time-color: rgba(173, 176, 184, 0.6); // 组件时间颜色
+  --ti-lowcode-component-block-history-list-item-btn-border-color: var(--te-common-border-default);
 
   // 区块列表
-  --ti-lowcode-component-block-list-item-color: var(--ti-lowcode-common-secondary-text-color); // 区块列表颜色
-  --ti-lowcode-component-block-list-shortcut-title-color: var(--ti-lowcode-common-primary-text-color); // 快照标题颜色
-  --ti-lowcode-component-block-list-shortcut-bg: var(--ti-lowcode-common-component-bg); // 快照标题颜色
-  --ti-lowcode-component-block-list-border-color: var(--ti-lowcode-common-border-color-4); // 快照标题颜色
-  --ti-lowcode-component-block-list-item-active-bg: var(--ti-lowcode-common-component-hover-bg); // 区块 active 背景色
-  --ti-lowcode-component-block-list-item-tag-bg: #8d5421;
-  --ti-lowcode-component-block-version-list-item-border-color: #202020;
-  --ti-lowcode-component-block-version-list-item-bg: #292929;
-  --ti-lowcode-component-block-version-list-version-bg: #323644;
-  --ti-lowcode-component-block-version-list-version-color: #476be5;
-  --ti-lowcode-component-block-version-list-panel-title-color: var(--ti-lowcode-common-primary-text-color);
-  --ti-lowcode-component-block-version-list-time-color: var(--ti-lowcode-common-text-color-5);
-  --ti-lowcode-component-block-version-list-desc-color: #63666c;
-  --ti-lowcode-component-block-version-list-current-version-color: var(--ti-lowcode-base-text-color-2);
-  --ti-lowcode-component-block-setting-popover-bg: #202020;
-  --ti-lowcode-component-block-setting-item-hover-bg: #202020;
-  --ti-lowcode-component-block-setting-item-text-color: var(--ti-lowcode-common-secondary-text-color);
+  --ti-lowcode-component-block-list-item-color: var(--te-common-text-secondary); // 区块列表颜色
+  --ti-lowcode-component-block-list-shortcut-title-color: var(--te-common-text-primary); // 快照标题颜色
+  --ti-lowcode-component-block-list-shortcut-bg: var(--te-common-bg-default); // 快照标题颜色
+  --ti-lowcode-component-block-list-item-active-bg: var(--te-common-bg-container); // 区块 active 背景色
+  --ti-lowcode-component-block-list-item-tag-bg: var(
+    --te-common-color-warning
+  ); // 暗色独有，可以注意一下，后续可考虑去掉
+  --ti-lowcode-component-block-version-list-version-bg: var(--te-common-bg-default);
+  --ti-lowcode-component-block-version-list-version-color: var(--te-common-text-primary);
+  --ti-lowcode-component-block-version-list-panel-title-color: var(--te-common-text-primary);
+  --ti-lowcode-component-block-version-list-time-color: var(--te-common-text-primary);
+  --ti-lowcode-component-block-version-list-desc-color: var(--te-common-text-weaken);
+  --ti-lowcode-component-block-version-list-current-version-color: var(
+    --te-common-text-emphasize
+  ); // 暗色独有，可以注意一下，后续可考虑去掉
+  --ti-lowcode-component-block-setting-popover-bg: var(--te-common-bg-default);
+  --ti-lowcode-component-block-setting-item-hover-bg: var(--te-common-bg-container);
+  --ti-lowcode-component-block-setting-item-text-color: var(--te-common-text-secondary);
   // 区块管理 - 添加分类
-  --ti-lowcode-component-block-list-add-group-btn-bg: var(--ti-lowcode-common-header-bg);
+  --ti-lowcode-component-block-list-add-group-btn-bg: var(--te-common-bg-default);
   --ti-lowcode-component-block-list-add-group-btn-border: none;
-  --ti-lowcode-component-block-list-setting-btn-color: var(--ti-lowcode-common-text-color-5);
-  --ti-lowcode-component-block-list-setting-btn-hover-color: var(--ti-lowcode-common-primary-color);
+  --ti-lowcode-component-block-list-setting-btn-color: var(--te-common-text-weaken); // 暗色和亮色不一致，需要注意
+  --ti-lowcode-component-block-list-setting-btn-hover-color: var(
+    --te-common-text-checked
+  ); // 暗色和亮色不一致，需要注意
   --ti-lowcode-component-block-list-add-group-btn-border-radius: none;
 }
 
 .block-setting-content {
-  --ti-lowcode-block-config-form-item-color: var(--ti-lowcode-toolbar-breadcrumb-color);
-
   .tiny-form-item.is-error .tiny-input__inner {
-    background-color: var(--ti-lowcode-tabs-bg);
+    background-color: var(--te-common-bg-error);
   }
 }
 
 // 区块设置 - 标签
 .block-tag-create {
-  --ti-lowcode-block-config-tag-color: var(--ti-lowcode-toolbar-breadcrumb-color);
-  --ti-lowcode-block-config-tag-bg: var(--ti-lowcode-input-bg);
-  --ti-lowcode-block-config-tag-hover-color: var(--ti-lowcode-toolbar-icon-color);
-  --ti-lowcode-block-config-tag-hover-bg: transparent;
-  --ti-lowcode-block-config-tag-close-color: var(--ti-lowcode-toolbar-icon-color);
+  --ti-lowcode-block-config-tag-color: var(--te-common-text-primary);
+  --ti-lowcode-block-config-tag-bg: var(--te-common-bg-disabled);
+  --ti-lowcode-block-config-tag-hover-color: var(--te-common-text-primary);
+  --ti-lowcode-block-config-tag-hover-bg: var(--te-common-bg-disabled);
 }
diff --git a/packages/theme/dark/bridge.less b/packages/theme/dark/bridge.less
index 44dea9e3bd..79c15bd31f 100644
--- a/packages/theme/dark/bridge.less
+++ b/packages/theme/dark/bridge.less
@@ -1,11 +1,11 @@
 .plugin-panel {
   // 资源管理
-  --ti-lowcode-bridge-list-color: #adb0b8;
-  --ti-lowcode-bridge-list-bg: #3c3c3c;
-  --ti-lowcode-birdge-editor-border-color: #262626;
-  --ti-lowcode-birdge-input-label-color: #adb0b8;
+  --ti-lowcode-bridge-list-color: var(--te-common-text-primary);
+  --ti-lowcode-bridge-list-bg: var(--te-common-bg-container);
+  --ti-lowcode-birdge-editor-border-color: var(--te-common-border-default);
+  --ti-lowcode-birdge-input-label-color: var(--te-common-text-secondary);
 
   // npm工具类中代码预览的主题
-  --ti-lowcode-birdge-code-preview-color: var(--ti-lowcode-base-gray-20);
-  --ti-lowcode-birdge-code-preview-bg-color: #262626;
+  --ti-lowcode-birdge-code-preview-color: var(--te-common-text-primary);
+  --ti-lowcode-birdge-code-preview-bg-color: var(--te-common-bg-disabled);
 }
diff --git a/packages/theme/dark/canvas.less b/packages/theme/dark/canvas.less
index c05a1c6375..7e02a6934b 100644
--- a/packages/theme/dark/canvas.less
+++ b/packages/theme/dark/canvas.less
@@ -1,28 +1,27 @@
+// 这里为canvas样式变量，canvas在暗色主题和亮色主题时，很多表现都一致，因此可以不使用common变量，而是直接用base变量
 #canvas-wrap {
-  --ti-lowcode-canvas-rect-border-color: var(--ti-lowcode-base-primary-color-2);
-  --ti-lowcode-canvas-hover-line-in-bg-color: rgba(0, 255, 0, 0.1);
-  --ti-lowcode-canvas-hover-line-forbid-bg-color: var(--ti-lowcode-base-error-color);
-  --ti-lowcode-canvas-hover-line-in-forbid-bg-color: rgba(242, 48, 48, 0.3);
-  --ti-lowcode-canvas-choose-slot-border-color: var(--ti-lowcode-base-text-color-2);
-  --ti-lowcode-canvas-choose-slot-color: var(--ti-lowcode-base-text-color-2);
+  --ti-lowcode-canvas-rect-border-color: var(--te-common-border-checked);
+  --ti-lowcode-canvas-hover-line-in-bg-color: var(--te-base-green-140);
+  --ti-lowcode-canvas-hover-line-forbid-bg-color: var(--te-common-color-error);
+  --ti-lowcode-canvas-hover-line-in-forbid-bg-color: var(--te-base-red-140);
+  --ti-lowcode-canvas-choose-slot-border-color: var(--te-common-border-checked);
+  --ti-lowcode-canvas-choose-slot-color: var(--te-common-text-dark-inverse); // 暗色和亮色存在差异
   --ti-lowcode-canvas-corner-mark-left-color: var(--te-common-text-emphasize);
-  --ti-lowcode-canvas-corner-mark-bottom-right-color: var(--te-common-text-emphasize);
-  --ti-lowcode-canvas-corner-mark-bottom-right-border-color: #c2c2c2;
-  --ti-lowcode-canvas-corner-mark-bottom-right-bg-color: #f5f5f5;
-  --ti-lowcode-canvas-corner-mark-right-color: var(--ti-lowcode-base-gray-0);
-  --ti-lowcode-canvas-corner-mark-right-bg-color: var(--ti-lowcode-base-primary-color-2);
-  --ti-lowcode-canvas-select-corner-mark-left-color: var(--ti-lowcode-base-gray-0);
-  --ti-lowcode-canvas-select-corner-mark-left-bg-color: var(--ti-lowcode-base-primary-color-2);
+  --ti-lowcode-canvas-corner-mark-bottom-right-color: var(--te-common-text-dark-inverse);
+  --ti-lowcode-canvas-corner-mark-bottom-right-border-color: var(--te-common-border-hover);
+  --ti-lowcode-canvas-corner-mark-bottom-right-bg-color: var(--te-common-bg-primary-emphasize); // 暗色和亮色存在差异
+  --ti-lowcode-canvas-corner-mark-right-color: var(--te-common-text-dark-inverse);
+  --ti-lowcode-canvas-corner-mark-right-bg-color: var(--te-common-bg-primary-checked);
+  --ti-lowcode-canvas-select-corner-mark-left-color: var(--te-common-text-dark-inverse);
+  --ti-lowcode-canvas-select-corner-mark-left-bg-color: var(--te-common-bg-primary-checked);
 
   --ti-lowcode-canvas-footer-border-top-color: transparent; // canvas 底部面包屑 边框色
-  --ti-lowcode-canvas-tab-handle-bg: var(--ti-lowcode-common-component-bg); // canvas 宽度拖动手柄 背景色
-  --ti-lowcode-canvas-tab-handle-hover-bg: var(--ti-lowcode-common-primary-color); // canvas 宽度拖动手柄 hover 背景色
-  --ti-lowcode-canvas-tab-handle-color: var(
-    --ti-lowcode-common-secondary-text-color
-  ); // canvas 宽度拖动手柄 两条竖线颜色
-  --ti-lowcode-canvas-menu-bg: var(--ti-lowcode-common-component-hover-bg); // canvas 右键菜单背景
-  --ti-lowcode-canvas-menu-item-color: #adb0b8; // 右键菜单文字颜色
-  --ti-lowcode-canvas-menu-item-hover-bg-color: #5e5e5e;
-  --ti-lowcode-canvas-menu-border-color: var(--ti-lowcode-common-border-color-2);
+  --ti-lowcode-canvas-tab-handle-bg: var(--te-common-bg-container); // canvas 宽度拖动手柄 背景色
+  --ti-lowcode-canvas-tab-handle-hover-bg: var(--te-common-bg-primary-checked); // canvas 宽度拖动手柄 hover 背景色
+  --ti-lowcode-canvas-tab-handle-color: var(--te-common-border-hover); // canvas 宽度拖动手柄 两条竖线颜色
+  --ti-lowcode-canvas-menu-bg: var(--te-common-bg-container); // canvas 右键菜单背景 暗色和亮色存在差异
+  --ti-lowcode-canvas-menu-item-color: var(--te-common-text-secondary); // 右键菜单文字颜色
+  --ti-lowcode-canvas-menu-item-hover-bg-color: var(--te-common-bg-default);
+  --ti-lowcode-canvas-menu-border-color: var(--te-common-border-default);
   --ti-lowcode-canvas-menu-item-disabled-color: var(--te-common-text-weaken);
 }
diff --git a/packages/theme/dark/datasource.less b/packages/theme/dark/datasource.less
index 2ad563e6e7..7fcffa73a9 100644
--- a/packages/theme/dark/datasource.less
+++ b/packages/theme/dark/datasource.less
@@ -1,44 +1,39 @@
 :root {
-  --ti-lowcode-datasource-toolbar-icon-color: var(--ti-lowcode-common-primary-text-color);
-  --ti-lowcode-datasource-tabs-border-color: #313131;
-  --ti-lowcode-datasource-toolbar-breadcrumb-color: var(--ti-lowcode-base-gray-20);
-  --ti-lowcode-datasource-json-border-colorr: var(--ti-lowcode-common-primary-color);
-  --ti-lowcode-datasource-tree-border-color: #2ad986;
-  --ti-lowcode-datasource-common-primary-color: var(--ti-lowcode-common-primary-color);
-  --ti-lowcode-datasource-success-border-color: #2ad986;
-  --ti-lowcode-datasource-input-icon-color: #737373;
-  --ti-lowcode-datasource-dialog-demo-border-color: #5e5e5e;
-  --ti-lowcode-datasource-canvas-wrap-bg: #5e5e5e;
-  --ti-lowcode-datasource-dialog-font-color: var(--ti-lowcode-base-invalidate-color);
-  --ti-lowcode-datasource-toolbar-bg: #404040;
-  --ti-lowcode-datasource-description-error-color: #ff0000;
-  --ti-lowcode-datasource-common-text-main-color: var(--ti-lowcode-base-invalidate-color);
-  --ti-lowcode-datasource-toolbar-more-hover-color: var(--ti-lowcode-base-invalidate-color);
-  --ti-lowcode-datasource-delete-button-hover-bg: #c92c3f;
-  --ti-lowcode-datasource-common-text-color-5: var(--ti-lowcode-common-text-color-5);
-  --ti-lowcode-datasource-common-empty-color: var(--ti-lowcode-common-empty-color);
-  --ti-lowcode-datasource-toolbar-view-hover-bg: #4d4d4d;
-  --ti-lowcode-datasource-common-hover-bg-1: var(--ti-lowcode-common-hover-bg-1);
-  --ti-lowcode-datasource-common-primary-text-color: var(--ti-lowcode-base-gray-10);
-  --ti-lowcode-datasource-icon-hover-bg: #e5e5e5;
-  --ti-lowcode-datasource-tabs-bg: #2b2b2b;
-  --ti-lowcode-datasource-canvas-handle-hover-bg: var(--ti-lowcode-common-primary-color);
-  --ti-lowcode-datasource-tabs-active-bg: #2b2b2b;
-  --ti-lowcode-datasource-common-error-color: var(--ti-lowcode-common-error-color);
-  --ti-lowcode-datasource-description-minor-color: #ababab;
-  --ti-lowcode-datasource-description-warning-color: #facb4b;
-  --ti-lowcode-datasource-error-tip-color: #de504e;
-  --ti-lowcode-datasource-label-color: var(--ti-lowcode-common-secondary-text-color); // light
-  --ti-lowcode-datasource-list-hover-color: var(--ti-lowcode-common-component-hover-bg);
-  --ti-lowcode-datasource-btn-click-color: var(--ti-lowcode-common-bg-7);
-  --ti-lowcode-datasource-btn-border-color: var(--ti-lowcode-base-gray-10);
-  --ti-lowcode-datasource-tabs-bottom-border-color: var(--ti-lowcode-common-primary-color);
-  --ti-lowcode-datasource-list-bottom-border-color: var(--ti-lowcode-common-header-bg);
-  --ti-lowcode-datasource-switch-off-bg-color: var(--ti-lowcode-base-gray-50);
-  --ti-lowcode-datasource-switch-on-bg-color: var(--ti-lowcode-base-blue-6);
-  --ti-lowcode-datasource-respones-select-color-bg: var(--ti-lowcode-common-bg-4);
-  --ti-lowcode-datasource-respones-color-bg: var(--ti-lowcode-base-blue-6);
-  --ti-lowcode-datasource-respones-border-color-bg: var(--ti-lowcode-base-text-link-color-3);
-  --ti-lowcode-datasource-select-border-right-color-bg: var(--ti-lowcode-common-text-color-5);
-  --ti-lowcode-datasource-select-border-color: #2b2b2b;
+  --ti-lowcode-datasource-toolbar-icon-color: var(--te-common-text-primary);
+  --ti-lowcode-datasource-tabs-border-color: var(--te-common-border-default);
+  --ti-lowcode-datasource-toolbar-breadcrumb-color: var(--te-common-text-primary);
+  --ti-lowcode-datasource-json-border-color: var(--te-common-border-checked);
+  --ti-lowcode-datasource-tree-border-color: var(--te-common-color-success);
+  --ti-lowcode-datasource-common-border-primary-color: var(--te-common-border-checked);
+  --ti-lowcode-datasource-success-border-color: var(--te-common-color-success);
+  --ti-lowcode-datasource-input-icon-color: var(--te-common-text-secondary);
+  --ti-lowcode-datasource-dialog-demo-border-color: var(--te-common-text-secondary);
+  --ti-lowcode-datasource-canvas-wrap-bg: var(--te-common-border-default);
+  --ti-lowcode-datasource-dialog-font-color: var(--te-common-text-secondary);
+  --ti-lowcode-datasource-toolbar-bg: var(--te-common-bg-container);
+  --ti-lowcode-datasource-description-error-color: var(--te-common-color-error);
+  --ti-lowcode-datasource-common-text-main-color: var(--te-common-text-secondary);
+  --ti-lowcode-datasource-toolbar-more-hover-color: var(--te-common-text-weaken);
+  --ti-lowcode-datasource-delete-button-hover-bg: var(--te-common-color-error);
+  --ti-lowcode-datasource-common-text-color-5: var(--te-common-text-weaken);
+  --ti-lowcode-datasource-common-hover-bg-1: var(--te-common-bg-container);
+  --ti-lowcode-datasource-common-primary-text-color: var(--te-common-text-primary);
+  --ti-lowcode-datasource-icon-hover-bg: var(--te-common-bg-container);
+  --ti-lowcode-datasource-tabs-bg: var(--te-common-text-primary);
+  --ti-lowcode-datasource-canvas-handle-hover-bg: var(--te-common-bg-primary-checked);
+  --ti-lowcode-datasource-common-error-color: var(--te-common-color-error);
+  --ti-lowcode-datasource-description-minor-color: var(--te-common-text-weaken);
+  --ti-lowcode-datasource-description-warning-color: var(--te-common-color-warning);
+  --ti-lowcode-datasource-error-tip-color: var(--te-common-color-error);
+  --ti-lowcode-datasource-label-color: var(--te-common-text-secondary); // light
+  --ti-lowcode-datasource-list-hover-color: var(--te-common-bg-container);
+  --ti-lowcode-datasource-btn-click-color: var(--te-common-border-active);
+  --ti-lowcode-datasource-switch-off-bg-color: var(--te-common-bg-switch);
+  --ti-lowcode-datasource-switch-on-bg-color: var(--te-common-bg-primary-checked);
+  --ti-lowcode-datasource-modal-text-color: var(--te-common-text-primary);
+  --ti-lowcode-datasource-respones-color-bg: var(--te-common-bg-primary-checked);
+  --ti-lowcode-data-source-border-color: var(--te-common-border-default);
+  --ti-lowcode-data-source-color: var(--te-common-text-primary);
+  --ti-lowcode-data-source-box-bg: var(--te-common-bg-container);
+  --ti-lowcode-datasource-tip-color: var(--te-common-text-weaken);
 }
diff --git a/packages/theme/dark/events.less b/packages/theme/dark/events.less
index 4a43098d1f..ecc337a967 100644
--- a/packages/theme/dark/events.less
+++ b/packages/theme/dark/events.less
@@ -1,38 +1,38 @@
 .setting-advanced-add-custom-event-tip {
-  --ti-lowcode-events-add-custom-event-tips-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-event-add-custom-event-tips-highlight-color: var(--ti-lowcode-base-warn-color);
+  --ti-lowcode-events-add-custom-event-tips-color: var(--te-common-text-primary);
+  --ti-lowcode-event-add-custom-event-tips-highlight-color: var(--te-common-color-warning);
 }
 .setting-advanced-bind-event-list {
-  --ti-lowcode-events-bind-event-list-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-events-bind-event-list-item-disabled-color: var(--ti-lowcode-base-text-color-4);
-  --lowcode-events-bind-event-list-item-hover-bg-color: var(--ti-lowcode-base-bg-1);
+  --ti-lowcode-events-bind-event-list-color: var(--te-common-text-primary);
+  --ti-lowcode-events-bind-event-list-item-disabled-color: var(--te-common-text-disabled);
+  --lowcode-events-bind-event-list-item-hover-bg-color: var(--te-common-bg-container);
 }
 .bind-action-list {
-  --ti-lowcode-events-bind-action-item-border-color: var(--ti-lowcode-base-split-color-1);
-  --ti-lowcode-events-event-bind-color: var(--ti-lowcode-base-primary-color-2);
-  --ti-lowcode-events-bind-action-item-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-events-bind-action-item-hover-bg-color: var(--ti-lowcode-base-bg-1);
-  --ti-lowcode-events-bind-action-item-linked-bg-color: var(--ti-lowcode-base-success-color);
-  --ti-lowcode-events-bind-action-item-linked-color: var(--ti-lowcode-base-gray-0);
+  --ti-lowcode-events-bind-action-item-border-color: var(--te-common-border-default);
+  --ti-lowcode-events-event-bind-color: var(--te-common-text-checked);
+  --ti-lowcode-events-bind-action-item-color: var(--te-common-text-primary);
+  --ti-lowcode-events-bind-action-item-hover-bg-color: var(--te-common-bg-container);
+  --ti-lowcode-events-bind-action-item-linked-bg-color: var(--te-common-color-success);
+  --ti-lowcode-events-bind-action-item-linked-color: var(--te-common-text-dark-inverse);
   --ti-lowcode-events-empty-action-bg-color: var(--te-common-bg-container);
   --ti-lowcode-events-empty-action-color: var(--te-common-text-weaken);
   --ti-lowcode-events-custom-icon-color: var(--te-common-text-weaken);
-  --ti-lowcode-events-empty-action-tips-strong-color: var(--ti-lowcode-base-warn-color);
+  --ti-lowcode-events-empty-action-tips-strong-color: var(--te-common-color-warning);
 }
 
 .advanced-config-container {
-  --ti-lowcode-events-advanced-config-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-events-advanced-label-color: var(--ti-lowcode-base-text-color-1);
-  --ti-lowcode-events-advanced-binding-state-bg-color: var(--ti-lowcode-base-primary-color-2);
-  --ti-lowcode-events-advanced-binding-state-color: var(--ti-lowcode-base-gray-0);
+  --ti-lowcode-events-advanced-config-color: var(--te-common-text-primary);
+  --ti-lowcode-events-advanced-label-color: var(--te-common-text-secondary);
+  --ti-lowcode-events-advanced-binding-state-bg-color: var(--te-common-bg-primary-checked);
+  --ti-lowcode-events-advanced-binding-state-color: var(--te-common-text-dark-inverse);
 }
 
 .bind-event-dialog-content {
   --ti-lowcode-bind-event-dialog-color: var(--te-common-text-secondary);
-  --ti-lowcode-bind-event-dialog-content-left-border-color: var(--ti-lowcode-base-split-color-1);
-  --ti-lowcode-bind-event-dialog-content-right-monaco-border-color: var(--ti-lowcode-base-split-color-1);
-  --ti-lowcode-bind-event-dialog-content-left-list-item-active-bg-color: var(--ti-lowcode-base-gray-90);
-  --ti-lowcode-bind-event-dialog-new-action-tip-color: var(--ti-lowcode-base-text-color-1);
-  --ti-lowcode-bind-event-dialog-action-selected-icon-color: var(--ti-lowcode-base-primary-color-2);
-  --ti-lowcode-bind-event-dialog-mark-bg-color: var(--ti-lowcode-base-bg-6);
+  --ti-lowcode-bind-event-dialog-content-left-border-color: var(--te-common-border-default);
+  --ti-lowcode-bind-event-dialog-content-right-monaco-border-color: var(--te-common-border-default);
+  --ti-lowcode-bind-event-dialog-content-left-list-item-active-bg-color: var(--te-common-bg-container);
+  --ti-lowcode-bind-event-dialog-new-action-tip-color: var(--te-common-text-secondary);
+  --ti-lowcode-bind-event-dialog-action-selected-icon-color: var(--te-common-text-checked);
+  --ti-lowcode-bind-event-dialog-mark-bg-color: var(--te-common-bg-container);
 }
diff --git a/packages/theme/dark/gpt-dialog.less b/packages/theme/dark/gpt-dialog.less
index 74fce60c0f..3a3ab8ee65 100644
--- a/packages/theme/dark/gpt-dialog.less
+++ b/packages/theme/dark/gpt-dialog.less
@@ -1,51 +1,65 @@
-.bind-chatgpt {
+.robot-dialog {
   // chatGPT聊天窗问题模板文字颜色
-  --ti-lowcode-chat-model-text: #dfe1e6;
+  --ti-lowcode-chat-model-text: #191919;
   // chatGPT聊天窗问题模板文字边框颜色
-  --ti-lowcode-chat-model-text-border: #8a8e99;
-  // chatGPT聊天窗提问框图标
-  --ti-lowcode-chat-model-input-icon: #8a8e99;
+  --ti-lowcode-chat-model-text-border: #cbcbcb;
   // chatGPT聊天窗用户头像边框色
-  --ti-lowcode-chat-model-avatar-border: #8a8e99;
+  --ti-lowcode-chat-model-avatar-border: #dfe1e6;
   // chatGPT聊天窗AI聊天文字背景
-  --ti-lowcode-chat-model-ai-text-bg: #262626;
+  --ti-lowcode-chat-model-ai-text-bg: #ffffff;
   // chatGPT聊天窗AI聊天文字背景边框
-  --ti-lowcode-chat-model-ai-text-border: #262626;
+  --ti-lowcode-chat-model-ai-text-border: #dbdbdb;
   // chatGPT聊天窗AI聊天文字
-  --ti-lowcode-chat-model-ai-text: #dfe1e6;
+  --ti-lowcode-chat-model-ai-text: #191919;
   // chatGPT聊天窗AI连接失败文字背景
-  --ti-lowcode-chat-model-ai-fail-text-bg: rgba(246, 111, 106, 0.1);
+  --ti-lowcode-chat-model-ai-fail-text-bg: #feeaeb;
   // chatGPT聊天窗AI连接失败文字背景边框
-  --ti-lowcode-chat-model-ai-fail-text-border: #f66f6a;
+  --ti-lowcode-chat-model-ai-fail-text-border: #dc544f;
   // chatGPT聊天窗AI连接失败文字
-  --ti-lowcode-chat-model-ai-fail-text: #dfe1e6;
+  --ti-lowcode-chat-model-ai-fail-text: #191919;
   // chatGPT聊天窗用户聊天文字背景
-  --ti-lowcode-chat-model-user-text-bg: #4f77ff;
+  --ti-lowcode-chat-model-user-text-bg: rgba(20, 118, 255, 0.12);
   // chatGPT聊天窗用户聊天文字边框
-  --ti-lowcode-chat-model-user-text-border: #4f77ff;
+  --ti-lowcode-chat-model-user-text-border: #dbdbdb;
   // chatGPT聊天窗用户聊天文字
-  --ti-lowcode-chat-model-user-text: #ffffff;
+  --ti-lowcode-chat-model-user-text: #191919;
   // chatGPT聊天窗标题文字
-  --ti-lowcode-chat-model-title: #dfe1e6;
+  --ti-lowcode-chat-model-title: #333333;
   // chatGPT聊天窗基础图标
   --ti-lowcode-chat-model-common-icon: #8a887b;
   // chatGPT聊天窗输入框背景
-  --ti-lowcode-chat-model-input-bg: #1e1e1e;
-  // chatGPT聊天窗发送按钮背景
-  --ti-lowcode-chat-model-button-bg: #2f2f2f;
+  --ti-lowcode-chat-model-input-bg: #eeeeee;
+  // chatGPT聊天窗输入框背景
+  --ti-lowcode-chat-model-input-border: rgb(129, 168, 255);
+  // chatGPT聊天窗发送按钮背景渐变色
+  --ti-lowcode-chat-model-button-bg-1: rgba(96, 140, 255, 0.8);
+  --ti-lowcode-chat-model-button-bg-2: rgba(169, 117, 255, 0.8);
+  --ti-lowcode-chat-model-button-bg-3: rgba(177, 136, 255, 0.8);
   // chatGPT聊天窗发送按钮边框
-  --ti-lowcode-chat-model-button-border: #8a8e99;
+  --ti-lowcode-chat-model-button-border: #1476ff;
   // chatGPT聊天窗发送按钮文字
-  --ti-lowcode-chat-model-button-text: #dfe1e6;
+  --ti-lowcode-chat-model-button-text: #ffffff;
+  // chatGPT背景渐变色
+  --ti-lowcode-chat-bg-top-color: rgb(227, 236, 255);
+  --ti-lowcode-chat-bg-mid-color: rgb(236, 245, 255);
+  --ti-lowcode-chat-bg-bottom-color: rgb(255, 255, 255);
+  // chatGPT聊天窗背景色
+  --ti-lowcode-chat-model-bg: #ffffff;
+  // chatGPT聊天窗小助手文字颜色
+  --ti-lowcode-chat-model-helper-text: #808080;
+  // chatGPT聊天窗问题提示字体颜色
+  --ti-lowcode-chat-model-tips-text: #595959;
+  // chatGPT聊天窗问题提示背景颜色
+  --ti-lowcode-chat-model-tips-bg: #f5f5f5;
 
   // chatGPT加载
-  --ti-lowcode-chat-loading-svg-color: var(--ti-lowcode-common-primary-color);
-  --ti-lowcode-chat-loading-text-color: #fff;
+  --ti-lowcode-chat-loading-svg-color: var(--te-common-icon-link);
+  --ti-lowcode-chat-loading-text-color: #595959;
 }
 
 .chat-model-popover {
-  --ti-lowcode-chat-model-popover-bg: #262626;
-  --ti-lowcode-chat-model-popover-color: #adb0b8;
-  --ti-lowcode-chat-model-popover-active-bg: #2f2f2f;
-  --ti-lowcode-chat-model-popover-active-color: #adb0b8;
+  --ti-lowcode-chat-model-popover-bg: #fff;
+  --ti-lowcode-chat-model-popover-color: var(--te-common-text-primary);
+  --ti-lowcode-chat-model-popover-active-bg: #fff;
+  --ti-lowcode-chat-model-popover-active-color: var(--te-common-text-checked);
 }
diff --git a/packages/theme/dark/help.less b/packages/theme/dark/help.less
index e3457c2ec7..8737b4aa68 100644
--- a/packages/theme/dark/help.less
+++ b/packages/theme/dark/help.less
@@ -1,15 +1,16 @@
 .shepherd-modal-overlay-container,
 .tiny-guide {
-  --ti-lowcode-help-guide-content-text-color: var(--ti-lowcode-base-text-color-4);
-  --ti-lowcode-help-guide-title-text-color: var(--ti-lowcode-base-text-color-4);
-  --ti-lowcode-help-guide-progress-style-text-color: var(--ti-lowcode-base-text-color-4);
-  --ti-lowcode-help-guide-mask-bg-color: var(--ti-lowcode-base-bg-3);
+  --ti-lowcode-help-guide-content-text-color: var(--te-common-text-secondary);
+  --ti-lowcode-help-guide-title-text-color: var(--te-common-text-primary);
+  --ti-lowcode-help-guide-progress-style-text-color: var(--te-common-text-primary);
+  --ti-lowcode-help-guide-mask-bg-color: var(--te-common-bg-default);
 }
 .help-plugin-box {
-  --ti-lowcode-help-box-bg-color: #3c3c3c;
-  --ti-lowcode-help-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.5);
-  --ti-lowcode-help-box-title-text-color: #ffffff;
-  --ti-lowcode-help-box-item-text-color: #adb0b8;
-  --ti-lowcode-help-box-question-border-top: rgba(255, 255, 255, 0.1);
-  --ti-lowcode-help-box-question-item-text-color: #4f77ff;
+  --ti-lowcode-help-box-bg-color: var(--te-common-bg-default);
+  --ti-lowcode-help-box-shadow: 0px 2px 6px 0px var(--te-base-box-shadow-rgba-2);
+  --ti-lowcode-help-box-title-text-color: var(--te-common-text-primary);
+  --ti-lowcode-help-box-item-text-color: var(--te-common-text-secondary);
+  --ti-lowcode-help-box-question-border-top: var(--te-common-border-divider);
+  --ti-lowcode-help-box-question-item-text-color: var(--te-common-text-emphasize);
+  --ti-lowcode-help-box-item-hover-bg-color: var(--te-common-bg-container);
 }
diff --git a/packages/theme/dark/i18n.less b/packages/theme/dark/i18n.less
index c6a7258aec..b8322b00d9 100644
--- a/packages/theme/dark/i18n.less
+++ b/packages/theme/dark/i18n.less
@@ -1,8 +1,16 @@
 :root {
   // 国际化表格操作图标颜色
-  --ti-lowcode-i18n-operate-svg-color: var(--ti-lowcode-base-text-color);
+  --ti-lowcode-i18n-operate-svg-color: var(--te-common-text-primary);
   // 国际化表格加载中字体颜色
-  --ti-lowcode-i18n-loading-text-color: #d9d9d9;
+  --ti-lowcode-i18n-loading-text-color: var(--te-common-text-weaken);
   // 国际化表格加载中图标颜色
-  --ti-lowcode-i18n-loading-svg-color: #d9d9d9;
+  --ti-lowcode-i18n-loading-svg-color: var(--te-common-text-primary);
+  // 国际化边框颜色
+  --ti-lowcode-i18n-border-color: var(--te-common-border-default);
+  // 国际化按钮字体颜色
+  --ti-lowcode-i18n-button-color: var(--te-common-text-primary);
+  // 国际化按钮图标颜色
+  --ti-lowcode-i18n-icon-color: var(--te-common-text-weaken);
+  // 国际化按钮字体边框颜色
+  --ti-lowcode-i18n-button-border-color: var(--te-common-border-default);
 }
diff --git a/packages/theme/dark/index.less b/packages/theme/dark/index.less
index a4f8c143d9..8fdcaa2bee 100644
--- a/packages/theme/dark/index.less
+++ b/packages/theme/dark/index.less
@@ -1,5 +1,4 @@
 // 主题配置优先于公共配置
-@import './base.less';
 @import './variable.less';
 @import './block.less';
 @import './life-cycles.less';
diff --git a/packages/theme/dark/life-cycles.less b/packages/theme/dark/life-cycles.less
index 69a2bce160..8377abf2d4 100644
--- a/packages/theme/dark/life-cycles.less
+++ b/packages/theme/dark/life-cycles.less
@@ -1,7 +1,7 @@
 :root {
   // 生命周期
-  --ti-lowcode-life-cycle-alert-color: #fff;
-  --ti-lowcode-life-cycle-item-hover-bg: #202020;
-  --ti-lowcode-life-cycle-item-disable-color: #9d9d9d;
-  --ti-lowcode-life-cycle-editor-border: var(--ti-lowcode-base-default-button-border-color);
+  --ti-lowcode-life-cycle-alert-color: var(--te-common-text-disabled);
+  --ti-lowcode-life-cycle-item-hover-bg: var(--te-common-bg-container);
+  --ti-lowcode-life-cycle-item-disable-color: var(--te-common-text-disabled);
+  --ti-lowcode-life-cycle-editor-border: var(--te-common-border-default);
 }
diff --git a/packages/theme/dark/materials.less b/packages/theme/dark/materials.less
index 971e385f55..f15dfbda13 100644
--- a/packages/theme/dark/materials.less
+++ b/packages/theme/dark/materials.less
@@ -2,29 +2,29 @@
   // 带边框的图标按钮边框颜色
   --ti-lowcode-materials-border-icon-border-color: transparent;
   // 带边框的图标按钮图标颜色
-  --ti-lowcode-materials-border-icon-svg-color: #d9d9d9;
+  --ti-lowcode-materials-border-icon-svg-color: var(--te-common-text-primary);
   // 带边框的图标按钮悬浮边框颜色
   --ti-lowcode-materials-border-icon-border-color-hover: transparent;
   // 带边框的图标按钮背景颜色
-  --ti-lowcode-materials-border-icon-bg-color: #202020;
+  --ti-lowcode-materials-border-icon-bg-color: var(--te-common-bg-default);
   // 区块分组下拉选项下边框颜色
-  --ti-lowcode-materials-block-group-item-border-color: var(--ti-lowcode-common-primary-color);
+  --ti-lowcode-materials-block-group-item-border-color: var(--te-common-border-checked); // 暗色和亮色不同，需注意
   // 添加区块筛选模块字体颜色
   --ti-lowcode-materials-block-filter-text-color: var(--ti-lowcode-common-secondary-text-color);
   // 添加区块筛选模块选中字体颜色
-  --ti-lowcode-materials-block-filter-selected-text-color: var(--ti-lowcode-common-primary-color);
+  --ti-lowcode-materials-block-filter-selected-text-color: var(--te-common-text-checked); // 暗色和亮色不同，需注意
   // 添加区块穿梭框面板背景颜色
-  --ti-lowcode-materials-block-transfer-bg-color: var(--ti-lowcode-common-component-bg);
+  --ti-lowcode-materials-block-transfer-bg-color: var(--te-common-bg-default);
   // 添加区块穿梭框面板头部字体颜色
-  --ti-lowcode-materials-block-transfer-header-text-color: #d9d9d9;
+  --ti-lowcode-materials-block-transfer-header-text-color: var(--te-common-text-primary);
   // 添加区块穿梭框面板头部背景颜色
-  --ti-lowcode-materials-block-transfer-header-bg-color: var(--ti-lowcode-common-header-bg);
+  --ti-lowcode-materials-block-transfer-header-bg-color: var(--te-common-bg-default); // 暗色和亮色不同，需注意
   // 区块分组添加区块筛选项 hover 颜色
-  --ti-lowcode-materials-block-filter-hover-color: var(--ti-lowcode-common-text-color-2);
+  --ti-lowcode-materials-block-filter-hover-color: var(--te-common-text-secondary); // 暗色和亮色不同，需注意
   // 组件列表  组件名称颜色
-  --ti-lowcode-materials-component-list-color: var(--ti-lowcode-toolbar-title-color);
+  --ti-lowcode-materials-component-list-color: var(--te-common-text-secondary);
   // 删除区块分组气泡弹窗背景色
-  --ti-lowcode-materials-block-group-delete-popover-bg-color: var(--ti-lowcode-common-component-hover-bg);
+  --ti-lowcode-materials-block-group-delete-popover-bg-color: var(--te-common-bg-popover);
   // 删除区块分组气泡弹窗标题色
-  --ti-lowcode-materials-block-group-delete-popover-title-color: var(--ti-lowcode-common-secondary-text-color);
+  --ti-lowcode-materials-block-group-delete-popover-title-color: var(--te-common-text-primary);
 }
diff --git a/packages/theme/dark/metaComponent.less b/packages/theme/dark/metaComponent.less
index b185a2e417..a96b421c32 100644
--- a/packages/theme/dark/metaComponent.less
+++ b/packages/theme/dark/metaComponent.less
@@ -1,65 +1,59 @@
 :root {
   // MetaListItem
-  --ti-lowcode-meta-list-item-bg-color: var(--ti-lowcode-base-bg-5);
-  --ti-lowcode-meta-list-item-border-color: transparent;
+  --ti-lowcode-meta-list-item-bg-color: var(--te-common-bg-default);
+  --ti-lowcode-meta-list-item-border-color: var(--te-common-border-default);
 
-  --ti-lowcode-meta-list-top-color: var(--ti-lowcode-base-text-color-1);
+  --ti-lowcode-meta-list-top-color: var(--te-common-text-secondary);
   // MetaJsSlot
-  --lowcode-meta-js-slot-color: var(--ti-lowcode-base-text-color-1);
+  --lowcode-meta-js-slot-color: var(--te-common-text-secondary);
 
   // MetaCodeEditor
-  --ti-lowcode-meta-codeEditor-color: #d9d9d9;
+  --ti-lowcode-meta-codeEditor-color: var(--te-common-text-primary);
+  --ti-lowcode-meta-codeEditor-hover-color: var(--te-common-text-primary);
   --ti-lowcode-meta-codeEditor-border-color: var(--te-common-border-default);
-  --ti-lowcode-meta-codeEditor-hover-color: #fff;
-  --ti-lowcode-meta-codeEditor-border-hover-color: #6b6b6b;
+  --ti-lowcode-meta-codeEditor-border-hover-color: var(--te-common-border-active);
+  --ti-lowcode-meta-codeEditor-icon-color: var(--te-common-text-weaken);
 }
 
 // config-item label popover tips
 .prop-label-tips-container {
-  --ti-lowcode-meta-config-item-label-tips-desc-color: var(--ti-lowcode-base-text-color-1);
-  --ti-lowcode-meta-config-item-label-tips-title-color: #fff;
+  --ti-lowcode-meta-config-item-label-tips-desc-color: var(--te-common-text-secondary);
+  --ti-lowcode-meta-config-item-label-tips-title-color: var(--te-common-text-primary);
 }
 
 // configItem
 .properties-item {
-  --ti-lowcode-meta-config-item-error-tips-color: var(--ti-lowcode-base-error-color);
-  --ti-lowcode-meta-config-item-label-color: var(--ti-lowcode-base-text-color-1);
-  --ti-lowcode-meta-config-item-bind-color: var(--ti-lowcode-base-gray-0);
-  --ti-lowcode-meta-config-item-bind-bg: var(--ti-lowcode-common-primary-color);
-  --ti-lowcode-meta-config-item-bind-bg: var(--ti-lowcode-common-primary-color);
-  --ti-lowcode-meta-config-item-active-bg: #fff;
-  --ti-lowcode-meta-config-item-link-color: var(--ti-lowcode-description-color);
+  --ti-lowcode-meta-config-item-error-tips-color: var(--te-common-color-error);
+  --ti-lowcode-meta-config-item-label-color: var(--te-common-text-secondary);
+  --ti-lowcode-meta-config-item-bind-color: var(--te-common-text-dark-inverse);
+  --ti-lowcode-meta-config-item-bind-bg: var(--te-common-bg-primary-checked);
+  --ti-lowcode-meta-config-item-active-bg: var(--te-common-bg-container);
+  --ti-lowcode-meta-config-item-link-color: var(--te-common-text-checked);
 }
 
 // MetaBindVariable
 .meta-bind-variable-dialog-box {
-  --ti-lowcode-meta-bind-variable-icon-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-meta-bind-variable-icon-hover-bg-color: var(--ti-lowcode-base-bg-1);
-  --ti-lowcode-meta-bind-variable-content-left-title-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-meta-bind-variable-content-right-title-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-meta-bind-variable-list-wrap-border-color: var(--ti-lowcode-base-default-button-border-color);
-  --ti-lowcode-meta-bind-variable-content-left-list-border-right-color: var(
-    --ti-lowcode-base-default-button-border-color
-  );
-  --ti-lowcode-meta-bind-variable-list-item-hover-bg-color: var(--ti-lowcode-base-bg-1);
-  --ti-lowcode-meta-bind-variable-item-selected-bg-color: var(--ti-lowcode-base-bg-1);
-  --ti-lowcode-meta-bind-variable-item-hover-bg-color: var(--ti-lowcode-base-bg-1);
-  --ti-lowcode-meta-bind-variable-bottom-border-color: var(--ti-lowcode-base-default-button-border-color);
-  --ti-lowcode-meta-bind-variable-top-border-color: var(--ti-lowcode-base-default-button-border-color);
-  --ti-lowcode-meta-bind-variable-bottom-color: var(--ti-lowcode-base-text-color-1);
-  --ti-lowcode-meta-bind-variable-content-left-list-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-meta-bind-variable-item-text-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-meta-bind-variable-header-alert-color: var(--ti-lowcode-base-gray-0);
-  --ti-lowcode-meta-bind-variable-top-color: var(--ti-lowcode-base-text-color);
+  --ti-lowcode-meta-bind-variable-icon-color: var(--te-common-text-primary);
+  --ti-lowcode-meta-bind-variable-icon-hover-bg-color: var(--te-common-text-secondary);
+  --ti-lowcode-meta-bind-variable-content-left-title-color: var(--te-common-text-primary);
+  --ti-lowcode-meta-bind-variable-content-right-title-color: var(--te-common-text-primary);
+  --ti-lowcode-meta-bind-variable-list-wrap-border-color: var(--te-common-border-default);
+  --ti-lowcode-meta-bind-variable-content-left-list-border-right-color: var(--te-common-border-default);
+  --ti-lowcode-meta-bind-variable-list-item-hover-bg-color: var(--te-common-text-secondary);
+  --ti-lowcode-meta-bind-variable-item-selected-bg-color: var(--te-common-text-secondary);
+  --ti-lowcode-meta-bind-variable-item-hover-bg-color: var(--te-common-text-secondary);
+  --ti-lowcode-meta-bind-variable-bottom-border-color: var(--te-common-border-default);
+  --ti-lowcode-meta-bind-variable-top-border-color: var(--te-common-border-default);
+  --ti-lowcode-meta-bind-variable-bottom-color: var(--te-common-text-secondary);
+  --ti-lowcode-meta-bind-variable-content-left-list-color: var(--te-common-text-primary);
+  --ti-lowcode-meta-bind-variable-item-text-color: var(--te-common-text-primary);
+  --ti-lowcode-meta-bind-variable-header-alert-color: var(--te-common-text-primary);
+  --ti-lowcode-meta-bind-variable-top-color: var(--te-common-text-primary);
 }
 
 // MetaCodeEditor
 .meta-code-editor-dialog-box {
-  --ti-lowcode-meta-code-editor-header-tips-container-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-meta-code-editor-header-collapse-icon-color: var(--ti-lowcode-base-gray-50);
-  --ti-lowcode-meta-code-editor-header-collapse-icon-hover-color: var(--ti-lowcode-base-gray-40);
-  --ti-lowcode-meta-code-editor-header-tips-demo-bg-color: var(--ti-lowcode-base-gray-5);
-  --ti-lowcode-meta-code-editor-header-tips-demo-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-meta-code-editor-source-code-content-border-color: transparent;
-  --ti-lowcode-meta-code-editor-err-msg-color: var(--ti-lowcode-base-error-color);
+  --ti-lowcode-meta-code-editor-header-tips-container-color: var(--te-common-text-primary);
+  --ti-lowcode-meta-code-editor-header-collapse-icon-color: var(--te-common-icon-secondary);
+  --ti-lowcode-meta-code-editor-err-msg-color: var(--te-common-color-error);
 }
diff --git a/packages/theme/dark/pageManage.less b/packages/theme/dark/pageManage.less
index 4311afab22..36bcf06fa3 100644
--- a/packages/theme/dark/pageManage.less
+++ b/packages/theme/dark/pageManage.less
@@ -1,29 +1,12 @@
 :root {
-  --ti-lowcode-page-manage-title-background-text-color: var(--ti-lowcode-common-secondary-text-color);
-  --ti-lowcode-page-manage-tip-background-text-color: var(--ti-lowcode-common-bg-2);
-  --ti-lowcode-page-manage-tip-text-color: var(--ti-lowcode-common-bg-2);
-  --ti-lowcode-page-manage-tip-border-color: var(--ti-lowcode-base-gray-70);
-  --ti-lowcode-page-manage-icon-text-color: var(--ti-lowcode-common-text-color-2);
-  --ti-lowcode-page-manage-tree-text-background-color: var(--ti-lowcode-common-bg-8);
-  --ti-lowcode-page-manage-tree-node-background-color: var(--ti-lowcode-common-component-bg);
-  --ti-lowcode-page-manage-tip-color: var(--ti-lowcode-base-gray-10);
-  --ti-lowcode-page-manage-input-background-color: var(--ti-lowcode-common-bg-9);
-  --ti-lowcode-page-manage-input-border-color: var(--ti-lowcode-common-text-color-4);
-  --ti-lowcode-page-manage-tips-icon-color: var(--ti-lowcode-common-primary-color);
-  --ti-lowcode-page-manage-content-tips-color: var(--ti-lowcode-common-text-color-5);
-  --ti-lowcode-page-manage-search-border-color: var(--ti-lowcode-common-border-color-2);
-  --ti-lowcode-page-manage-tree-color: var(--ti-lowcode-common-secondary-text-color);
-  --ti-lowcode-page-manage-page-tree-background-active-color: var(--ti-lowcode-common-component-hover-bg);
-  --ti-lowcode-page-manage-page-tree-background-hover-color: var(--ti-lowcode-common-primary-hover-color);
-  --ti-lowcode-page-manage-svg-hover-color: var(--ti-lowcode-common-primary-color);
-  --ti-lowcode-page-manage-text-color: var(--ti-lowcode-common-secondary-text-color);
-  --ti-lowcode-page-manage-input-head-text-color: var(--ti-lowcode-common-secondary-text-color);
-  --ti-lowcode-page-manage-btn-text-color: #999;
-  --ti-lowcode-page-manage-btn-text-color-2: var(--ti-lowcode-common-bg-7);
-  --ti-lowcode-page-manage-error-color: var(--ti-lowcode-common-error-color);
-  --ti-lowcode-page-manage-input-group-color: var(--ti-lowcode-common-bg-4);
-  --ti-lowcode-page-manage-input-group-border-color: var(--ti-lowcode-common-bg-4);
-  --ti-lowcode-page-manage-input-group-border-right-color: var(--ti-lowcode-common-component-hover-bg);
-  --ti-lowcode-page-manage-input-output-text-color: var(--ti-lowcode-common-text-color-3);
-  --ti-lowcode-page-manage-input-output-text-bg-color: var(--ti-lowcode-base-blue-6);
+  --ti-lowcode-page-manage-title-background-text-color: var(--te-common-text-primary);
+  --ti-lowcode-page-manage-tip-text-color: var(--te-common-text-weaken);
+  --ti-lowcode-page-manage-icon-text-color: var(--te-common-text-secondary);
+  --ti-lowcode-page-manage-tree-text-background-color: var(--te-common-bg-default);
+  --ti-lowcode-page-manage-tree-node-background-color: var(--te-common-bg-default);
+  --ti-lowcode-page-manage-text-color: var(--te-common-text-secondary);
+  --ti-lowcode-page-manage-input-head-text-color: var(--te-common-text-primary);
+  --ti-lowcode-page-manage-btn-text-color: var(--te-common-text-weaken);
+  --ti-lowcode-page-manage-error-color: var(--te-common-color-error);
+  --ti-lowcode-page-manage-input-group-color: var(--te-common-bg-default);
 }
diff --git a/packages/theme/dark/plugin-js.less b/packages/theme/dark/plugin-js.less
index c07a1a2c30..9f21c8a0e9 100644
--- a/packages/theme/dark/plugin-js.less
+++ b/packages/theme/dark/plugin-js.less
@@ -1,7 +1,6 @@
 // 页面JS 插件面板
 .plugin-page-js-container {
-  --ti-lowcode-plugin-js-bg: var(--ti-lowcode-common-component-bg);
-  --ti-lowcode-plugin-js-head-border-bottom-color: var(--ti-lowcode-common-bg-4);
-  --ti-lowcode-code-edit-content-border-color: var(--ti-lowcode-base-gray-60);
-  --ti-lowcode-plugin-js-help-link-color: var(--ti-lowcode-base-primary-color-2);
+  --ti-lowcode-plugin-js-bg: var(--te-common-bg-default);
+  --ti-lowcode-plugin-js-head-border-bottom-color: var(--te-common-border-divider);
+  --ti-lowcode-plugin-js-help-link-color: var(--te-common-text-link);
 }
diff --git a/packages/theme/dark/setting-style.less b/packages/theme/dark/setting-style.less
index 552eee7e3c..7672f02a1c 100644
--- a/packages/theme/dark/setting-style.less
+++ b/packages/theme/dark/setting-style.less
@@ -1,8 +1,7 @@
 :root {
-  --ti-lowcode-setting-style-input-bg: var(--ti-lowcode-base-blue-6);
-  --ti-lowcode-setting-style-font-color: var(--ti-lowcode-common-secondary-text-color); // light
-  --ti-lowcode-setting-style-input-font-color: var(--ti-lowcode-base-gray-0);
-  --ti-lowcode-setting-style-btn-font-color: var(--ti-lowcode-base-gray-40);
-  --ti-lowcode-setting-style-btn-border-color: var(--ti-lowcode-base-blue-6);
-  --ti-lowcode-setting-style-title-color: var(--ti-lowcode-base-text-color);
+  --ti-lowcode-setting-style-input-bg: var(--te-common-bg-primary-emphasize);
+  --ti-lowcode-setting-style-font-color: var(--te-common-text-dark-inverse);
+  --ti-lowcode-setting-style-input-font-color: var(--te-common-text-dark-inverse);
+  --ti-lowcode-setting-style-btn-font-color: var(--te-common-text-primary);
+  --ti-lowcode-setting-style-btn-border-color: var(--te-common-border-default);
 }
diff --git a/packages/theme/dark/settings.less b/packages/theme/dark/settings.less
index 4cacf81b44..fb30142320 100644
--- a/packages/theme/dark/settings.less
+++ b/packages/theme/dark/settings.less
@@ -1,47 +1,38 @@
 // 右侧属性面板 css 变量
 #tiny-right-panel {
-  --ti-lowcode-setting-panel-bg-color: #2f2f2f;
-  --ti-lowcode-setting-panel-tabs-item-title-color: var(--ti-lowcode-base-text-color-1);
-  --ti-lowcode-setting-panel-tabs-item-title-active-color: #000;
-  --ti-lowcode-setting-panel-tabs-item-title-hover-color: #fff;
+  --ti-lowcode-setting-panel-bg-color: var(--te-common-bg-default);
+  --ti-lowcode-setting-panel-tabs-item-title-color: var(--te-common-text-secondary);
+  --ti-lowcode-setting-panel-tabs-item-title-active-color: var(--te-common-text-primary);
+  --ti-lowcode-setting-panel-tabs-item-title-hover-color: var(--te-common-text-primary);
   // 插件设置面板左侧边框
-  --ti-lowcode-plugin-setting-panel-border-left-color: var(--ti-lowcode-common-component-bg);
+  --ti-lowcode-plugin-setting-panel-border-left-color: var(--te-common-border-divider);
 }
 
 // 属性面板-属性-新建区块属性
 .block-new-attr-popover {
-  --ti-lowcode-attr-popover-menu-item-hover-bg-color: var(--ti-lowcode-base-bg-1);
-  --ti-lowcode-attr-popover-menu-item-link-item-bg-color: var(--ti-lowcode-base-primary-color-2);
-  --ti-lowcode-attr-popover-menu-item-link-item-color: var(--ti-lowcode-base-gray-0);
-  --ti-lowcode-attr-popover-menu-item-color: var(--ti-lowcode-base-text-color);
-}
-
-// 属性面板-属性-区块关联属性 icon
-.block-link-field {
-  --ti-lowcode-block-link-field-link-icon-color: var(--ti-lowcode-base-gray-0);
-  --ti-lowcode-block-link-field-link-icon-bg-color: var(--ti-lowcode-base-success-color);
+  --ti-lowcode-attr-popover-menu-item-hover-bg-color: var(--te-common-text-secondary);
+  --ti-lowcode-attr-popover-menu-item-color: var(--te-common-text-primary);
 }
 
 .className-container {
-  --ti-lowcode-className-selector-container-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-className-selector-container-error-border-color: var(--ti-lowcode-base-error-color);
-  --ti-lowcode-className-selector-container-error-bg-color: rgba(242, 48, 48, 0.1);
-  --ti-lowcode-className-selector-error-tips-color: var(--ti-lowcode-base-error-color);
-  --ti-lowcode-className-selector-container-border-color: var(--ti-lowcode-base-gray-40);
-  --ti-lowcode-className-selector-container-hover-border-color: var(--ti-lowcode-base-primary-color-2);
-  --ti-lowcode-className-selector-container-empty-tips-color: var(--ti-lowcode-base-text-color-1);
-  --ti-lowcode-className-selector-container-label-bg-color: rgba(20, 118, 255, 0.1);
-  --ti-lowcode-className-selector-container-label-color: var(--ti-lowcode-base-blue-6);
-  --ti-lowcode-className-selector-container-option-btn-color: var(--ti-lowcode-base-blue-6);
-  --ti-lowcode-className-selector-dropdown-list-bg-color: #202020;
-  --ti-lowcode-className-selector-dropdown-list-item-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-className-selector-dropdown-list-item-active-bg-color: var(--ti-lowcode-base-bg-2);
-  --ti-lowcode-className-selector-title-color: var(--ti-lowcode-base-text-color);
+  --ti-lowcode-className-selector-container-color: var(--te-common-text-primary);
+  --ti-lowcode-className-selector-container-error-border-color: var(--te-common-color-error);
+  --ti-lowcode-className-selector-container-error-bg-color: var(--te-common-bg-error);
+  --ti-lowcode-className-selector-error-tips-color: var(--te-common-color-error);
+  --ti-lowcode-className-selector-container-border-color: var(--te-common-border-default);
+  --ti-lowcode-className-selector-container-hover-border-color: var(--te-common-border-hover);
+  --ti-lowcode-className-selector-container-empty-tips-color: var(--te-common-text-secondary);
+  --ti-lowcode-className-selector-container-label-bg-color: var(--te-base-blue-140);
+  --ti-lowcode-className-selector-container-label-color: var(--te-common-text-checked);
+  --ti-lowcode-className-selector-container-option-btn-color: var(--te-common-text-checked);
+  --ti-lowcode-className-selector-dropdown-list-bg-color: var(--te-common-bg-default);
+  --ti-lowcode-className-selector-dropdown-list-item-color: var(--te-common-text-primary);
+  --ti-lowcode-className-selector-dropdown-list-item-active-bg-color: var(--te-common-bg-container);
   --ti-lowcode-className-selector-dropdown-list-tips-color: var(--te-common-text-weaken);
 }
 
 :root {
-  --ti-lowcode-className-selector-del-popover-bg-color: var(--ti-lowcode-base-bg-5);
-  --ti-lowcode-className-selector-del-popover-title-color: var(--ti-lowcode-base-text-color);
+  --ti-lowcode-className-selector-del-popover-bg-color: var(--te-common-bg-default);
+  --ti-lowcode-className-selector-del-popover-title-color: var(--te-common-text-primary);
   --ti-lowcode-property-active-color: var(--te-common-bg-primary-checked);
 }
diff --git a/packages/theme/dark/toolbar.less b/packages/theme/dark/toolbar.less
index a85dffb018..5254b71f6b 100644
--- a/packages/theme/dark/toolbar.less
+++ b/packages/theme/dark/toolbar.less
@@ -1,16 +1,15 @@
 .tiny-engine-toolbar {
   // 头部工具栏
   --ti-lowcode-toolbar-border-bottom-color: transparent;
-  --ti-lowcode-toolbar-media-bg: var(--ti-lowcode-common-bg-6);
+  --ti-lowcode-toolbar-media-bg: var(--te-common-bg-default);
   --ti-lowcode-toolbar-media-setting-border-color: var(--ti-lowcode-common-border-color-2);
-  --ti-lowcode-toolbar-title-color: #e6e6e6;
+  --ti-lowcode-toolbar-title-color: var(--te-common-text-primary);
   --ti-lowcode-toolbar-sub-title-color: var(--ti-lowcode-common-secondary-text-color);
-  --ti-lowcode-toolbar-hover-color: var(--ti-lowcode-common-component-hover-bg);
+  --ti-lowcode-toolbar-hover-color: var(--te-common-bg-container);
   --ti-lowcode-toolbar-view-active-bg: #2f2f2f;
   --ti-lowcode-toolbar-left-icon-bg-hover: rgb(240, 240, 240);
-  --ti-lowcode-toolbar-popover-bg: var(--ti-lowcode-base-gray-0);
   --ti-lowcode-toolbar-active-color: #808080;
-  --ti-lowcode-toolbar-user-img-border-color: var(--ti-lowcode-base-gray-20);
-  --ti-lowcode-toolbar-dot-color: var(--ti-lowcode-common-danger-color);
+  --ti-lowcode-toolbar-user-img-border-color: var(--te-common-border-divider);
+  --ti-lowcode-toolbar-dot-color: var(--te-common-color-error);
   --ti-lowcode-toolbar-right-line: #ebebeb;
 }
diff --git a/packages/theme/dark/tree.less b/packages/theme/dark/tree.less
index b2d7556b02..b0dbaad0b8 100644
--- a/packages/theme/dark/tree.less
+++ b/packages/theme/dark/tree.less
@@ -1,7 +1,7 @@
 .outlinebox {
-  --ti-lowcode-tree-color: var(--ti-lowcode-common-secondary-text-color);
-  --ti-lowcode-tree-icon-color: rgba(138, 142, 153, 0.99);
-  --ti-lowcode-tree-icon-hover-color: var(--ti-lowcode-common-secondary-text-color);
-  --ti-lowcode-tree-selected-color: var(--ti-lowcode-common-text-color-3);
-  --ti-lowcode-tree-selected-bg: var(--ti-lowcode-common-primary-color);
+  --ti-lowcode-tree-color: var(--te-common-text-primary);
+  --ti-lowcode-tree-icon-color: var(--te-common-icon-secondary);
+  --ti-lowcode-tree-selected-color: var(--te-common-text-primary);
+  --ti-lowcode-tree-selected-bg: var(--te-common-bg-primary-checked);
+  --ti-lowcode-tree-border-color: transparent; // 亮色主题特有
 }
diff --git a/packages/theme/dark/tutorial.less b/packages/theme/dark/tutorial.less
index f872e57f78..4e963d5d35 100644
--- a/packages/theme/dark/tutorial.less
+++ b/packages/theme/dark/tutorial.less
@@ -1,5 +1,5 @@
 #tiny-engine-left-panel {
-  --ti-lowcode-tutorial-primary-text-color: var(--ti-lowcode-base-text-color-1);
-  --ti-lowcode-tutorial-primary-bg-color: var(--ti-lowcode-base-bg-2);
+  --ti-lowcode-tutorial-primary-text-color: var(--te-common-text-secondary);
+  --ti-lowcode-tutorial-primary-bg-color: var(--te-common-bg-default);
   --ti-lowcode-tutorial-hover-bg-color: var(--te-common-bg-container);
 }
diff --git a/packages/theme/dark/variable.less b/packages/theme/dark/variable.less
index d7b61cb61d..6d6a4e73a5 100644
--- a/packages/theme/dark/variable.less
+++ b/packages/theme/dark/variable.less
@@ -4,46 +4,21 @@
   --base-min-width: 1280px;
 
   // ------ 主要的公共主题色，前缀为 --ti-lowcode-common -------
-  --ti-lowcode-common-primary-color: #4f77ff;
-  --ti-lowcode-common-primary-hover-color: #3961eb;
-  --ti-lowcode-common-primary-color-1: #cad6ff;
-  --ti-lowcode-common-component-bg: #2f2f2f;
-  --ti-lowcode-common-component-hover-bg: #3c3c3c;
-  --ti-lowcode-common-layout-bg: #191818;
-  --ti-lowcode-common-layout-hover-bg: #191919;
-  --ti-lowcode-common-header-bg: #202020;
-  --ti-lowcode-common-bg-1: #404040;
-  --ti-lowcode-common-bg-2: #4d4d4d;
-  --ti-lowcode-common-bg-3: #2b2b2b;
-  --ti-lowcode-common-bg-4: #262626;
-  --ti-lowcode-common-bg-5: #eee;
-  --ti-lowcode-common-bg-6: #414141;
-  --ti-lowcode-common-bg-7: #8a8e99;
-  --ti-lowcode-common-bg-8: #222;
-  --ti-lowcode-common-bg-9: #292929;
-  --ti-lowcode-common-hover-bg-1: rgba(255, 255, 255, 0.1);
   --ti-lowcode-common-transparent-color: transparent;
-  --ti-lowcode-common-primary-text-color: #fff;
   --ti-lowcode-common-secondary-text-color: #adb0b8;
-  --ti-lowcode-common-text-title-color: #252b3a;
   --ti-lowcode-common-text-color-1: #6a6a6a;
   --ti-lowcode-common-text-color-2: #d9d9d9;
   --ti-lowcode-common-text-color-3: #fff;
   --ti-lowcode-common-text-color-4: #50d4ab;
-  --ti-lowcode-common-text-color-5: #8a8e99;
   --ti-lowcode-common-text-color-6: #575d6c;
   --ti-lowcode-common-third-text-color: #ababab;
+  --ti-lowcode-common-empty-text-color: var(--te-common-text-weaken);
   --ti-lowcode-common-danger-color: #c7000b;
   --ti-lowcode-common-border-color-1: #212121;
   --ti-lowcode-common-border-color-2: #313131;
   --ti-lowcode-common-border-color-3: #606165;
   --ti-lowcode-common-border-color-4: #232323;
-  --ti-lowcode-common-error-color: var(--ti-lowcode-base-error-color);
-
-  --ti-lowcode-info-color: #7693f5;
-  --ti-lowcode-warning-color: #fa9841;
-  --ti-lowcode-warning-color-1: #fac20a;
-  --ti-lowcode-common-empty-color: #9a9a9a;
+  --te-common-color-error: var(--te-common-color-error);
 
   // tiny vue 的 css 变量，覆盖掉就好
 
@@ -53,69 +28,60 @@
   }
 
   .tiny-grid {
-    --ti-grid-light-color: var(--ti-lowcode-common-component-bg);
-    --ti-grid-text-color: var(--ti-lowcode-common-text-color-5);
+    --ti-grid-light-color: var(--te-common-bg-default);
+    --ti-grid-text-color: var(--te-common-text-weaken);
   }
 
   --ti-lowcode-trigger-color: #adb0b8;
   --ti-lowcode-trigger-hover-color: #8a8e99;
-  --ti-lowcode-input-error-color: var(--ti-lowcode-common-error-color);
+  --ti-lowcode-input-error-color: var(--te-common-color-error);
   --ti-lowcode-input-error-bg: rgba(246, 111, 106, 0.1);
 
   // ------ 公共组件的主题色，前缀为 --ti-lowcode-component-组件名 ------
-  // tinysearch  背景色
-  --ti-lowcode-component-search-bg: var(--ti-lowcode-input-bg);
   // tinysearch  边框色
   --ti-lowcode-component-input-border-color: transparent;
   // svgButton
-  --ti-lowcode-component-svg-button-color: var(--ti-lowcode-common-text-color-2);
-  --ti-lowcode-component-svg-button-hover-color: var(--ti-lowcode-common-primary-color);
+  --ti-lowcode-component-svg-button-color: var(--te-common-text-primary);
+  --ti-lowcode-component-svg-button-hover-color: var(--te-common-text-primary);
   --ti-lowcode-component-svg-button-hover-bg-color: var(--te-common-bg-prompt);
-  --ti-lowcode-component-svg-button-active-color: var(--ti-lowcode-common-primary-color);
+  --ti-lowcode-component-svg-button-active-color: var(--te-common-text-primary);
   --ti-lowcode-component-svg-button-active-bg-color: var(--te-common-bg-prompt);
 
-  --ti-lowcode-tabs-active-border-bottom-color: var(--ti-lowcode-common-primary-color);
-  --ti-lowcode-tabs-active-color: var(--ti-lowcode-common-primary-color);
+  --ti-lowcode-tabs-active-border-bottom-color: var(--te-common-border-checked);
 
-  --ti-lowcode-form-error-tips-color: var(--ti-lowcode-common-error-color);
-  // 关闭按钮
-  --ti-lowcode-component-close-icon-text-color: var(--ti-lowcode-common-third-text-color); // 关闭按钮默认颜色
-  // 关闭按钮 hover 颜色
-  --ti-lowcode-component-close-icon-text-hover-color: var(--ti-lowcode-common-primary-text-color);
+  --ti-lowcode-form-error-tips-color: var(--te-common-color-error);
 
   // 设置面板
-  --ti-lowcode-component-setting-panel-label-color: var(--ti-lowcode-common-secondary-text-color);
-  --ti-lowcode-component-setting-panel-icon-color: var(--ti-lowcode-toolbar-breadcrumb-color);
-  --ti-lowcode-component-setting-panel-label-tips-bg: #f2f5fc;
+  --ti-lowcode-component-setting-panel-label-color: var(--te-common-text-secondary);
+  --ti-lowcode-component-setting-panel-icon-color: var(--te-common-text-secondary);
 
   // 插件面板
-  --ti-lowcode-plugin-panel-title-color: var(--ti-lowcode-dialog-font-color); // 插件面板标题色
-  --ti-lowcode-plugin-panel-bg: var(--ti-lowcode-common-component-bg); // 插件面板背景色
+  --ti-lowcode-plugin-panel-title-color: var(--te-common-text-primary); // 插件面板标题色
+  --ti-lowcode-plugin-panel-bg: var(--te-common-bg-default); // 插件面板背景色
   --ti-lowcode-plugin-panel-border-right-color: var(--ti-lowcode-canvas-border-color); // 插件面板右侧边框色
   --ti-lowcode-plugin-panel-header-border-bottom-color: #262626; // 插件面板头部区域底部边框线颜色
   --ti-lowcode-plugin-panel-title-font-weight: 400; // 插件面板标题加粗效果
 
   // 插件设置面板
-  --ti-lowcode-plugin-setting-panel-bg: var(--ti-lowcode-common-component-bg); // 插件设置面板背景色
+  --ti-lowcode-plugin-setting-panel-bg: var(--te-common-bg-default); // 插件设置面板背景色
 
   // ------ 各个模块的主题色，前缀为 --ti-lowcode-模块名 -------
 
-  --ti-lowcode-design-plugin-color: #8a8e99;
-  --ti-lowcode-design-toolbar-icon-color: #8a8e99;
-  --ti-lowcode-nav-panel-border-left-color: transparent;
+  --ti-lowcode-design-plugin-color: var(--te-common-text-weaken);
+  --ti-lowcode-design-plugin-icon-color: var(--te-common-icon-secondary);
 
   // 物料-组件列表
   --ti-lowcode-material-component-list-border-color: var(--ti-lowcode-common-border-color-4);
-  --ti-lowcode-material-component-list-hover-bg: var(--ti-lowcode-common-component-hover-bg);
+  --ti-lowcode-material-component-list-hover-bg: var(--te-common-bg-container);
 
   // 页面管理
   --ti-lowcode-page-tree-color: var(--ti-lowcode-common-secondary-text-color);
-  --ti-lowcode-page-tree-hover-color: var(--ti-lowcode-common-primary-text-color);
+  --ti-lowcode-page-tree-hover-color: var(--te-common-text-primary);
 
   // 画布 canvas
-  --ti-lowcode-canvas-iframe-scrollbar-track-color: var(--ti-lowcode-canvas-wrap-bg); // iframe 内部滚动条 track 颜色
+  --ti-lowcode-canvas-iframe-scrollbar-track-color: var(--te-common-bg-container); // iframe 内部滚动条 track 颜色
   // iframe 内部滚动条 滑块 颜色
-  --ti-lowcode-canvas-iframe-scrollbar-thumb-color: var(--ti-lowcode-common-component-bg);
+  --ti-lowcode-canvas-iframe-scrollbar-thumb-color: var(--te-common-bg-default);
 
   // 数据源
   --ti-lowcode-datasource-list-color: var(--ti-lowcode-toolbar-more-hover-color);
@@ -123,30 +89,22 @@
   // 状态管理
   --ti-lowcode-data-list-color: var(--ti-lowcode-toolbar-icon-color);
   // 状态管理面板头部的底部边框色
-  --ti-lowcode-data-header-border-bottom-color: var(--ti-lowcode-common-bg-4);
-  // 状态管理示例背景色
-  --ti-lowcode-data-example-bg-color: var(--ti-lowcode-common-primary-text-color);
-  // 状态管理示例文字色
-  --ti-lowcode-data-example-color: var(--ti-lowcode-common-text-title-color);
+  --ti-lowcode-data-header-border-bottom-color: var(--te-common-border-divider);
   // 添加高级属性文字颜色
   --ti-lowcode-data-advanced-text-color: #dfe1e6;
   // 添加高级属性 hover 文字颜色
   --ti-lowcode-data-advanced-text-hover-color: #8a8e99;
 
-  // 状态管理按激活背景色
-  --ti-lowcode-data-radio-group-active-bg: var(--ti-lowcode-common-primary-color);
   // 状态管理按默认背景色
-  --ti-lowcode-data-radio-group-bg: var(--ti-lowcode-common-header-bg);
+  --ti-lowcode-data-radio-group-bg: var(--te-common-bg-default);
 
   // 教程
-  --ti-lowcode-tutorial-list-item-color: var(--ti-lowcode-toolbar-breadcrumb-color);
+  --ti-lowcode-tutorial-list-item-color: var(--te-common-text-secondary);
 
   // 头部工具栏背景色
   --ti-lowcode-toolbar-bg: #404040;
   // 头部工具栏选中背景色
   --ti-lowcode-toolbar-active-bg: #212121;
-  // 头部工具栏边框色
-  --ti-lowcode-toolbar-border-color: #333;
   // 头部工具栏icon颜色 && 右侧属性面板tabs hover字体颜色 && switch 选中hover圆背景色
   --ti-lowcode-toolbar-icon-color: #fff;
   // 头部工具栏icon颜色
@@ -157,34 +115,24 @@
   --ti-lowcode-toolbar-more-color: rgba(217, 217, 217, 0.4);
   // 头部工具栏更多more图标hover颜色
   --ti-lowcode-toolbar-more-hover-color: rgba(217, 217, 217, 0.8);
-  // 头部工具栏面包屑字体颜色 && 右侧属性面板tabs字体颜色 && 右侧属性面板 collapse 头部字体颜色 && switch 选中圆背景色
-  --ti-lowcode-toolbar-breadcrumb-color: #d9d9d9;
-  // 头部工具栏画布大小文本hover背景色 && 头部弹框背景色 && context-menu 背景色 && 大纲树节点hover背景色 && 日期组件背景色
-  --ti-lowcode-toolbar-view-hover-bg: #4d4d4d;
   // 头部工具栏i18n国际化字体颜色
   --ti-lowcode-toolbar-i18n-color: rgba(255, 255, 255, 0.4);
   // 应用发布弹窗图标颜色
-  --ti-lowcode-toolbar-publish-icon-color: var(--ti-lowcode-common-primary-text-color);
+  --ti-lowcode-toolbar-publish-icon-color: var(--te-common-text-primary);
   // 头部左侧logo颜色
   --ti-lowcode-logo-color: #8a8e99;
   // 头部左侧logo颜色
   --ti-lowcode-logo-active-color: rgba(255, 255, 255, 0.5);
   // 中间画布边框色
   --ti-lowcode-canvas-border-color: #1a1a1a;
-  // 右侧属性面板tab页签背景色 && 表单校验错误输入框背景色
-  --ti-lowcode-tabs-bg: #2b2b2b;
   // 右侧属性面板tab页签边框色 && 弹框边框色 && context-menu 边框色
-  --ti-lowcode-tabs-border-color: #313131;
+  --ti-lowcode-tabs-border-color: var(--te-common-border-default);
   // 右侧属性面板tab页签激活状态背景色 && 弹框title背景颜色
   --ti-lowcode-tabs-active-bg: #404040;
-  // 右侧属性面板折叠面板展开内容边框色
-  --ti-lowcode-collapse-active-border-color: #333;
-  // 中间画布外框容器背景色 && 弹框底部tip背景色 && select 多选下拉选项hover背景色
-  --ti-lowcode-canvas-wrap-bg: #5e5e5e;
   // 中间画布拖拽宽度按钮背景色
   --ti-lowcode-canvas-handle-bg: #2b2b2b;
   // 中间画布拖拽宽度按钮背景色
-  --ti-lowcode-canvas-handle-hover-bg: var(--ti-lowcode-common-primary-color);
+  --ti-lowcode-canvas-handle-hover-bg: var(--te-common-bg-primary-checked);
   // 中间画布底部面包屑背景色 && popover 背景颜色
   --ti-lowcode-breadcrumb-bg: #ebebeb;
   // 中间画布底部面包屑字体颜色 && popover 字体颜色
@@ -206,25 +154,8 @@
 
   // collapse 折叠面板激活后字体颜色
   --ti-lowcode-collapse-active-color: #ebebeb;
-  // input 框背景色
-  --ti-lowcode-input-bg: #262626;
-  // switch 圆点 hover 背景色
-  --ti-lowcode-switch-after-hover-bg: #6b6b6b;
-  // switch 圆点 checked 背景色
-  --ti-lowcode-switch-after-checked-bg: #d9d9d9;
-  // -----下拉框相关主题配置-----
-  // 下拉框聚焦时边框颜色
-  --ti-lowcode-select-focus-border-color: var(--ti-lowcode-common-primary-color);
-  // 下拉框选中标签字体颜色
-  --ti-lowcode-select-tags-text-color: #d9d9d9;
-  // 下拉框选中标签背景颜色
-  --ti-lowcode-select-tags-bg-color: #5e5e5e;
-  // 下拉框suffix图标悬浮颜色
-  --ti-lowcode-select-suffix-icon-color-hover: #fff;
-  // 组件icon颜色
-  --ti-lowcode-component-icon-color: #d9d9d9;
   // 左侧插件激活背景色
-  --ti-lowcode-left-panel-active-bg: #2f2f2f;
+  --ti-lowcode-left-panel-active-bg: var(--te-base-blue-140);
   // 左侧插件激活边框色
   --ti-lowcode-left-panel-active-border-color: #212121;
   // 左侧按钮边框色
@@ -233,15 +164,9 @@
   // radio 按钮组激活背景色
   --ti-lowcode-radio-button-active-bg: #2b2b2b;
   // grid 布局设置按钮字体颜色
-  --ti-lowcode-grid-edit-color: #d9d9d9;
+  --ti-lowcode-grid-edit-color: var(--te-common-text-primary);
   // grid 布局设置按钮背景色
-  --ti-lowcode-grid-edit-bg: #5e5e5e;
-  // tooltip字体颜色
-  --ti-lowcode-tooltip-text-color: #999;
-  // tooltip背景颜色
-  --ti-lowcode-tooltip-bg-color: #ebebeb;
-  // tooltip错误提示背景颜色
-  --ti-lowcode-tooltip-error-bg-color: #c92c3f;
+  --ti-lowcode-grid-edit-bg: var(--te-common-bg-default);
 
   // Fit 字体颜色
   --ti-lowcode-fit-label-color: #ebebeb;
@@ -254,8 +179,8 @@
   // more icon 选中背景色
   --ti-lowcode-more-icon-selected-bg: #2e2e2e;
   // main menu 背景色
-  --ti-lowcode-main-menu-bg: var(--ti-lowcode-common-component-bg);
-  --ti-lowcode-main-menu-item-hover-bg: var(--ti-lowcode-common-component-hover-bg);
+  --ti-lowcode-main-menu-bg: var(--te-common-bg-default);
+  --ti-lowcode-main-menu-item-hover-bg: var(--te-common-bg-container);
   --ti-lowcode-main-menu-item-hover-color: var(--ti-lowcode-toolbar-icon-color);
   // spacing svg 图标上下颜色
   --ti-lowcode-spacing-tb-color: #4d4d4d;
@@ -265,8 +190,9 @@
   --ti-lowcode-spacing-lr-color: #555;
   // spacing svg 图标左右hover颜色
   --ti-lowcode-spacing-lr-hover-color: #626262;
+  --ti-lowcode-spacing-margin-color: var(--te-base-gray-60);
+  --ti-lowcode-spacing-padding-color: var(--te-base-gray-55);
   // spacing svg 图标边框颜色
-  --ti-lowcode-spacing-border-color: #333;
   // position direction 字体颜色
   --ti-lowcode-position-direction-color: #ebebeb;
   // position direction 弹框显示时字体背景色
@@ -292,115 +218,39 @@
   --ti-lowcode-breadcrumb-hover-bg: #fff;
   // 弹框中tip提示边框颜色
   --ti-lowcode-dialog-tip-border-color: #d9d9d9;
-  // 弹框字体颜色 && 左侧面板 title 字体颜色
-  --ti-lowcode-dialog-font-color: #ebebeb;
   // 输入框icon图标颜色
   --ti-lowcode-input-icon-color: #737373;
   // 弹框字体颜色 && 图标颜色 && 输入框 suffix 字体颜色
-  --ti-lowcode-text-color: #6a6a6a;
+  --ti-lowcode-text-color: var(--te-common-text-dark-inverse);
   // 右侧optionitem的边框色
-  --ti-lowcode-optionitem-border-color: #2b2b2b;
+  --ti-lowcode-optionitem-border-color: var(--te-common-border-default);
   // 右侧optionitem的背景色
-  --ti-lowcode-optionitem-background-color: #363636;
-  //tootip里的input框字体颜色
-  --ti-lowcode-tootip-input-color: #fff;
-  //tootip里的input背景颜色
-  --ti-lowcode-tootip-input-background-color: #363636;
+  --ti-lowcode-optionitem-background-color: var(--te-common-bg-default);
   //tootip里的input框边框颜色
-  --ti-lowcode-tootip-input-border-color: #2b2b2b;
-  //tootip里的input框箭头颜色
-  --ti-lowcode-tootip-arrow-border-color: #404040;
-  // dialogBox弹框示例框边框色
-  --ti-lowcode-dialog-demo-border-color: #5e5e5e;
+  --ti-lowcode-tootip-input-border-color: var(--te-common-border-default);
   // 关闭 icon 图标hover背景色 && 输入框后置文本hover背景色
-  --ti-lowcode-icon-hover-bg: rgba(255, 255, 255, 0.1);
-  // 说明提示框警告颜色
-  --ti-lowcode-description-warning-color: #facb4b;
-  // 说明提示框错误颜色
-  --ti-lowcode-description-error-color: #ff0000;
-  // switch checked状态边框色
-  --ti-lowcode-switch-checked-border-color: var(--ti-lowcode-common-primary-color);
-  // 文本链接颜色
-  --ti-lowcode-text-link-color: #6bb0ff;
+  --ti-lowcode-icon-hover-bg: rgba(255, 255, 255, 0.1); // 需要确认
   // 大纲树node节点选中背景色
-  --ti-lowcode-node-current-bg: var(--ti-lowcode-common-primary-color);
-  // 大纲树node节点不可拖拽背景色 && 表单校验错误边框色
-  --ti-lowcode-node-nodrag-bg: #ea384c;
-  // 成功状态按钮边框色
-  --ti-lowcode-success-border-color: #2ad986;
-  // 错误提示颜色
-  --ti-lowcode-error-tip-color: #de504e;
+  --ti-lowcode-node-current-bg: var(--te-common-bg-primary-checked);
 
-  // 画布拖拽元素背景色
-  --ti-lowcode-drag-ghost-bg: #888;
-  // 画布拖拽位置线背景色
-  --ti-lowcode-ghost-line-bg: #ffb100;
   // 描述颜色
-  --ti-lowcode-description-color: var(--ti-lowcode-common-text-color-4);
-  // 更多折叠面板头部hover背景色
-  --ti-lowcode-more-collapse-header-hover-color: #5a5a5a;
+  --ti-lowcode-description-color: var(--te-base-green-40);
   // 绑定时icon图标颜色
-  --ti-lowcode-icon-bind-color: #006cff;
-  // 创建字体颜色
-  --ti-lowcode-create-color: #575d6c;
-  // 删除按钮hover背景色 && 表单校验错误背景色
-  --ti-lowcode-delete-button-hover-bg: #c92c3f;
-  // input框focus 获焦时边框颜色
-  --ti-lowcode-input-focus-border-color: var(--ti-lowcode-common-primary-color);
-  // 次要描述字体颜色 && 面包屑label 字体颜色
-  --ti-lowcode-description-minor-color: #ababab;
+  --ti-lowcode-icon-bind-color: var(--te-common-text-checked);
   // 样式设置 label 字体颜色
   --ti-lowcode-style-setting-label-color: var(--te-common-bg-primary-checked);
   // 样式设置 label 背景颜色
-  --ti-lowcode-style-setting-label-bg: rgba(76, 152, 241, 0.15);
-  // 多人协作item项hover背景色
-  --ti-lowcode-user-item-hover-bg: rgba(94, 94, 94, 0.8);
-  // 多人协作人员头像背景色
-  --ti-lowcode-user-header-bg: #919191;
-  // 工具栏提示框字体颜色
-  --ti-lowcode-toolbar-popover-color: #363636;
-  // 工具栏 media 提示框字体颜色
-  --ti-lowcode-media-popover-color: #adb0b8;
+  --ti-lowcode-style-setting-label-bg: var(--te-base-blue-140);
   // 工具栏 media 提示框标题字体颜色
-  --ti-lowcode-media-popover-title-color: #fff;
+  --ti-lowcode-media-popover-title-color: var(--te-common-text-primary);
   // 工具栏icon禁用颜色
-  --ti-lowcode-disabled-color: #757575;
-  // 状态管理详情收缩摩纳哥编辑器icon颜色
-  --ti-lowcode-state-management-screen-icon-color: #fff;
-  // 状态管理搜索无结果显示颜色
-  --ti-lowcode-state-management-query-color: #fff;
+  --ti-lowcode-disabled-color: var(--te-common-text-disabled);
   // 状态管理代码编辑器边框颜色
   --ti-lowcode-state-management-monaco-editor-border-color: transparent;
 
-  // Popover提示框
-  --ti-lowcode-popover-color: var(--ti-lowcode-breadcrumb-color);
-  --ti-lowcode-popover-bg-color: #191919;
-  // 自定义类名lowcode弹框背景色
-  --ti-lowcode-custom-popover-bg-color: #404040;
-  // 自定义类名lowcode弹框字体颜色
-  --ti-lowcode-custom-popover-text-color: #d9d9d9;
-  // 自定义类名lowcode弹框边框颜色
-  --ti-lowcode-custom-popover-border-color: #313131;
-
-  // 滚动条thumb颜色
-  --ti-lowcode-scrollbar-thumb-background-color: rgba(121, 121, 121, 0.4);
-  // 可点击交互的文字颜色
-  --ti-lowcode-common-interaction-text-color: #5e7ce0;
   // 数字输入框组件下拉列表文字颜色
-  --ti-lowcode-numeric-unit-text-color: var(--ti-lowcode-text-color);
-
-  //左侧插件栏hover背景色
-  --ti-plugins-hover-bg-color: #ffffff;
-  //左侧插件栏hover边框色
-  --ti-plugins-hover-border-color: #9e9e9e;
-  // 表格行间背景色
-  --ti-lowcode-new-table-row-sepline-background: #1f1f1f;
+  --ti-lowcode-numeric-unit-text-color: var(--te-common-text-primary);
 
   // 查看指引视频
-  --ti-lowcode-block-video-tip-color: var(--ti-lowcode-base-primary-color-2);
-
-  // 属性设置、事件设置等列表的背景色
-  --ti-lowcode-meta-list-item-border-color: #2b2b2b;
-  // 属性设置、事件设置等列表的背景色
-  --ti-lowcode-meta-list-item-bg-color: #363636;
+  --ti-lowcode-block-video-tip-color: var(--te-common-text-link);
 }
diff --git a/packages/theme/light/base.less b/packages/theme/light/base.less
deleted file mode 100644
index 9b40a5f0d0..0000000000
--- a/packages/theme/light/base.less
+++ /dev/null
@@ -1,275 +0,0 @@
-:root {
-  // 灰阶
-  --ti-lowcode-base-gray-0: #fff;
-  --ti-lowcode-base-gray-5: #fafafa;
-  --ti-lowcode-base-gray-10: #f5f5f5;
-  --ti-lowcode-base-gray-20: #f0f0f0;
-  --ti-lowcode-base-gray-30: #dbdbdb;
-  --ti-lowcode-base-gray-40: #c2c2c2;
-  --ti-lowcode-base-gray-50: #808080;
-  --ti-lowcode-base-gray-60: #595959;
-  --ti-lowcode-base-gray-70: #333;
-  --ti-lowcode-base-gray-80: #262626;
-  --ti-lowcode-base-gray-90: #191919;
-  --ti-lowcode-base-gray-100: #000;
-  --ti-lowcode-base-gray-101: #e6e6e6;
-
-  // expand-red
-  --ti-lowcode-base-red-1: #ffeae8;
-  --ti-lowcode-base-red-2: #fccdca;
-  --ti-lowcode-base-red-3: #faa9a5;
-  --ti-lowcode-base-red-4: #fa8682;
-  --ti-lowcode-base-red-5: #f76360;
-  --ti-lowcode-base-red-6: #f23030;
-  --ti-lowcode-base-red-7: #cc272a;
-  --ti-lowcode-base-red-8: #a3171c;
-  --ti-lowcode-base-red-9: #78080e;
-  --ti-lowcode-base-red-10: #4d0005;
-  --ti-lowcode-base-red-11: #a64242;
-  --ti-lowcode-base-red-12: #d4827f;
-  --ti-lowcode-base-red-13: #f2c5c2;
-
-  // expand-orange
-  --ti-lowcode-base-orange-1: #fff5e8;
-  --ti-lowcode-base-orange-2: #fcdfb8;
-  --ti-lowcode-base-orange-3: #fcc98b;
-  --ti-lowcode-base-orange-4: #fcb25c;
-  --ti-lowcode-base-orange-5: #ff9a2e;
-  --ti-lowcode-base-orange-6: #ff8800;
-  --ti-lowcode-base-orange-7: #d96900;
-  --ti-lowcode-base-orange-8: #a64d00;
-  --ti-lowcode-base-orange-9: #733400;
-  --ti-lowcode-base-orange-10: #4d2201;
-  --ti-lowcode-base-orange-11: #9e6d3f;
-  --ti-lowcode-base-orange-12: #d6a981;
-  --ti-lowcode-base-orange-13: #f2d8c2;
-
-  // expand-yellow
-  --ti-lowcode-base-yellow-1: #fcf9eb;
-  --ti-lowcode-base-yellow-2: #fcf0c2;
-  --ti-lowcode-base-yellow-3: #fae396;
-  --ti-lowcode-base-yellow-4: #f7d56d;
-  --ti-lowcode-base-yellow-5: #f7c845;
-  --ti-lowcode-base-yellow-6: #fcbe1e;
-  --ti-lowcode-base-yellow-7: #d99b0b;
-  --ti-lowcode-base-yellow-8: #a67711;
-  --ti-lowcode-base-yellow-9: #7a5202;
-  --ti-lowcode-base-yellow-10: #4d3200;
-  --ti-lowcode-base-yellow-11: #9e7e3f;
-  --ti-lowcode-base-yellow-12: #d4b57f;
-  --ti-lowcode-base-yellow-13: #e6d3b8;
-
-  // expand-lemon
-  --ti-lowcode-base-lemon-1: #fcfae8;
-  --ti-lowcode-base-lemon-2: #fcf6c2;
-  --ti-lowcode-base-lemon-3: #fcf092;
-  --ti-lowcode-base-lemon-4: #fae969;
-  --ti-lowcode-base-lemon-5: #f7e04a;
-  --ti-lowcode-base-lemon-6: #f7d916;
-  --ti-lowcode-base-lemon-7: #d9bb16;
-  --ti-lowcode-base-lemon-8: #a38708;
-  --ti-lowcode-base-lemon-9: #756002;
-  --ti-lowcode-base-lemon-10: #4d3d00;
-  --ti-lowcode-base-lemon-11: #9e8f46;
-  --ti-lowcode-base-lemon-12: #d6c581;
-  --ti-lowcode-base-lemon-13: #eddfb2;
-
-  // expand-lime
-  --ti-lowcode-base-lime-1: #f8fae3;
-  --ti-lowcode-base-lime-2: #eff5bf;
-  --ti-lowcode-base-lime-3: #e2ed8e;
-  --ti-lowcode-base-lime-4: #d5e667;
-  --ti-lowcode-base-lime-5: #c6de3e;
-  --ti-lowcode-base-lime-6: #b2d119;
-  --ti-lowcode-base-lime-7: #95b312;
-  --ti-lowcode-base-lime-8: #728c0a;
-  --ti-lowcode-base-lime-9: #576e05;
-  --ti-lowcode-base-lime-10: #3b4d00;
-  --ti-lowcode-base-lime-11: #808c46;
-  --ti-lowcode-base-lime-12: #c1cc7a;
-  --ti-lowcode-base-lime-13: #3b4d00;
-
-  // expand-kelly
-  --ti-lowcode-base-kelly-1: #f2fae6;
-  --ti-lowcode-base-kelly-2: #daf2bb;
-  --ti-lowcode-base-kelly-3: #b9e683;
-  --ti-lowcode-base-kelly-4: #9edb58;
-  --ti-lowcode-base-kelly-5: #7dcc29;
-  --ti-lowcode-base-kelly-6: #5cb300;
-  --ti-lowcode-base-kelly-7: #4b9902;
-  --ti-lowcode-base-kelly-8: #3c8001;
-  --ti-lowcode-base-kelly-9: #2e6600;
-  --ti-lowcode-base-kelly-10: #1f4700;
-  --ti-lowcode-base-kelly-11: #628c38;
-  --ti-lowcode-base-kelly-12: #a2c777;
-  --ti-lowcode-base-kelly-13: #d2e6bb;
-
-  // expand-green
-  --ti-lowcode-base-green-1: #e8fced;
-  --ti-lowcode-base-green-2: #bbf2c8;
-  --ti-lowcode-base-green-3: #82e09a;
-  --ti-lowcode-base-green-4: #51d675;
-  --ti-lowcode-base-green-5: #25c251;
-  --ti-lowcode-base-green-6: #00b336;
-  --ti-lowcode-base-green-7: #029931;
-  --ti-lowcode-base-green-8: #01802b;
-  --ti-lowcode-base-green-9: #006624;
-  --ti-lowcode-base-green-10: #004a1b;
-  --ti-lowcode-base-green-11: #3d995c;
-  --ti-lowcode-base-green-12: #77c78f;
-  --ti-lowcode-base-green-13: #b8e6c7;
-
-  // expand-mint
-  --ti-lowcode-base-mint-1: #e8fcfa;
-  --ti-lowcode-base-mint-2: #bff5ef;
-  --ti-lowcode-base-mint-3: #8be8e0;
-  --ti-lowcode-base-mint-4: #5dded5;
-  --ti-lowcode-base-mint-5: #38d6ce;
-  --ti-lowcode-base-mint-6: #10c7c1;
-  --ti-lowcode-base-mint-7: #0aaba8;
-  --ti-lowcode-base-mint-8: #048c8c;
-  --ti-lowcode-base-mint-9: #046466;
-  --ti-lowcode-base-mint-10: #004547;
-  --ti-lowcode-base-mint-11: #3d9996;
-  --ti-lowcode-base-mint-12: #77c7c2;
-  --ti-lowcode-base-mint-13: #b8e6e1;
-
-  // expand-sky
-  --ti-lowcode-base-sky-1: #e8f8fc;
-  --ti-lowcode-base-sky-2: #c4f2ff;
-  --ti-lowcode-base-sky-3: #9de4fa;
-  --ti-lowcode-base-sky-4: #79d8f7;
-  --ti-lowcode-base-sky-5: #58cbf5;
-  --ti-lowcode-base-sky-6: #33bcf2;
-  --ti-lowcode-base-sky-7: #1f9acf;
-  --ti-lowcode-base-sky-8: #1075a3;
-  --ti-lowcode-base-sky-9: #065278;
-  --ti-lowcode-base-sky-10: #00304a;
-  --ti-lowcode-base-sky-11: #3d7f99;
-  --ti-lowcode-base-sky-12: #7ab8cc;
-  --ti-lowcode-base-sky-13: #b6e5f2;
-
-  // expand-blue
-  --ti-lowcode-base-blue-1: #e3effa;
-  --ti-lowcode-base-blue-2: #c4e1ff;
-  --ti-lowcode-base-blue-3: #99c9ff;
-  --ti-lowcode-base-blue-4: #68abfc;
-  --ti-lowcode-base-blue-5: #4191fa;
-  --ti-lowcode-base-blue-6: #1476ff;
-  --ti-lowcode-base-blue-7: #0f5ed4;
-  --ti-lowcode-base-blue-8: #0845a6;
-  --ti-lowcode-base-blue-9: #022e7a;
-  --ti-lowcode-base-blue-10: #001a4a;
-  --ti-lowcode-base-blue-11: #3d6899;
-  --ti-lowcode-base-blue-12: #7fa6d4;
-  --ti-lowcode-base-blue-13: #b6d4f2;
-
-  // expand-indigo
-  --ti-lowcode-base-indigo-1: #eee8ff;
-  --ti-lowcode-base-indigo-2: #ddd7fa;
-  --ti-lowcode-base-indigo-3: #b19cf7;
-  --ti-lowcode-base-indigo-4: #957af5;
-  --ti-lowcode-base-indigo-5: #6e51e0;
-  --ti-lowcode-base-indigo-6: #512fd6;
-  --ti-lowcode-base-indigo-7: #391eb0;
-  --ti-lowcode-base-indigo-8: #27108f;
-  --ti-lowcode-base-indigo-9: #19056e;
-  --ti-lowcode-base-indigo-10: #0e004d;
-  --ti-lowcode-base-indigo-11: #584d99;
-  --ti-lowcode-base-indigo-12: #847acc;
-  --ti-lowcode-base-indigo-13: #bbb8e6;
-
-  // expand-purple
-  --ti-lowcode-base-purple-1: #f5e8ff;
-  --ti-lowcode-base-purple-2: #e4c5fc;
-  --ti-lowcode-base-purple-3: #d0a1f7;
-  --ti-lowcode-base-purple-4: #b878f0;
-  --ti-lowcode-base-purple-5: #9f53e6;
-  --ti-lowcode-base-purple-6: #832fd6;
-  --ti-lowcode-base-purple-7: #641eb0;
-  --ti-lowcode-base-purple-8: #4c1091;
-  --ti-lowcode-base-purple-9: #370673;
-  --ti-lowcode-base-purple-10: #20004d;
-  --ti-lowcode-base-purple-11: #683d99;
-  --ti-lowcode-base-purple-12: #a07acc;
-  --ti-lowcode-base-purple-13: #cbb8e6;
-
-  // expand-pink
-  --ti-lowcode-base-pink-1: #fce6fb;
-  --ti-lowcode-base-pink-2: #fcc2f9;
-  --ti-lowcode-base-pink-3: #f794f2;
-  --ti-lowcode-base-pink-4: #eb67e6;
-  --ti-lowcode-base-pink-5: #e841e5;
-  --ti-lowcode-base-pink-6: #d91ad9;
-  --ti-lowcode-base-pink-7: #b50fb8;
-  --ti-lowcode-base-pink-8: #8f0a94;
-  --ti-lowcode-base-pink-9: #6b0370;
-  --ti-lowcode-base-pink-10: #47004d;
-  --ti-lowcode-base-pink-11: #993d99;
-  --ti-lowcode-base-pink-12: #c97acc;
-  --ti-lowcode-base-pink-13: #e2b8e6;
-
-  // expand-rose
-  --ti-lowcode-base-rose-1: #fce6ef;
-  --ti-lowcode-base-rose-2: #ffc4de;
-  --ti-lowcode-base-rose-3: #fa9bc9;
-  --ti-lowcode-base-rose-4: #f56cac;
-  --ti-lowcode-base-rose-5: #eb4696;
-  --ti-lowcode-base-rose-6: #e61c81;
-  --ti-lowcode-base-rose-7: #b50e65;
-  --ti-lowcode-base-rose-8: #940a54;
-  --ti-lowcode-base-rose-9: #70033f;
-  --ti-lowcode-base-rose-10: #4d002b;
-  --ti-lowcode-base-rose-11: #993d6e;
-  --ti-lowcode-base-rose-12: #cc7aa6;
-  --ti-lowcode-base-rose-13: #e6b8d2;
-
-  // 公司品牌色
-  --ti-lowcode-base-brand-color: #c7000b;
-
-  // 主色
-  --ti-lowcode-base-primary-color-1: #191919;
-  --ti-lowcode-base-primary-color-2: #1476ff;
-
-  // 背景色
-  --ti-lowcode-base-bg: #f5f5f5;
-  --ti-lowcode-base-bg-1: rgba(0, 0, 0, 0.05);
-  --ti-lowcode-base-bg-2: #fafafa;
-  --ti-lowcode-base-bg-3: #191919;
-  --ti-lowcode-base-bg-4: #595959;
-  --ti-lowcode-base-bg-5: #fff;
-  --ti-lowcode-base-bg-6: #5959591a;
-  --ti-lowcode-base-bg-7: #f6f6f6;
-
-  // 文本色
-  --ti-lowcode-base-text-color: #191919;
-  --ti-lowcode-base-text-color-1: #595959;
-  --ti-lowcode-base-text-color-2: #1476ff;
-  --ti-lowcode-base-text-color-3: #808080;
-  --ti-lowcode-base-text-color-4: #c2c2c2;
-
-  // 文本链接色
-  --ti-lowcode-base-text-link-color: #191919;
-  --ti-lowcode-base-text-link-color-1: #595959;
-  --ti-lowcode-base-text-link-color-2: #c2c2c2;
-  --ti-lowcode-base-text-link-color-3: #fff;
-
-  // 按钮边框色
-  --ti-lowcode-base-secondary-button-border-color: #595959;
-  --ti-lowcode-base-secondary-button-border-hover-color: #c2c2c2;
-  --ti-lowcode-base-default-button-border-color: #c2c2c2;
-  --ti-lowcode-base-default-button-border-hover-color: #191919;
-  --ti-lowcode-base-default-button-border-disable-color: #dbdbdb;
-
-  // 分割线
-  --ti-lowcode-base-split-color-1: rgba(0, 0, 0, 0.08); // 白色背景分割线
-  --ti-lowcode-base-split-color-2: rgba(0, 0, 0, 0.15); // 灰色背景分割线
-
-  // 状态色
-  --ti-lowcode-base-error-color: #f23030;
-  --ti-lowcode-base-warn-color: #ff8800;
-  --ti-lowcode-base-warn-color-1: #f7d916;
-  --ti-lowcode-base-success-color: #5cb300;
-  --ti-lowcode-base-prompt-color: #1476ff;
-  --ti-lowcode-base-invalidate-color: #ebebeb;
-}
diff --git a/packages/theme/light/block.less b/packages/theme/light/block.less
index 0d85bda2cd..a0204adc76 100644
--- a/packages/theme/light/block.less
+++ b/packages/theme/light/block.less
@@ -1,54 +1,40 @@
 :root {
   // 历史备份列表
-  --ti-lowcode-component-block-history-list-item-border-color: var(--ti-lowcode-common-border-color-1); // 组件边框色
-  --ti-lowcode-component-block-history-list-item-hover-bg: var(
-    --ti-lowcode-common-component-hover-bg
-  ); // 组件 hover 背景 色
-  --ti-lowcode-component-block-history-list-item-btn-color: var(
-    --ti-lowcode-common-secondary-text-color
-  ); // 预览还原按钮文字色
+  --ti-lowcode-component-block-history-list-item-border-color: var(--te-common-border-default); // 组件边框色
+  --ti-lowcode-component-block-history-list-item-hover-bg: var(--te-common-bg-container); // 组件 hover 背景 色
+  --ti-lowcode-component-block-history-list-item-btn-color: var(--te-common-text-secondary); // 预览还原按钮文字色
   --ti-lowcode-component-block-history-list-item-btn-hover-color: var(
-    --ti-lowcode-common-text-main-color
+    --te-common-text-secondary
   ); // 预览还原 hover 颜色
-  --ti-lowcode-component-block-history-list-item-btn-hover-bg: var(--ti-lowcode-common-hover-bg-1); // 预览还原背景色
-  --ti-lowcode-component-block-history-list-item-btn-border-color: var(
-    --ti-lowcode-common-secondary-text-color
-  ); // 预览还原边框色
+  --ti-lowcode-component-block-history-list-item-btn-hover-bg: var(--te-common-bg-container); // 预览还原背景色
+  --ti-lowcode-component-block-history-list-item-btn-border-color: var(--te-common-border-default); // 预览还原边框色
 
   // 区块列表
-  --ti-lowcode-component-block-list-item-color: var(--ti-lowcode-common-text-main-color); // 区块列表颜色
-  --ti-lowcode-component-block-list-shortcut-title-color: var(--ti-lowcode-common-primary-text-color); // 快照标题颜色
-  --ti-lowcode-component-block-list-shortcut-bg: var(--ti-lowcode-common-component-bg); // 快照标题颜色
-  --ti-lowcode-component-block-list-border-color: var(--ti-lowcode-common-border-color-4); // 快照标题颜色
-  --ti-lowcode-component-block-list-item-active-bg: #f5f5f5; // 区块 active 背景色
-  --ti-lowcode-component-block-version-list-item-border-color: var(--ti-lowcode-base-gray-20);
-  --ti-lowcode-component-block-version-list-item-bg: var(--ti-lowcode-base-gray-0);
-  --ti-lowcode-component-block-version-list-version-bg: #1476ff1a;
-  --ti-lowcode-component-block-version-list-version-color: var(--ti-lowcode-common-primary-color);
-  --ti-lowcode-component-block-version-list-panel-title-color: var(--ti-lowcode-common-text-title-color);
-  --ti-lowcode-component-block-version-list-time-color: var(--ti-lowcode-common-text-title-color);
+  --ti-lowcode-component-block-list-item-color: var(--te-common-text-secondary); // 区块列表颜色
+  --ti-lowcode-component-block-list-shortcut-title-color: var(--te-common-text-primary); // 快照标题颜色
+  --ti-lowcode-component-block-list-shortcut-bg: var(--te-common-bg-default); // 快照标题颜色
+  --ti-lowcode-component-block-list-item-active-bg: var(--te-common-bg-container); // 区块 active 背景色
+  --ti-lowcode-component-block-version-list-version-bg: var(--te-common-bg-default);
+  --ti-lowcode-component-block-version-list-version-color: var(--te-common-text-primary);
+  --ti-lowcode-component-block-version-list-panel-title-color: var(--te-common-text-primary);
+  --ti-lowcode-component-block-version-list-time-color: var(--te-common-text-primary);
   --ti-lowcode-component-block-version-list-desc-color: var(--te-common-text-weaken);
-  --ti-lowcode-component-block-version-list-current-version-color: var(--ti-lowcode-base-text-color-2);
-  --ti-lowcode-component-block-setting-popover-bg: var(--ti-lowcode-base-gray-0);
-  --ti-lowcode-component-block-setting-item-hover-bg: var(--ti-lowcode-base-bg-2);
-  --ti-lowcode-component-block-setting-item-text-color: var(--ti-lowcode-base-text-color);
+  --ti-lowcode-component-block-version-list-time-color: var(--te-common-text-primary);
+  --ti-lowcode-component-block-setting-popover-bg: var(--te-common-bg-default);
+  --ti-lowcode-component-block-setting-item-hover-bg: var(--te-common-bg-container);
+  --ti-lowcode-component-block-setting-item-text-color: var(--te-common-text-secondary);
   // 区块管理 - 添加分类
   --ti-lowcode-component-block-list-add-group-btn-bg: transparent;
-  --ti-lowcode-component-block-list-add-group-btn-border: 1px solid var(--ti-lowcode-base-default-button-border-color);
-  --ti-lowcode-component-block-list-setting-btn-color: var(--ti-lowcode-base-default-button-border-hover-color);
-  --ti-lowcode-component-block-list-setting-btn-hover-color: var(--ti-lowcode-base-default-button-border-hover-color);
+  --ti-lowcode-component-block-list-add-group-btn-border: 1px solid var(--te-common-border-default);
+  --ti-lowcode-component-block-list-setting-btn-color: var(--te-common-text-primary);
+  --ti-lowcode-component-block-list-setting-btn-hover-color: var(--te-common-text-primary);
   --ti-lowcode-component-block-list-add-group-btn-border-radius: 6px;
 }
 
-.block-setting-content {
-  --ti-lowcode-block-config-form-item-color: var(--ti-lowcode-base-text-color);
-}
-
 // 区块设置 - 标签
 .block-tag-create {
-  --ti-lowcode-block-config-tag-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-block-config-tag-bg: var(--ti-lowcode-input-bg);
-  --ti-lowcode-block-config-tag-hover-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-block-config-tag-hover-bg: #f2f2f2;
-  --ti-lowcode-block-config-tag-close-color: var(--ti-lowcode-toolbar-icon-color);
+  --ti-lowcode-block-config-tag-color: var(--te-common-text-primary);
+  --ti-lowcode-block-config-tag-bg: var(--te-common-bg-disabled);
+  --ti-lowcode-block-config-tag-hover-color: var(--te-common-text-primary);
+  --ti-lowcode-block-config-tag-hover-bg: var(--te-common-bg-disabled);
 }
diff --git a/packages/theme/light/bridge.less b/packages/theme/light/bridge.less
index 2b23ddc8bf..79c15bd31f 100644
--- a/packages/theme/light/bridge.less
+++ b/packages/theme/light/bridge.less
@@ -1,11 +1,11 @@
 .plugin-panel {
   // 资源管理
-  --ti-lowcode-bridge-list-color: var(--ti-lowcode-base-gray-90);
-  --ti-lowcode-bridge-list-bg: var(--ti-lowcode-base-gray-10);
-  --ti-lowcode-birdge-editor-border-color: var(--ti-lowcode-base-gray-20);
-  --ti-lowcode-birdge-input-label-color: var(--ti-lowcode-base-text-color-1);
+  --ti-lowcode-bridge-list-color: var(--te-common-text-primary);
+  --ti-lowcode-bridge-list-bg: var(--te-common-bg-container);
+  --ti-lowcode-birdge-editor-border-color: var(--te-common-border-default);
+  --ti-lowcode-birdge-input-label-color: var(--te-common-text-secondary);
 
   // npm工具类中代码预览的主题
-  --ti-lowcode-birdge-code-preview-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-birdge-code-preview-bg-color: #f0f0f0;
+  --ti-lowcode-birdge-code-preview-color: var(--te-common-text-primary);
+  --ti-lowcode-birdge-code-preview-bg-color: var(--te-common-bg-disabled);
 }
diff --git a/packages/theme/light/canvas.less b/packages/theme/light/canvas.less
index d9539b31ed..de33eb0327 100644
--- a/packages/theme/light/canvas.less
+++ b/packages/theme/light/canvas.less
@@ -1,8 +1,9 @@
+// 这里为canvas样式变量，canvas在暗色主题和亮色主题时，很多表现都一致，因此可以不使用common变量，而是直接用base变量
 #canvas-wrap {
   --ti-lowcode-canvas-rect-border-color: var(--te-common-border-checked);
-  --ti-lowcode-canvas-hover-line-in-bg-color: var(--te-base-rgba-25);
+  --ti-lowcode-canvas-hover-line-in-bg-color: var(--te-base-green-140);
   --ti-lowcode-canvas-hover-line-forbid-bg-color: var(--te-common-color-error);
-  --ti-lowcode-canvas-hover-line-in-forbid-bg-color: var(--te-base-rgba-26);
+  --ti-lowcode-canvas-hover-line-in-forbid-bg-color: var(--te-base-red-140);
   --ti-lowcode-canvas-choose-slot-border-color: var(--te-common-border-checked);
   --ti-lowcode-canvas-choose-slot-color: var(--te-common-text-dark-inverse);
   --ti-lowcode-canvas-corner-mark-left-color: var(--te-common-text-emphasize);
@@ -14,13 +15,13 @@
   --ti-lowcode-canvas-select-corner-mark-left-color: var(--te-common-text-dark-inverse);
   --ti-lowcode-canvas-select-corner-mark-left-bg-color: var(--te-common-bg-primary-checked);
 
-  --ti-lowcode-canvas-footer-border-top-color: var(--ti-lowcode-common-border-color-4); // canvas 底部面包屑 边框色
-  --ti-lowcode-canvas-tab-handle-bg: var(--ti-lowcode-common-secondary-text-color); // canvas 宽度拖动手柄 背景色
-  --ti-lowcode-canvas-tab-handle-hover-bg: var(--ti-lowcode-common-primary-color); // canvas 宽度拖动手柄 hover 背景色
-  --ti-lowcode-canvas-tab-handle-color: var(--ti-lowcode-common-text-color-2); // canvas 宽度拖动手柄 两条竖线颜色
-  --ti-lowcode-canvas-menu-bg: var(--ti-lowcode-common-component-bg); // canvas 右键菜单背景
+  --ti-lowcode-canvas-footer-border-top-color: var(--te-common-border-default); // canvas 底部面包屑 边框色
+  --ti-lowcode-canvas-tab-handle-bg: var(--te-common-bg-container); // canvas 宽度拖动手柄 背景色
+  --ti-lowcode-canvas-tab-handle-hover-bg: var(--te-common-bg-primary-checked); // canvas 宽度拖动手柄 hover 背景色
+  --ti-lowcode-canvas-tab-handle-color: var(--te-common-border-hover); // canvas 宽度拖动手柄 两条竖线颜色
+  --ti-lowcode-canvas-menu-bg: var(--te-common-bg-default); // canvas 右键菜单背景
   --ti-lowcode-canvas-menu-item-color: var(--te-common-text-primary); // 右键菜单文字颜色
   --ti-lowcode-canvas-menu-item-hover-bg-color: var(--te-common-bg-container);
   --ti-lowcode-canvas-menu-border-color: var(--te-common-border-default);
-  --ti-lowcode-canvas-menu-item-disabled-color: var(--ti-lowcode-base-text-color-4);
+  --ti-lowcode-canvas-menu-item-disabled-color: var(--te-common-text-weaken);
 }
diff --git a/packages/theme/light/datasource.less b/packages/theme/light/datasource.less
index d97badd5d1..12945f8233 100644
--- a/packages/theme/light/datasource.less
+++ b/packages/theme/light/datasource.less
@@ -1,48 +1,40 @@
 :root {
-  --ti-lowcode-datasource-toolbar-icon-color: var(--ti-lowcode-base-gray-60);
-  --ti-lowcode-datasource-tabs-border-color: var(--ti-lowcode-base-gray-30);
-  --ti-lowcode-datasource-toolbar-breadcrumb-color: var(--ti-lowcode-base-gray-80);
-  --ti-lowcode-datasource-json-border-colorr: var(--ti-lowcode-common-primary-color);
-  --ti-lowcode-datasource-tree-border-color: var(--ti-lowcode-base-success-color);
-  --ti-lowcode-datasource-common-primary-color: var(--ti-lowcode-common-primary-color);
-  --ti-lowcode-datasource-success-border-color: var(--ti-lowcode-base-success-color);
-  --ti-lowcode-datasource-input-icon-color: var(--ti-lowcode-base-gray-60);
-  --ti-lowcode-datasource-dialog-demo-border-color: var(--ti-lowcode-base-gray-60);
-  --ti-lowcode-datasource-canvas-wrap-bg: var(--ti-lowcode-base-default-button-border-disable-color);
-  --ti-lowcode-datasource-dialog-font-color: var(--ti-lowcode-base-gray-70);
-  --ti-lowcode-datasource-toolbar-bg: var(--ti-lowcode-base-bg-2);
-  --ti-lowcode-datasource-description-error-color: var(--ti-lowcode-base-error-color);
-  --ti-lowcode-datasource-common-text-main-color: var(--ti-lowcode-common-text-main-color);
-  --ti-lowcode-datasource-toolbar-more-hover-color: #808080;
-  --ti-lowcode-datasource-delete-button-hover-bg: var(--ti-lowcode-base-red-6);
-  --ti-lowcode-datasource-common-text-color-5: var(--ti-lowcode-common-text-color-5);
-  --ti-lowcode-datasource-common-empty-color: var(--ti-lowcode-common-empty-color);
-  --ti-lowcode-datasource-toolbar-view-hover-bg: var(--ti-lowcode-base-invalidate-color);
-  --ti-lowcode-datasource-common-hover-bg-1: var(--ti-lowcode-common-hover-bg-1);
-  --ti-lowcode-datasource-common-primary-text-color: var(--ti-lowcode-common-primary-text-color);
-  --ti-lowcode-datasource-icon-hover-bg: var(--ti-lowcode-base-invalidate-color);
-  --ti-lowcode-datasource-tabs-bg: var(--ti-lowcode-base-gray-20);
-  --ti-lowcode-datasource-canvas-handle-hover-bg: var(--ti-lowcode-base-blue-6);
-  --ti-lowcode-datasource-tabs-active-bg: var(--ti-lowcode-base-gray-20);
-  --ti-lowcode-datasource-common-error-color: var(--ti-lowcode-common-error-color);
-  --ti-lowcode-datasource-description-minor-color: var(--ti-lowcode-base-gray-50);
-  --ti-lowcode-datasource-description-warning-color: var(--ti-lowcode-base-orange-6);
-  --ti-lowcode-datasource-error-tip-color: var(--ti-lowcode-base-red-6);
-  --ti-lowcode-datasource-label-color: var(--ti-lowcode-base-gray-60); // light
-  --ti-lowcode-datasource-list-hover-color: var(--ti-lowcode-common-component-hover-bg);
-  --ti-lowcode-datasource-btn-click-color: var(--ti-lowcode-base-default-button-border-hover-color);
-  --ti-lowcode-datasource-tabs-bottom-border-color: var(--ti-lowcode-base-default-button-border-hover-color);
-  --ti-lowcode-datasource-list-bottom-border-color: var(--ti-lowcode-base-invalidate-color);
-  --ti-lowcode-datasource-switch-off-bg-color: var(--ti-lowcode-base-gray-50);
-  --ti-lowcode-datasource-switch-on-bg-color: var(--ti-lowcode-base-blue-6);
-  --ti-lowcode-datasource-modal-text-color: var(--ti-lowcode-base-gray-90);
-  --ti-lowcode-datasource-respones-select-color-bg: var(--ti-lowcode-base-text-link-color-3);
-  --ti-lowcode-datasource-respones-color-bg: var(--ti-lowcode-base-blue-6);
-  --ti-lowcode-datasource-respones-border-color-bg: var(--ti-lowcode-base-text-link-color-3);
-  --ti-lowcode-datasource-select-border-right-color-bg: var(--ti-lowcode-base-default-button-border-disable-color);
-  --ti-lowcode-datasource-select-border-color: var(--ti-lowcode-common-secondary-text-color);
-  --ti-lowcode-data-source-border-color: rgb(219, 219, 219);
-  --ti-lowcode-data-source-color: rgb(25, 25, 25);
-  --ti-lowcode-data-source-box-bg: rgb(245, 245, 245);
-  --ti-lowcode-datasource-tip-color: rgb(128, 128, 128);
+  --ti-lowcode-datasource-toolbar-icon-color: var(--te-common-text-secondary);
+  --ti-lowcode-datasource-tabs-border-color: var(--te-common-border-default);
+  --ti-lowcode-datasource-toolbar-breadcrumb-color: var(--te-common-text-primary);
+  --ti-lowcode-datasource-json-border-color: var(--te-common-border-checked);
+  --ti-lowcode-datasource-tree-border-color: var(--te-common-color-success);
+  --ti-lowcode-datasource-common-border-primary-color: var(--te-common-border-checked);
+  --ti-lowcode-datasource-success-border-color: var(--te-common-color-success);
+  --ti-lowcode-datasource-input-icon-color: var(--te-common-text-secondary);
+  --ti-lowcode-datasource-dialog-demo-border-color: var(--te-common-text-secondary);
+  --ti-lowcode-datasource-canvas-wrap-bg: var(--te-common-border-default);
+  --ti-lowcode-datasource-dialog-font-color: var(--te-common-text-secondary);
+  --ti-lowcode-datasource-toolbar-bg: var(--te-common-bg-container);
+  --ti-lowcode-datasource-description-error-color: var(--te-common-color-error);
+  --ti-lowcode-datasource-common-text-main-color: var(--te-common-text-secondary);
+  --ti-lowcode-datasource-toolbar-more-hover-color: var(--te-common-text-weaken);
+  --ti-lowcode-datasource-delete-button-hover-bg: var(--te-common-color-error);
+  --ti-lowcode-datasource-common-text-color-5: var(--te-common-text-weaken);
+  --ti-lowcode-datasource-common-hover-bg-1: var(--te-common-bg-container);
+  --ti-lowcode-datasource-common-primary-text-color: var(--te-common-text-primary);
+  --ti-lowcode-datasource-icon-hover-bg: var(--te-common-bg-container);
+  --ti-lowcode-datasource-tabs-bg: var(--te-common-text-primary);
+  --ti-lowcode-datasource-canvas-handle-hover-bg: var(--te-common-bg-primary-checked);
+  --ti-lowcode-datasource-common-error-color: var(--te-common-color-error);
+  --ti-lowcode-datasource-description-minor-color: var(--te-common-text-weaken);
+  --ti-lowcode-datasource-description-warning-color: var(--te-common-color-warning);
+  --ti-lowcode-datasource-error-tip-color: var(--te-common-color-error);
+  --ti-lowcode-datasource-label-color: var(--te-common-text-secondary); // light
+  --ti-lowcode-datasource-list-hover-color: var(--te-common-bg-container);
+  --ti-lowcode-datasource-btn-click-color: var(--te-common-border-active);
+  --ti-lowcode-datasource-tabs-color: var(--te-common-border-);
+  --ti-lowcode-datasource-switch-off-bg-color: var(--te-common-bg-switch);
+  --ti-lowcode-datasource-switch-on-bg-color: var(--te-common-bg-primary-checked);
+  --ti-lowcode-datasource-modal-text-color: var(--te-common-text-primary);
+  --ti-lowcode-datasource-respones-color-bg: var(--te-common-bg-primary-checked);
+  --ti-lowcode-data-source-border-color: var(--te-common-border-default);
+  --ti-lowcode-data-source-color: var(--te-common-text-primary);
+  --ti-lowcode-data-source-box-bg: var(--te-common-bg-container);
+  --ti-lowcode-datasource-tip-color: var(--te-common-text-weaken);
 }
diff --git a/packages/theme/light/events.less b/packages/theme/light/events.less
index 34b0345adf..1216fb547f 100644
--- a/packages/theme/light/events.less
+++ b/packages/theme/light/events.less
@@ -1,40 +1,40 @@
 .setting-advanced-add-custom-event-tip {
-  --ti-lowcode-events-add-custom-event-tips-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-event-add-custom-event-tips-highlight-color: var(--ti-lowcode-base-warn-color);
+  --ti-lowcode-events-add-custom-event-tips-color: var(--te-common-text-primary);
+  --ti-lowcode-event-add-custom-event-tips-highlight-color: var(--te-common-color-warning);
 }
 
 .setting-advanced-bind-event-list {
-  --ti-lowcode-events-bind-event-list-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-events-bind-event-list-item-disabled-color: var(--ti-lowcode-base-text-color-4);
-  --lowcode-events-bind-event-list-item-hover-bg-color: var(--ti-lowcode-base-bg-1);
+  --ti-lowcode-events-bind-event-list-color: var(--te-common-text-primary);
+  --ti-lowcode-events-bind-event-list-item-disabled-color: var(--te-common-text-disabled);
+  --lowcode-events-bind-event-list-item-hover-bg-color: var(--te-common-bg-container);
 }
 
 .bind-action-list {
-  --ti-lowcode-events-bind-action-item-border-color: var(--ti-lowcode-base-split-color-1);
-  --ti-lowcode-events-event-bind-color: var(--ti-lowcode-base-primary-color-2);
-  --ti-lowcode-events-bind-action-item-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-events-bind-action-item-hover-bg-color: var(--ti-lowcode-base-bg-1);
-  --ti-lowcode-events-bind-action-item-linked-bg-color: var(--ti-lowcode-base-success-color);
-  --ti-lowcode-events-bind-action-item-linked-color: var(--ti-lowcode-base-gray-0);
+  --ti-lowcode-events-bind-action-item-border-color: var(--te-common-border-default);
+  --ti-lowcode-events-event-bind-color: var(--te-common-text-checked);
+  --ti-lowcode-events-bind-action-item-color: var(--te-common-text-primary);
+  --ti-lowcode-events-bind-action-item-hover-bg-color: var(---te-common-bg-container);
+  --ti-lowcode-events-bind-action-item-linked-bg-color: var(--te-common-color-success);
+  --ti-lowcode-events-bind-action-item-linked-color: var(--te-common-text-dark-inverse);
   --ti-lowcode-events-empty-action-bg-color: var(--te-common-bg-container);
   --ti-lowcode-events-empty-action-color: var(--te-common-text-weaken);
   --ti-lowcode-events-custom-icon-color: var(--te-common-text-weaken);
-  --ti-lowcode-events-empty-action-tips-strong-color: var(--ti-lowcode-base-warn-color);
+  --ti-lowcode-events-empty-action-tips-strong-color: var(--te-common-color-warning);
 }
 
 .advanced-config-container {
-  --ti-lowcode-events-advanced-config-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-events-advanced-label-color: var(--ti-lowcode-base-text-color-1);
-  --ti-lowcode-events-advanced-binding-state-bg-color: var(--ti-lowcode-base-primary-color-2);
-  --ti-lowcode-events-advanced-binding-state-color: var(--ti-lowcode-base-gray-0);
+  --ti-lowcode-events-advanced-config-color: var(--te-common-text-primary);
+  --ti-lowcode-events-advanced-label-color: var(--te-common-text-secondary);
+  --ti-lowcode-events-advanced-binding-state-bg-color: var(--te-common-bg-primary-checked);
+  --ti-lowcode-events-advanced-binding-state-color: var(--te-common-text-dark-inverse);
 }
 
 .bind-event-dialog-content {
   --ti-lowcode-bind-event-dialog-color: var(--te-common-text-secondary);
-  --ti-lowcode-bind-event-dialog-content-left-border-color: var(--ti-lowcode-base-split-color-1);
-  --ti-lowcode-bind-event-dialog-content-right-monaco-border-color: var(--ti-lowcode-base-split-color-1);
-  --ti-lowcode-bind-event-dialog-content-left-list-item-active-bg-color: var(--ti-lowcode-base-bg-1);
-  --ti-lowcode-bind-event-dialog-new-action-tip-color: var(--ti-lowcode-base-text-color-1);
-  --ti-lowcode-bind-event-dialog-action-selected-icon-color: var(--ti-lowcode-base-primary-color-2);
-  --ti-lowcode-bind-event-dialog-mark-bg-color: var(--ti-lowcode-base-bg-1);
+  --ti-lowcode-bind-event-dialog-content-left-border-color: var(--te-common-border-default);
+  --ti-lowcode-bind-event-dialog-content-right-monaco-border-color: var(--te-common-border-default);
+  --ti-lowcode-bind-event-dialog-content-left-list-item-active-bg-color: var(--te-common-bg-container);
+  --ti-lowcode-bind-event-dialog-new-action-tip-color: var(--te-common-text-secondary);
+  --ti-lowcode-bind-event-dialog-action-selected-icon-color: var(--te-common-text-checked);
+  --ti-lowcode-bind-event-dialog-mark-bg-color: var(--te-common-bg-container);
 }
diff --git a/packages/theme/light/gpt-dialog.less b/packages/theme/light/gpt-dialog.less
index 14abccd650..4457ec3c9d 100644
--- a/packages/theme/light/gpt-dialog.less
+++ b/packages/theme/light/gpt-dialog.less
@@ -3,8 +3,6 @@
   --ti-lowcode-chat-model-text: #191919;
   // chatGPT聊天窗问题模板文字边框颜色
   --ti-lowcode-chat-model-text-border: #cbcbcb;
-  // chatGPT聊天窗提问框图标
-  --ti-lowcode-chat-model-input-icon: #999999;
   // chatGPT聊天窗用户头像边框色
   --ti-lowcode-chat-model-avatar-border: #dfe1e6;
   // chatGPT聊天窗AI聊天文字背景
@@ -55,13 +53,13 @@
   --ti-lowcode-chat-model-tips-bg: #f5f5f5;
 
   // chatGPT加载
-  --ti-lowcode-chat-loading-svg-color: var(--ti-lowcode-common-primary-color);
+  --ti-lowcode-chat-loading-svg-color: #1476ff;
   --ti-lowcode-chat-loading-text-color: #595959;
 }
 
 .chat-model-popover {
   --ti-lowcode-chat-model-popover-bg: #fff;
-  --ti-lowcode-chat-model-popover-color: var(--ti-lowcode-base-text-color);
+  --ti-lowcode-chat-model-popover-color: #191919;
   --ti-lowcode-chat-model-popover-active-bg: #fff;
-  --ti-lowcode-chat-model-popover-active-color: var(--ti-lowcode-base-text-color-2);
+  --ti-lowcode-chat-model-popover-active-color: #1476ff;
 }
diff --git a/packages/theme/light/help.less b/packages/theme/light/help.less
index ec1b448a03..23bbc02362 100644
--- a/packages/theme/light/help.less
+++ b/packages/theme/light/help.less
@@ -1,16 +1,16 @@
 .shepherd-modal-overlay-container,
 .tiny-guide {
-  --ti-lowcode-help-guide-content-text-color: var(--ti-lowcode-base-text-color-1);
-  --ti-lowcode-help-guide-title-text-color: var(--ti-lowcode-base-primary-color-1);
-  --ti-lowcode-help-guide-progress-style-text-color: var(--ti-lowcode-base-primary-color-1);
+  --ti-lowcode-help-guide-content-text-color: var(--te-common-text-secondary);
+  --ti-lowcode-help-guide-title-text-color: var(--te-common-text-primary);
+  --ti-lowcode-help-guide-progress-style-text-color: var(--te-common-text-primary);
   --ti-lowcode-help-guide-mask-bg-color: inherit;
 }
 .help-plugin-box {
-  --ti-lowcode-help-box-bg-color: #ffffff;
-  --ti-lowcode-help-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
-  --ti-lowcode-help-box-title-text-color: #191919;
-  --ti-lowcode-help-box-item-text-color: #595959;
-  --ti-lowcode-help-box-question-border-top: #ebebeb;
-  --ti-lowcode-help-box-question-item-text-color: #1476ff;
-  --ti-lowcode-help-box-item-hover-bg-color: #f5f5f5;
+  --ti-lowcode-help-box-bg-color: var(--te-common-bg-default);
+  --ti-lowcode-help-box-shadow: 0px 2px 6px 0px var(--te-base-box-shadow-rgba-2);
+  --ti-lowcode-help-box-title-text-color: var(--te-common-text-primary);
+  --ti-lowcode-help-box-item-text-color: var(--te-common-text-secondary);
+  --ti-lowcode-help-box-question-border-top: var(--te-common-border-divider);
+  --ti-lowcode-help-box-question-item-text-color: var(--te-common-text-emphasize);
+  --ti-lowcode-help-box-item-hover-bg-color: var(--te-common-bg-container);
 }
diff --git a/packages/theme/light/i18n.less b/packages/theme/light/i18n.less
index f04a0b88cc..b8322b00d9 100644
--- a/packages/theme/light/i18n.less
+++ b/packages/theme/light/i18n.less
@@ -1,16 +1,16 @@
 :root {
   // 国际化表格操作图标颜色
-  --ti-lowcode-i18n-operate-svg-color: var(--ti-lowcode-base-text-color);
+  --ti-lowcode-i18n-operate-svg-color: var(--te-common-text-primary);
   // 国际化表格加载中字体颜色
-  --ti-lowcode-i18n-loading-text-color: #999999;
+  --ti-lowcode-i18n-loading-text-color: var(--te-common-text-weaken);
   // 国际化表格加载中图标颜色
-  --ti-lowcode-i18n-loading-svg-color: var(--ti-lowcode-base-text-color);
+  --ti-lowcode-i18n-loading-svg-color: var(--te-common-text-primary);
   // 国际化边框颜色
-  --ti-lowcode-i18n-border-color: #ebebeb;
+  --ti-lowcode-i18n-border-color: var(--te-common-border-default);
   // 国际化按钮字体颜色
-  --ti-lowcode-i18n-button-color: #191919;
+  --ti-lowcode-i18n-button-color: var(--te-common-text-primary);
   // 国际化按钮图标颜色
-  --ti-lowcode-i18n-icon-color: #808080;
+  --ti-lowcode-i18n-icon-color: var(--te-common-text-weaken);
   // 国际化按钮字体边框颜色
-  --ti-lowcode-i18n-button-border-color: #dbdbdb;
+  --ti-lowcode-i18n-button-border-color: var(--te-common-border-default);
 }
diff --git a/packages/theme/light/index.less b/packages/theme/light/index.less
index 60c943fad9..66a84d8890 100644
--- a/packages/theme/light/index.less
+++ b/packages/theme/light/index.less
@@ -1,5 +1,4 @@
 // 主题配置优先于公共配置
-@import './base.less';
 @import './variable.less';
 @import './tutorial.less';
 @import './help.less';
diff --git a/packages/theme/light/life-cycles.less b/packages/theme/light/life-cycles.less
index b967a16b25..8377abf2d4 100644
--- a/packages/theme/light/life-cycles.less
+++ b/packages/theme/light/life-cycles.less
@@ -1,7 +1,7 @@
 :root {
   // 生命周期
-  --ti-lowcode-life-cycle-alert-color: #808080;
-  --ti-lowcode-life-cycle-item-hover-bg: var(--ti-lowcode-common-hover-bg-1);
-  --ti-lowcode-life-cycle-item-disable-color: var(--ti-lowcode-base-text-link-color-2);
-  --ti-lowcode-life-cycle-editor-border: var(--ti-lowcode-base-default-button-border-color);
+  --ti-lowcode-life-cycle-alert-color: var(--te-common-text-disabled);
+  --ti-lowcode-life-cycle-item-hover-bg: var(--te-common-bg-container);
+  --ti-lowcode-life-cycle-item-disable-color: var(--te-common-text-disabled);
+  --ti-lowcode-life-cycle-editor-border: var(--te-common-border-default);
 }
diff --git a/packages/theme/light/materials.less b/packages/theme/light/materials.less
index b18119956e..5bce3562d4 100644
--- a/packages/theme/light/materials.less
+++ b/packages/theme/light/materials.less
@@ -1,30 +1,30 @@
 :root {
   // 带边框的图标按钮边框颜色
-  --ti-lowcode-materials-border-icon-border-color: var(--ti-lowcode-base-default-button-border-color);
+  --ti-lowcode-materials-border-icon-border-color: var(--te-common-border-default);
   // 带边框的图标按钮图标颜色
-  --ti-lowcode-materials-border-icon-svg-color: var(--ti-lowcode-base-text-color);
+  --ti-lowcode-materials-border-icon-svg-color: var(--te-common-text-primary);
   // 带边框的图标按钮悬浮边框颜色
-  --ti-lowcode-materials-border-icon-border-color-hover: var(--ti-lowcode-base-default-button-border-hover-color);
+  --ti-lowcode-materials-border-icon-border-color-hover: var(--te-common-border-active);
   // 带边框的图标按钮背景颜色
-  --ti-lowcode-materials-border-icon-bg-color: var(--ti-lowcode-base-bg-5);
+  --ti-lowcode-materials-border-icon-bg-color: var(--te-common-bg-default);
   // 区块分组下拉选项下边框颜色
-  --ti-lowcode-materials-block-group-item-border-color: var(--ti-lowcode-common-primary-text-color);
+  --ti-lowcode-materials-block-group-item-border-color: var(--te-common-text-primary);
   // 添加区块筛选模块字体颜色
-  --ti-lowcode-materials-block-filter-text-color: var(--ti-lowcode-common-primary-text-color);
+  --ti-lowcode-materials-block-filter-text-color: var(--te-common-text-primary);
+  // 添加区块筛选模块选中字体颜色
+  --ti-lowcode-materials-block-filter-selected-text-color: var(--te-common-text-primary);
   // 添加区块穿梭框面板背景颜色
-  --ti-lowcode-materials-block-transfer-bg-color: var(--ti-lowcode-common-component-bg);
+  --ti-lowcode-materials-block-transfer-bg-color: var(--te-common-bg-default);
   // 添加区块穿梭框面板头部字体颜色
-  --ti-lowcode-materials-block-transfer-header-text-color: var(--ti-lowcode-common-primary-text-color);
-  // 添加区块筛选模块选中字体颜色
-  --ti-lowcode-materials-block-filter-selected-text-color: var(--ti-lowcode-common-primary-text-color);
+  --ti-lowcode-materials-block-transfer-header-text-color: var(--te-common-text-primary);
   // 添加区块穿梭框面板头部背景颜色
   --ti-lowcode-materials-block-transfer-header-bg-color: var(--te-common-bg-container);
   // 区块分组添加区块筛选项 hover 颜色
-  --ti-lowcode-materials-block-filter-hover-color: var(--ti-lowcode-common-primary-text-color);
+  --ti-lowcode-materials-block-filter-hover-color: var(--te-common-text-primary);
   // 组件列表  组件名称颜色
-  --ti-lowcode-materials-component-list-color: var(--ti-lowcode-common-text-main-color);
+  --ti-lowcode-materials-component-list-color: var(--te-common-text-secondary);
   // 删除区块分组气泡弹窗背景色
-  --ti-lowcode-materials-block-group-delete-popover-bg-color: var(--ti-lowcode-common-component-bg);
+  --ti-lowcode-materials-block-group-delete-popover-bg-color: var(--te-common-bg-popover);
   // 删除区块分组气泡弹窗标题色
-  --ti-lowcode-materials-block-group-delete-popover-title-color: var(--ti-lowcode-common-text-title-color);
+  --ti-lowcode-materials-block-group-delete-popover-title-color: var(--te-common-text-primary);
 }
diff --git a/packages/theme/light/metaComponent.less b/packages/theme/light/metaComponent.less
index 49cf1a5a37..c382c6cfba 100644
--- a/packages/theme/light/metaComponent.less
+++ b/packages/theme/light/metaComponent.less
@@ -1,66 +1,59 @@
 :root {
   // MetaListItem
-  --ti-lowcode-meta-list-item-bg-color: var(--ti-lowcode-base-bg-5);
-  --ti-lowcode-meta-list-item-border-color: rgba(0, 0, 0, 0.08);
+  --ti-lowcode-meta-list-item-bg-color: var(--te-common-bg-default);
+  --ti-lowcode-meta-list-item-border-color: var(--te-common-border-default);
   //
-  --ti-lowcode-meta-list-top-color: var(--ti-lowcode-base-text-color-1);
+  --ti-lowcode-meta-list-top-color: var(--te-common-text-secondary);
   // MetaJsSlot
-  --lowcode-meta-js-slot-color: var(--ti-lowcode-base-text-color-1);
+  --lowcode-meta-js-slot-color: var(--te-common-text-secondary);
 
   // MetaCodeEditor
-  --ti-lowcode-meta-codeEditor-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-meta-codeEditor-hover-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-meta-codeEditor-border-color: var(--ti-lowcode-base-default-button-border-color);
-  --ti-lowcode-meta-codeEditor-border-hover-color: var(--ti-lowcode-base-default-button-border-hover-color);
+  --ti-lowcode-meta-codeEditor-color: var(--te-common-text-primary);
+  --ti-lowcode-meta-codeEditor-hover-color: var(--te-common-text-primary);
+  --ti-lowcode-meta-codeEditor-border-color: var(--te-common-border-default);
+  --ti-lowcode-meta-codeEditor-border-hover-color: var(--te-common-border-active);
   --ti-lowcode-meta-codeEditor-icon-color: var(--te-common-text-weaken);
 }
 
 // config-item label popover tips
 .prop-label-tips-container {
-  --ti-lowcode-meta-config-item-label-tips-desc-color: var(--ti-lowcode-base-text-color-1);
-  --ti-lowcode-meta-config-item-label-tips-title-color: var(--ti-lowcode-base-text-color);
+  --ti-lowcode-meta-config-item-label-tips-desc-color: var(--te-common-text-secondary);
+  --ti-lowcode-meta-config-item-label-tips-title-color: var(--te-common-text-primary);
 }
 
 // configItem
 .properties-item {
-  --ti-lowcode-meta-config-item-error-tips-color: var(--ti-lowcode-base-error-color);
-  --ti-lowcode-meta-config-item-label-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-meta-config-item-bind-color: var(--ti-lowcode-base-gray-0);
-  --ti-lowcode-meta-config-item-bind-bg: var(--ti-lowcode-base-primary-color-2);
-
-  --ti-lowcode-meta-config-item-active-bg: var(--ti-lowcode-common-hover-bg-1);
-  --ti-lowcode-meta-config-item-link-color: var(--ti-lowcode-base-text-color-2);
+  --ti-lowcode-meta-config-item-error-tips-color: var(--te-common-color-error);
+  --ti-lowcode-meta-config-item-label-color: var(--te-common-text-secondary);
+  --ti-lowcode-meta-config-item-bind-color: var(--te-common-text-dark-inverse);
+  --ti-lowcode-meta-config-item-bind-bg: var(--te-common-bg-primary-checked);
+  --ti-lowcode-meta-config-item-active-bg: var(--te-common-bg-container);
+  --ti-lowcode-meta-config-item-link-color: var(--te-common-text-checked);
 }
 
 // MetaBindVariable
 .meta-bind-variable-dialog-box {
-  --ti-lowcode-meta-bind-variable-icon-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-meta-bind-variable-icon-hover-bg-color: var(--ti-lowcode-base-bg-1);
-  --ti-lowcode-meta-bind-variable-content-left-title-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-meta-bind-variable-content-right-title-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-meta-bind-variable-list-wrap-border-color: var(--ti-lowcode-base-default-button-border-color);
-  --ti-lowcode-meta-bind-variable-content-left-list-border-right-color: var(
-    --ti-lowcode-base-default-button-border-color
-  );
-  --ti-lowcode-meta-bind-variable-list-item-hover-bg-color: var(--ti-lowcode-base-bg-1);
-  --ti-lowcode-meta-bind-variable-item-selected-bg-color: var(--ti-lowcode-base-bg-1);
-  --ti-lowcode-meta-bind-variable-item-hover-bg-color: var(--ti-lowcode-base-bg-1);
-  --ti-lowcode-meta-bind-variable-bottom-border-color: var(--ti-lowcode-base-default-button-border-color);
-  --ti-lowcode-meta-bind-variable-top-border-color: var(--ti-lowcode-base-default-button-border-color);
-  --ti-lowcode-meta-bind-variable-bottom-color: var(--ti-lowcode-base-text-color-1);
-  --ti-lowcode-meta-bind-variable-content-left-list-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-meta-bind-variable-item-text-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-meta-bind-variable-header-alert-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-meta-bind-variable-top-color: var(--ti-lowcode-base-text-color);
+  --ti-lowcode-meta-bind-variable-icon-color: var(--te-common-text-primary);
+  --ti-lowcode-meta-bind-variable-icon-hover-bg-color: var(--te-common-text-secondary);
+  --ti-lowcode-meta-bind-variable-content-left-title-color: var(--te-common-text-primary);
+  --ti-lowcode-meta-bind-variable-content-right-title-color: var(--te-common-text-primary);
+  --ti-lowcode-meta-bind-variable-list-wrap-border-color: var(--te-common-border-default);
+  --ti-lowcode-meta-bind-variable-content-left-list-border-right-color: var(--te-common-border-default);
+  --ti-lowcode-meta-bind-variable-list-item-hover-bg-color: var(--te-common-text-secondary);
+  --ti-lowcode-meta-bind-variable-item-selected-bg-color: var(--te-common-text-secondary);
+  --ti-lowcode-meta-bind-variable-item-hover-bg-color: var(--te-common-text-secondary);
+  --ti-lowcode-meta-bind-variable-bottom-border-color: var(--te-common-border-default);
+  --ti-lowcode-meta-bind-variable-top-border-color: var(--te-common-border-default);
+  --ti-lowcode-meta-bind-variable-bottom-color: var(--te-common-text-secondary);
+  --ti-lowcode-meta-bind-variable-content-left-list-color: var(--te-common-text-primary);
+  --ti-lowcode-meta-bind-variable-item-text-color: var(--te-common-text-primary);
+  --ti-lowcode-meta-bind-variable-header-alert-color: var(--te-common-text-primary);
+  --ti-lowcode-meta-bind-variable-top-color: var(--te-common-text-primary);
 }
 
 // MetaCodeEditor
 .meta-code-editor-dialog-box {
-  --ti-lowcode-meta-code-editor-header-tips-container-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-meta-code-editor-header-collapse-icon-color: var(--ti-lowcode-base-gray-50);
-  --ti-lowcode-meta-code-editor-header-collapse-icon-hover-color: var(--ti-lowcode-base-gray-90);
-  --ti-lowcode-meta-code-editor-header-tips-demo-bg-color: var(--ti-lowcode-base-gray-5);
-  --ti-lowcode-meta-code-editor-header-tips-demo-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-meta-code-editor-source-code-content-border-color: var(--ti-lowcode-base-gray-40);
-  --ti-lowcode-meta-code-editor-err-msg-color: var(--ti-lowcode-base-error-color);
+  --ti-lowcode-meta-code-editor-header-tips-container-color: var(--te-common-text-primary);
+  --ti-lowcode-meta-code-editor-header-collapse-icon-color: var(--te-common-icon-secondary);
+  --ti-lowcode-meta-code-editor-err-msg-color: var(--te-common-color-error);
 }
diff --git a/packages/theme/light/pageManage.less b/packages/theme/light/pageManage.less
index f8b5426698..3402555b3f 100644
--- a/packages/theme/light/pageManage.less
+++ b/packages/theme/light/pageManage.less
@@ -1,27 +1,12 @@
 :root {
-  --ti-lowcode-page-manage-title-background-text-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-page-manage-tip-border-color: var(--ti-lowcode-base-gray-50);
-  --ti-lowcode-page-manage-tree-text-background-color: var(--ti-lowcode-common-bg-8);
-  --ti-lowcode-page-manage-tree-node-background-color: var(--ti-lowcode-common-component-bg);
-  --ti-lowcode-page-manage-tree-node-label-color: #191919;
-  --ti-lowcode-page-manage-tip-color: var(--ti-lowcode-base-gray-90);
-  --ti-lowcode-page-manage-input-background-color: var(--ti-lowcode-common-bg-9);
-  --ti-lowcode-page-manage-input-border-color: var(--ti-lowcode-common-text-color-4);
-  --ti-lowcode-page-manage-tips-icon-color: var(--ti-lowcode-common-primary-color);
-  --ti-lowcode-page-manage-content-tips-color: var(--ti-lowcode-common-text-color-5);
-  --ti-lowcode-page-manage-search-border-color: var(--ti-lowcode-base-gray-30);
-  --ti-lowcode-page-manage-tree-color: var(--ti-lowcode-common-text-main-color);
-  --ti-lowcode-page-manage-page-tree-background-active-color: var(--ti-lowcode-common-component-hover-bg);
-  --ti-lowcode-page-manage-page-tree-background-hover-color: var(--ti-lowcode-common-component-hover-bg);
-  --ti-lowcode-page-manage-svg-hover-color: var(--ti-lowcode-base-bg-3);
-  --ti-lowcode-page-manage-text-color: var(--ti-lowcode-base-text-color-1);
-  --ti-lowcode-page-manage-input-head-text-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-page-manage-btn-text-color: var(--ti-lowcode-base-gray-50);
-  --ti-lowcode-page-manage-btn-text-color-2: var(--ti-lowcode-common-text-color-5);
-  --ti-lowcode-page-manage-error-color: var(--ti-lowcode-common-error-color);
-  --ti-lowcode-page-manage-input-group-color: var(--ti-lowcode-base-bg-5);
-  --ti-lowcode-page-manage-input-group-border-color: var(--ti-lowcode-base-default-button-border-color);
-  --ti-lowcode-page-manage-input-group-border-right-color: var(--ti-lowcode-common-component-hover-bg);
-  --ti-lowcode-page-manage-input-output-text-color: var(--ti-lowcode-base-gray-60);
-  --ti-lowcode-page-manage-input-output-text-bg-color: var(--ti-lowcode-base-blue-6);
+  --ti-lowcode-page-manage-title-background-text-color: var(--te-common-text-primary);
+  --ti-lowcode-page-manage-tip-text-color: var(--te-common-text-weaken);
+  --ti-lowcode-page-manage-tree-text-background-color: var(--te-common-bg-default);
+  --ti-lowcode-page-manage-tree-node-background-color: var(--te-common-bg-default);
+  --ti-lowcode-page-manage-tree-node-label-color: var(--te-common-text-primary);
+  --ti-lowcode-page-manage-text-color: var(--te-common-text-secondary);
+  --ti-lowcode-page-manage-input-head-text-color: var(--te-common-text-primary);
+  --ti-lowcode-page-manage-btn-text-color: var(--te-common-text-weaken);
+  --ti-lowcode-page-manage-error-color: var(--te-common-color-error);
+  --ti-lowcode-page-manage-input-group-color: var(--te-common-bg-default);
 }
diff --git a/packages/theme/light/plugin-js.less b/packages/theme/light/plugin-js.less
index ad512cd922..9f21c8a0e9 100644
--- a/packages/theme/light/plugin-js.less
+++ b/packages/theme/light/plugin-js.less
@@ -1,7 +1,6 @@
 // 页面JS 插件面板
 .plugin-page-js-container {
-  --ti-lowcode-plugin-js-bg: var(--ti-lowcode-base-gray-0);
-  --ti-lowcode-plugin-js-head-border-bottom-color: var(--ti-lowcode-base-split-color-1);
-  --ti-lowcode-code-edit-content-border-color: var(--ti-lowcode-base-gray-40);
-  --ti-lowcode-plugin-js-help-link-color: var(--ti-lowcode-base-primary-color-2);
+  --ti-lowcode-plugin-js-bg: var(--te-common-bg-default);
+  --ti-lowcode-plugin-js-head-border-bottom-color: var(--te-common-border-divider);
+  --ti-lowcode-plugin-js-help-link-color: var(--te-common-text-link);
 }
diff --git a/packages/theme/light/setting-style.less b/packages/theme/light/setting-style.less
index 1782792b42..7672f02a1c 100644
--- a/packages/theme/light/setting-style.less
+++ b/packages/theme/light/setting-style.less
@@ -1,11 +1,7 @@
 :root {
-  --ti-lowcode-setting-style-input-bg: var(--ti-lowcode-base-blue-6);
-  --ti-lowcode-setting-style-font-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-setting-style-input-font-color: var(--ti-lowcode-base-gray-0);
-  --ti-lowcode-setting-style-btn-font-color: var(--ti-lowcode-base-gray-50);
-  --ti-lowcode-setting-style-btn-border-color: var(--ti-lowcode-base-gray-90);
-  --ti-lowcode-setting-style-title-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-setting-style-tab-bg-color: var(--ti-lowcode-base-bg-7);
-  --ti-lowcode-setting-style-drag-bar-bg: var(--ti-lowcode-base-bg);
-  --ti-lowcode-setting-style-spacing-bg: var(--te-base-gray-34);
+  --ti-lowcode-setting-style-input-bg: var(--te-common-bg-primary-emphasize);
+  --ti-lowcode-setting-style-font-color: var(--te-common-text-dark-inverse);
+  --ti-lowcode-setting-style-input-font-color: var(--te-common-text-dark-inverse);
+  --ti-lowcode-setting-style-btn-font-color: var(--te-common-text-primary);
+  --ti-lowcode-setting-style-btn-border-color: var(--te-common-border-default);
 }
diff --git a/packages/theme/light/settings.less b/packages/theme/light/settings.less
index 17b15c1179..b37775e1eb 100644
--- a/packages/theme/light/settings.less
+++ b/packages/theme/light/settings.less
@@ -1,47 +1,38 @@
 // 右侧属性面板 css 变量
 #tiny-right-panel {
   --ti-lowcode-setting-panel-bg-color: var(--te-common-bg-default);
-  --ti-lowcode-setting-panel-tabs-item-title-color: var(--ti-lowcode-base-text-color-1);
-  --ti-lowcode-setting-panel-tabs-item-title-active-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-setting-panel-tabs-item-title-hover-color: var(--ti-lowcode-base-text-color);
+  --ti-lowcode-setting-panel-tabs-item-title-color: var(--te-common-text-secondary);
+  --ti-lowcode-setting-panel-tabs-item-title-active-color: var(--te-common-text-primary);
+  --ti-lowcode-setting-panel-tabs-item-title-hover-color: var(--te-common-text-primary);
   // 插件设置面板左侧边框
-  --ti-lowcode-plugin-setting-panel-border-left-color: var(--ti-lowcode-common-border-color-4);
+  --ti-lowcode-plugin-setting-panel-border-left-color: var(--te-common-border-divider);
 }
 
 // 属性面板-属性-区块关联属性-新建区块属性popover
 .block-new-attr-popover {
-  --ti-lowcode-attr-popover-menu-item-hover-bg-color: var(--ti-lowcode-base-bg-1);
-  --ti-lowcode-attr-popover-menu-item-link-item-bg-color: var(--ti-lowcode-base-primary-color-2);
-  --ti-lowcode-attr-popover-menu-item-link-item-color: var(--ti-lowcode-base-gray-0);
-  --ti-lowcode-attr-popover-menu-item-color: var(--ti-lowcode-base-text-color);
-}
-
-// 属性面板-属性-区块关联属性 icon
-.block-link-field {
-  --ti-lowcode-block-link-field-link-icon-color: var(--ti-lowcode-base-gray-0);
-  --ti-lowcode-block-link-field-link-icon-bg-color: var(--ti-lowcode-base-success-color);
+  --ti-lowcode-attr-popover-menu-item-hover-bg-color: var(--te-common-text-secondary);
+  --ti-lowcode-attr-popover-menu-item-color: var(--te-common-text-primary);
 }
 
 .className-container {
-  --ti-lowcode-className-selector-container-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-className-selector-container-error-border-color: var(--ti-lowcode-base-error-color);
-  --ti-lowcode-className-selector-container-error-bg-color: rgba(242, 48, 48, 0.1);
-  --ti-lowcode-className-selector-error-tips-color: var(--ti-lowcode-base-error-color);
-  --ti-lowcode-className-selector-container-border-color: var(--ti-lowcode-base-gray-40);
-  --ti-lowcode-className-selector-container-hover-border-color: var(--ti-lowcode-base-gray-90);
-  --ti-lowcode-className-selector-container-empty-tips-color: var(--ti-lowcode-base-text-color-1);
-  --ti-lowcode-className-selector-container-label-bg-color: rgba(20, 118, 255, 0.1);
-  --ti-lowcode-className-selector-container-label-color: var(--ti-lowcode-base-primary-color-2);
-  --ti-lowcode-className-selector-container-option-btn-color: var(--ti-lowcode-base-primary-color-2);
-  --ti-lowcode-className-selector-dropdown-list-bg-color: var(--ti-lowcode-base-gray-0);
-  --ti-lowcode-className-selector-dropdown-list-item-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-className-selector-dropdown-list-item-active-bg-color: var(--ti-lowcode-base-gray-20);
-  --ti-lowcode-className-selector-title-color: var(--ti-lowcode-base-text-color);
+  --ti-lowcode-className-selector-container-color: var(--te-common-text-primary);
+  --ti-lowcode-className-selector-container-error-border-color: var(--te-common-color-error);
+  --ti-lowcode-className-selector-container-error-bg-color: var(--te-common-bg-error);
+  --ti-lowcode-className-selector-error-tips-color: var(--te-common-color-error);
+  --ti-lowcode-className-selector-container-border-color: var(--te-common-border-default);
+  --ti-lowcode-className-selector-container-hover-border-color: var(--te-common-border-hover);
+  --ti-lowcode-className-selector-container-empty-tips-color: var(--te-common-text-secondary);
+  --ti-lowcode-className-selector-container-label-bg-color: var(--te-base-blue-140);
+  --ti-lowcode-className-selector-container-label-color: var(--te-common-text-checked);
+  --ti-lowcode-className-selector-container-option-btn-color: var(--te-common-text-checked);
+  --ti-lowcode-className-selector-dropdown-list-bg-color: var(--te-common-bg-default);
+  --ti-lowcode-className-selector-dropdown-list-item-color: var(--te-common-text-primary);
+  --ti-lowcode-className-selector-dropdown-list-item-active-bg-color: var(--te-common-bg-container);
   --ti-lowcode-className-selector-dropdown-list-tips-color: var(--te-common-text-weaken);
 }
 
 :root {
-  --ti-lowcode-className-selector-del-popover-bg-color: var(--ti-lowcode-base-bg-5);
-  --ti-lowcode-className-selector-del-popover-title-color: var(--ti-lowcode-base-text-color);
+  --ti-lowcode-className-selector-del-popover-bg-color: var(--te-common-bg-default);
+  --ti-lowcode-className-selector-del-popover-title-color: var(--te-common-text-primary);
   --ti-lowcode-property-active-color: var(--te-common-bg-primary-checked);
 }
diff --git a/packages/theme/light/toolbar.less b/packages/theme/light/toolbar.less
index 057378c2a5..049c9e7ea8 100644
--- a/packages/theme/light/toolbar.less
+++ b/packages/theme/light/toolbar.less
@@ -1,17 +1,16 @@
 .tiny-engine-toolbar {
   // 头部工具栏
   --ti-lowcode-toolbar-border-bottom-color: var(--ti-lowcode-common-border-color-4);
-  --ti-lowcode-toolbar-media-bg: var(--ti-lowcode-common-component-bg);
+  --ti-lowcode-toolbar-media-bg: var(--te-common-bg-default);
   --ti-lowcode-toolbar-media-setting-border-color: var(--ti-lowcode-common-border-color-1);
-  --ti-lowcode-toolbar-title-color: var(--ti-lowcode-base-gray-90);
-  --ti-lowcode-toolbar-sub-title-color: var(--ti-lowcode-base-gray-60);
+  --ti-lowcode-toolbar-title-color: var(--te-common-text-primary);
+  --ti-lowcode-toolbar-sub-title-color: var(--te-common-text-secondary);
   --ti-lowcode-toolbar-hover-color: var(--te-common-bg-container);
   --ti-lowcode-toolbar-view-active-bg: rgb(235, 235, 235); // 相当于 规范中定义的 #191919 透明度5%
   --ti-lowcode-toolbar-left-icon-bg-hover: rgb(240, 240, 240);
-  --ti-lowcode-toolbar-popover-bg: var(--ti-lowcode-base-gray-0);
-  --ti-lowcode-toolbar-active-color: var(--ti-lowcode-base-gray-60);
-  --ti-lowcode-toolbar-user-img-border-color: var(--ti-lowcode-base-gray-20);
-  --ti-lowcode-toolbar-dot-color: var(--ti-lowcode-base-brand-color);
+  --ti-lowcode-toolbar-active-color: var(--te-common-text-secondary);
+  --ti-lowcode-toolbar-user-img-border-color: var(--te-common-border-divider);
+  --ti-lowcode-toolbar-dot-color: var(--te-common-color-error);
   --ti-lowcode-toolbar-collapsed-toolbar-bg: #f5f5f5;
   --ti-lowcode-toolbar-right-line: #ebebeb;
 }
diff --git a/packages/theme/light/tree.less b/packages/theme/light/tree.less
index aa0c30b1a0..86261271c9 100644
--- a/packages/theme/light/tree.less
+++ b/packages/theme/light/tree.less
@@ -1,8 +1,7 @@
 .outlinebox {
-  --ti-lowcode-tree-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-tree-icon-color: var(--ti-lowcode-base-primary-color-1);
-  --ti-lowcode-tree-icon-hover-color: var(--ti-lowcode-base-text-color-1);
-  --ti-lowcode-tree-selected-color: rgb(110, 81, 224);
-  --ti-lowcode-tree-selected-bg: rgb(240, 237, 252);
-  --ti-lowcode-tree-border-color: #ebebeb;
+  --ti-lowcode-tree-color: var(--te-common-text-primary);
+  --ti-lowcode-tree-icon-color: var(--te-common-icon-secondary);
+  --ti-lowcode-tree-selected-color: var(--te-base-indigo-50);
+  --ti-lowcode-tree-selected-bg: var(--te-base-indigo-10);
+  --ti-lowcode-tree-border-color: var(--te-common-border-default); // 亮色主题特有
 }
diff --git a/packages/theme/light/tutorial.less b/packages/theme/light/tutorial.less
index 39f0d5dbc2..4e963d5d35 100644
--- a/packages/theme/light/tutorial.less
+++ b/packages/theme/light/tutorial.less
@@ -1,5 +1,5 @@
 #tiny-engine-left-panel {
-  --ti-lowcode-tutorial-primary-text-color: var(--ti-lowcode-base-text-color-1);
-  --ti-lowcode-tutorial-primary-bg-color: var(--ti-lowcode-base-bg-5);
+  --ti-lowcode-tutorial-primary-text-color: var(--te-common-text-secondary);
+  --ti-lowcode-tutorial-primary-bg-color: var(--te-common-bg-default);
   --ti-lowcode-tutorial-hover-bg-color: var(--te-common-bg-container);
 }
diff --git a/packages/theme/light/variable.less b/packages/theme/light/variable.less
index aa5d12c92c..2e0bafc5fa 100644
--- a/packages/theme/light/variable.less
+++ b/packages/theme/light/variable.less
@@ -4,114 +4,75 @@
   --base-min-width: 1280px;
 
   // ------ 主要的公共主题色，前缀为 --ti-lowcode-common -------
-  --ti-lowcode-common-primary-color: var(--ti-lowcode-base-primary-color-2);
-  --ti-lowcode-common-primary-hover-color: var(--ti-lowcode-base-primary-color-2); // hover时，颜色不变
-  --ti-lowcode-common-component-bg: #fff;
-  --ti-lowcode-common-component-hover-bg: #f5f5f5;
-  --ti-lowcode-common-layout-bg: #fff;
-  --ti-lowcode-common-header-bg: #eee;
-  --ti-lowcode-common-primary-text-color: var(--ti-lowcode-base-text-color);
   --ti-lowcode-common-secondary-text-color: #c2c2c2;
-  --ti-lowcode-common-text-title-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-common-text-main-color: var(--ti-lowcode-base-text-color-1);
-  --ti-lowcode-common-text-placeholder-color: var(--ti-lowcode-base-text-color-1);
+  --ti-lowcode-common-text-placeholder-color: var(--te-common-text-secondary);
   --ti-lowcode-common-text-color-1: #6a6a6a;
   --ti-lowcode-common-text-color-2: #d9d9d9;
   --ti-lowcode-common-text-color-3: #fff;
   --ti-lowcode-common-text-color-4: #50d4ab;
-  --ti-lowcode-common-text-color-5: var(--ti-lowcode-base-text-color-3);
-  --ti-lowcode-common-text-color-6: var(--ti-lowcode-base-text-color-1);
+  --ti-lowcode-common-text-color-6: var(--te-common-text-secondary);
   --ti-lowcode-common-border-color-1: #dfe1e6;
   --ti-lowcode-common-border-color-3: #606165;
   --ti-lowcode-common-border-color-4: #dfe1e6;
-  --ti-lowcode-common-hover-bg-1: #f5f5f5;
   --ti-lowcode-common-third-text-color: #ababab;
-  --ti-lowcode-common-error-color: var(--ti-lowcode-base-error-color);
-  --ti-lowcode-common-empty-text-color: var(--ti-lowcode-base-gray-50);
-
-  --ti-lowcode-info-color: var(--ti-lowcode-base-prompt-color);
-  --ti-lowcode-warning-color: var(--ti-lowcode-base-warn-color);
-  --ti-lowcode-warning-color-1: var(--ti-lowcode-base-warn-color-1);
-  --ti-lowcode-dark-1: #464c59;
+  --ti-lowcode-common-empty-text-color: var(--te-common-text-weaken);
 
   // ------ 公共组件的主题色，前缀为 --ti-lowcode-component-组件名 -------
-  --ti-lowcode-component-btn-default-color: var(--ti-lowcode-base-primary-color-1); // 默认按钮颜色
-  --ti-lowcode-component-btn-default-disabled-color: var(--ti-lowcode-common-secondary-text-color); // 默认禁用颜色
-  --ti-lowcode-component-btn-default-hover-color: var(--ti-lowcode-common-text-main-color); // 默认按钮 hover 颜色
-  --ti-lowcode-component-btn-default-border-color: var(--ti-lowcode-base-primary-color-1); // 默认按钮边框色
-  --ti-lowcode-component-btn-default-border-hover-color: var(
-    --ti-lowcode-common-text-main-color
-  ); // 默认按钮 hover 边框色
-  --ti-lowcode-component-search-bg: #fff; // tinysearch  背景色
+
   // svgButton
-  --ti-lowcode-component-svg-button-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-component-svg-button-hover-color: var(--ti-lowcode-base-text-color);
+  --ti-lowcode-component-svg-button-color: var(--te-common-text-primary);
+  --ti-lowcode-component-svg-button-hover-color: var(--te-common-text-primary);
   --ti-lowcode-component-svg-button-hover-bg-color: var(--te-common-bg-prompt);
-  --ti-lowcode-component-svg-button-active-color: var(--ti-lowcode-base-text-color);
+  --ti-lowcode-component-svg-button-active-color: var(--te-common-text-primary);
   --ti-lowcode-component-svg-button-active-bg-color: var(--te-common-bg-prompt);
-
-  // 关闭按钮
-  --ti-lowcode-component-close-icon-text-color: var(--ti-lowcode-base-text-color); // 关闭按钮默认颜色
-  --ti-lowcode-component-close-icon-text-hover-color: var(
-    --ti-lowcode-common-primary-text-color
-  ); // 关闭按钮 hover 颜色
-
   // 插件面板
   --ti-lowcode-plugin-panel-title-color: rgb(25, 25, 25); // 插件面板标题色
   --ti-lowcode-plugin-panel-title-font-weight: 700; // 插件面板标题加粗效果
-  --ti-lowcode-plugin-panel-bg: var(--ti-lowcode-common-component-bg); // 插件面板背景色
+  --ti-lowcode-plugin-panel-bg: var(--te-common-bg-default); // 插件面板背景色
   --ti-lowcode-plugin-panel-border-right-color: var(--ti-lowcode-common-border-color-4); // 插件面板右侧边框色
   --ti-lowcode-plugin-panel-header-border-bottom-color: #ebebeb; // 插件面板头部区域底部边框线颜色
 
   // 插件设置面板
-  --ti-lowcode-plugin-setting-panel-bg: var(--ti-lowcode-common-component-bg); // 插件设置面板背景色
+  --ti-lowcode-plugin-setting-panel-bg: var(--te-common-bg-default); // 插件设置面板背景色
 
   // 设置面板
-  --ti-lowcode-component-setting-panel-label-color: var(--ti-lowcode-common-text-main-color);
-  --ti-lowcode-component-setting-panel-icon-color: var(--ti-lowcode-common-text-main-color);
+  --ti-lowcode-component-setting-panel-label-color: var(--te-common-text-secondary);
+  --ti-lowcode-component-setting-panel-icon-color: var(--te-common-text-secondary);
 
   // ------ 各个模块的主题色，前缀为 --ti-lowcode-模块名 -------
 
-  --ti-lowcode-design-plugin-color: var(--ti-lowcode-base-gray-90);
-  --ti-lowcode-design-toolbar-icon-color: #8a8e99;
+  --ti-lowcode-design-plugin-color: var(--te-common-text-weaken);
+  --ti-lowcode-design-plugin-icon-color: var(--te-common-icon-secondary);
 
   // 物料-组件列表
   --ti-lowcode-material-component-list-border-color: var(--ti-lowcode-common-border-color-4);
-  --ti-lowcode-material-component-list-hover-bg: var(--ti-lowcode-common-component-hover-bg);
+  --ti-lowcode-material-component-list-hover-bg: var(--te-common-bg-container);
 
   // 页面管理
-  --ti-lowcode-page-tree-color: var(--ti-lowcode-common-text-main-color);
-  --ti-lowcode-page-tree-hover-color: var(--ti-lowcode-common-primary-text-color);
+  --ti-lowcode-page-tree-color: var(--te-common-text-secondary);
+  --ti-lowcode-page-tree-hover-color: var(--te-common-text-primary);
 
   // 数据源
-  --ti-lowcode-datasource-list-color: var(--ti-lowcode-common-text-main-color);
+  --ti-lowcode-datasource-list-color: var(--te-common-text-secondary);
 
   // 状态管理
-  --ti-lowcode-data-list-color: var(--ti-lowcode-common-text-main-color);
+  --ti-lowcode-data-list-color: var(--te-common-text-secondary);
   // 状态管理面板头部的底部边框色
-  --ti-lowcode-data-header-border-bottom-color: var(--ti-lowcode-common-border-color-4);
-  // 状态管理示例背景色
-  --ti-lowcode-data-example-bg-color: var(--ti-lowcode-dark-1);
-  // 状态管理示例文字色
-  --ti-lowcode-data-example-color: var(--ti-lowcode-common-text-color-2);
+  --ti-lowcode-data-header-border-bottom-color: var(--te-common-border-divider);
   // 添加高级属性文字颜色
   --ti-lowcode-data-advanced-text-color: #252b3a;
   // 添加高级属性 hover 文字颜色
   --ti-lowcode-data-advanced-text-hover-color: #5073e5;
-  // 状态管理按激活背景色
-  --ti-lowcode-data-radio-group-active-bg: var(--ti-lowcode-base-gray-0);
   // 状态管理按背景色
   --ti-lowcode-data-radio-group-bg: transparent;
 
   // 教程
-  --ti-lowcode-tutorial-list-item-color: var(--ti-lowcode-common-text-main-color);
+  --ti-lowcode-tutorial-list-item-color: var(--te-common-text-secondary);
 
   // 头部工具栏背景色
   --ti-lowcode-toolbar-bg: #fafafa;
   // 头部工具栏选中背景色
   --ti-lowcode-toolbar-active-bg: transparent;
-  // 头部工具栏边框色
-  --ti-lowcode-toolbar-border-color: var(--ti-lowcode-base-default-button-border-color);
   // 头部工具栏icon颜色
   --ti-lowcode-toolbar-icon-color: #404040;
   // 头部工具栏icon颜色
@@ -121,34 +82,24 @@
   // 头部工具栏更多more图标hover颜色
   --ti-lowcode-toolbar-more-hover-color: var(--te-common-icon-secondary);
 
-  // 头部工具栏面包屑字体颜色
-  --ti-lowcode-toolbar-breadcrumb-color: var(--ti-lowcode-base-gray-60);
-  // 头部工具栏画布大小文本hover背景色 && 头部弹框背景色 && context-menu 背景色 && 大纲树节点hover背景色 && 日期组件背景色
-  --ti-lowcode-toolbar-view-hover-bg: #e9e9e9;
   // 头部工具栏i18n国际化字体颜色
   --ti-lowcode-toolbar-i18n-color: red;
   // 应用发布弹窗图标颜色
-  --ti-lowcode-toolbar-publish-icon-color: var(--ti-lowcode-common-primary-text-color);
+  --ti-lowcode-toolbar-publish-icon-color: var(--te-common-text-primary);
   // 头部左侧logo颜色
   --ti-lowcode-logo-color: #8a8e99;
   // 头部左侧logo颜色
   --ti-lowcode-logo-active-color: rgba(0, 0, 0, 0.5);
   // 中间画布边框色
   --ti-lowcode-canvas-border-color: #999;
-  // 右侧属性面板tab页签背景色
-  --ti-lowcode-tabs-bg: #ebebeb;
   // 右侧属性面板tab页签边框色
-  --ti-lowcode-tabs-border-color: #ddd;
+  --ti-lowcode-tabs-border-color: var(--te-common-border-default);
   // 右侧属性面板tab页签激活状态背景色
   --ti-lowcode-tabs-active-bg: #f3f3f3;
-  // 右侧属性面板折叠面板展开内容边框色
-  --ti-lowcode-collapse-active-border-color: #333;
-  // 中间画布外框容器背景色
-  --ti-lowcode-canvas-wrap-bg: #e5e5e5;
   // 中间画布拖拽宽度按钮背景色
   --ti-lowcode-canvas-handle-bg: red;
   // 中间画布拖拽宽度按钮背景色
-  --ti-lowcode-canvas-handle-hover-bg: #5e7ce0;
+  --ti-lowcode-canvas-handle-hover-bg: var(--te-common-bg-primary-checked);
   // 中间画布底部面包屑背景色
   --ti-lowcode-breadcrumb-bg: #fff;
   // 中间画布底部面包屑字体颜色
@@ -170,28 +121,10 @@
 
   // collapse 折叠面板激活后字体颜色
   --ti-lowcode-collapse-active-color: #252b3a;
-  // input 框背景色
-  --ti-lowcode-input-bg: #fff;
-  // switch 圆点背景色
-  --ti-lowcode-switch-after-bg: #fff;
-  // switch 圆点 hover 背景色
-  --ti-lowcode-switch-after-hover-bg: #f5f5f5;
-  // switch 圆点 checked 背景色
-  --ti-lowcode-switch-after-checked-bg: #fff;
 
   // -----下拉框相关主题配置-----
-  // 下拉框聚焦时边框颜色
-  --ti-lowcode-select-focus-border-color: var(--ti-lowcode-base-default-button-border-hover-color);
-  // 下拉框选中标签字体颜色
-  --ti-lowcode-select-tags-text-color: var(--ti-lowcode-base-text-color-3);
-  // 下拉框选中标签背景颜色
-  --ti-lowcode-select-tags-bg-color: #5959591a;
-  // 下拉框suffix图标悬浮颜色
-  --ti-lowcode-select-suffix-icon-color-hover: var(--ti-lowcode-base-text-color);
-  // 组件icon颜色
-  --ti-lowcode-component-icon-color: #8d8d8d;
   // 左侧插件激活背景色
-  --ti-lowcode-left-panel-active-bg: #f2f2f2;
+  --ti-lowcode-left-panel-active-bg: var(--te-base-blue-20);
   // 左侧插件激活边框色
   --ti-lowcode-left-panel-active-border-color: #999;
   // 左侧tabs按钮边框色
@@ -200,15 +133,9 @@
   // radio 按钮组激活背景色
   --ti-lowcode-radio-button-active-bg: #9d9d9d;
   // grid 布局设置按钮字体颜色
-  --ti-lowcode-grid-edit-color: #252b3a;
+  --ti-lowcode-grid-edit-color: var(--te-common-text-primary);
   // grid 布局设置按钮背景色
-  --ti-lowcode-grid-edit-bg: #fff;
-  // tooltip字体颜色
-  --ti-lowcode-tooltip-text-color: var(--ti-lowcode-base-text-color);
-  // tooltip背景颜色
-  --ti-lowcode-tooltip-bg-color: var(--ti-lowcode-base-bg-5);
-  // tooltip错误提示背景颜色
-  --ti-lowcode-tooltip-error-bg-color: var(--ti-lowcode-base-bg-5);
+  --ti-lowcode-grid-edit-bg: var(--te-common-bg-default);
 
   // Fit 字体颜色
   --ti-lowcode-fit-label-color: #252b3a;
@@ -223,7 +150,7 @@
   // main menu 背景色
   --ti-lowcode-main-menu-bg: #fff;
   // main menu hover 背景色
-  --ti-lowcode-main-menu-item-hover-bg: var(--ti-lowcode-common-primary-color);
+  --ti-lowcode-main-menu-item-hover-bg: var(--te-common-bg-primary-checked);
   --ti-lowcode-main-menu-item-hover-color: var(--ti-lowcode-common-text-color-3);
   // spacing svg 图标上下颜色
   --ti-lowcode-spacing-tb-color: #d1d1d1;
@@ -233,6 +160,8 @@
   --ti-lowcode-spacing-lr-color: #e5e5e5;
   // spacing svg 图标左右hover颜色
   --ti-lowcode-spacing-lr-hover-color: #dfdfdf;
+  --ti-lowcode-spacing-margin-color: var(--te-base-gray-10);
+  --ti-lowcode-spacing-padding-color: var(--te-base-gray-20);
   // spacing svg 图标边框颜色
   --ti-lowcode-spacing-border-color: #999;
   // position direction 字体颜色
@@ -270,117 +199,38 @@
   --ti-lowcode-breadcrumb-hover-bg: #fff;
   // 弹框中tip提示边框颜色
   --ti-lowcode-dialog-tip-border-color: #575d6c;
-  // 弹框字体颜色 && 左侧面板 title 字体颜色
-  --ti-lowcode-dialog-font-color: #333;
   // 输入框icon图标颜色
   --ti-lowcode-input-icon-color: #737373;
   // 弹框字体颜色 && 图标颜色 && 输入框 suffix 字体颜色
-  --ti-lowcode-text-color: #6a6a6a;
+  --ti-lowcode-text-color: var(--te-common-text-dark-inverse);
   // 右侧optionitem的边框色
-  --ti-lowcode-optionitem-border-color: #9f9f9f;
+  --ti-lowcode-optionitem-border-color: var(--te-common-border-default);
   // 右侧optionitem的背景色
-  --ti-lowcode-optionitem-background-color: #e5e5e5;
-  //tootip里的input框字体颜色
-  --ti-lowcode-tootip-input-color: #fff;
-  //tootip里的input背景颜色
-  --ti-lowcode-tootip-input-background-color: #363636;
+  --ti-lowcode-optionitem-background-color: var(--te-common-bg-default);
   //tootip里的input框边框颜色
-  --ti-lowcode-tootip-input-border-color: #b9b9b9;
-  //tootip里的input框箭头颜色
-  --ti-lowcode-tootip-arrow-border-color: #404040;
-  // dialogBox弹框示例框边框色
-  --ti-lowcode-dialog-demo-border-color: #5e5e5e;
+  --ti-lowcode-tootip-input-border-color: var(--te-common-border-default);
   // 关闭 icon 图标hover背景色 && 输入框后置文本hover背景色
-  --ti-lowcode-icon-hover-bg: rgba(255, 255, 255, 0.1);
-  // 说明提示框警告颜色
-  --ti-lowcode-description-warning-color: #facb4b;
-  // 说明提示框错误颜色
-  --ti-lowcode-description-error-color: #ff0000;
-  // switch checked状态边框色
-  --ti-lowcode-switch-checked-border-color: var(--ti-lowcode-common-primary-color);
-  // 文本链接颜色
-  --ti-lowcode-text-link-color: #6bb0ff;
+  --ti-lowcode-icon-hover-bg: rgba(255, 255, 255, 0.1); // 需要确认
   // 大纲树node节点选中背景色
-  --ti-lowcode-node-current-bg: var(--ti-lowcode-common-primary-color);
-  // 大纲树node节点不可拖拽背景色 && 表单校验错误边框色
-  --ti-lowcode-node-nodrag-bg: #ea384c;
-  // 成功状态按钮边框色
-  --ti-lowcode-success-border-color: #2ad986;
-  // 错误提示颜色
-  --ti-lowcode-error-tip-color: var(--ti-lowcode-base-error-color);
-  // 画布拖拽元素背景色
-  --ti-lowcode-drag-ghost-bg: #888;
-  // 画布拖拽位置线背景色
-  --ti-lowcode-ghost-line-bg: #ffb100;
+  --ti-lowcode-node-current-bg: var(--te-common-bg-primary-checked);
   // 描述颜色
-  --ti-lowcode-description-color: var(--ti-lowcode-common-text-color-4);
-  // 更多折叠面板头部hover背景色
-  --ti-lowcode-more-collapse-header-hover-color: #afafaf;
+  --ti-lowcode-description-color: var(--te-base-green-40);
   // 绑定时icon图标颜色
-  --ti-lowcode-icon-bind-color: #006cff;
-  // 创建字体颜色
-  --ti-lowcode-create-color: #575d6c;
-  // 删除按钮hover背景色 && 表单校验错误背景色
-  --ti-lowcode-delete-button-hover-bg: #c92c3f;
-  // input框focus 获焦时边框颜色
-  --ti-lowcode-input-focus-border-color: var(--ti-lowcode-base-default-button-border-hover-color);
-  // 次要描述字体颜色 && 面包屑label 字体颜色
-  --ti-lowcode-description-minor-color: #ababab;
+  --ti-lowcode-icon-bind-color: var(--te-common-text-checked);
   // 样式设置 label 字体颜色
   --ti-lowcode-style-setting-label-color: var(--te-common-bg-primary-checked);
   // 样式设置 label 背景颜色
-  --ti-lowcode-style-setting-label-bg: var(--te-base-blue-25);
-  // 多人协作item项hover背景色
-  --ti-lowcode-user-item-hover-bg: #f3f3f5;
-  // 多人协作人员头像背景色
-  --ti-lowcode-user-header-bg: #919191;
-  // 工具栏提示框字体颜色
-  --ti-lowcode-toolbar-popover-color: #363636;
-  // 工具栏 media 提示框字体颜色
-  --ti-lowcode-media-popover-color: var(--ti-lowcode-base-gray-60);
+  --ti-lowcode-style-setting-label-bg: var(--te-base-blue-140);
   // 工具栏 media 提示框标题字体颜色
-  --ti-lowcode-media-popover-title-color: #191919;
+  --ti-lowcode-media-popover-title-color: var(--te-common-text-primary);
   // 工具栏icon禁用颜色
-  --ti-lowcode-disabled-color: #c2c2c2;
-  // 状态管理详情收缩摩纳哥编辑器icon颜色
-  --ti-lowcode-state-management-screen-icon-color: #404040;
-  // 状态管理搜索无结果显示颜色
-  --ti-lowcode-state-management-query-color: #404040;
+  --ti-lowcode-disabled-color: var(--te-common-text-disabled);
   // 状态管理代码编辑器边框颜色
-  --ti-lowcode-state-management-monaco-editor-border-color: var(--ti-lowcode-base-gray-40);
-
-  // Popover提示框
-  --ti-lowcode-popover-color: var(--ti-lowcode-base-text-color);
-  // popover 弹框背景色
-  --ti-lowcode-popover-bg-color: #fff;
-  // 自定义类名lowcode弹框背景色
-  --ti-lowcode-custom-popover-bg-color: #fff;
-  // 自定义类名lowcode弹框字体颜色
-  --ti-lowcode-custom-popover-text-color: #191919;
-  // 自定义类名lowcode弹框边框颜色
-  --ti-lowcode-custom-popover-border-color: #fff;
+  --ti-lowcode-state-management-monaco-editor-border-color: var(--te-common-border-hover);
 
-  // 滚动条thumb颜色
-  --ti-lowcode-scrollbar-thumb-background-color: #e7e8e9;
-  // 可点击交互的文字颜色
-  --ti-lowcode-common-interaction-text-color: #5e7ce0;
   // 数字输入框组件下拉列表文字颜色
-  --ti-lowcode-numeric-unit-text-color: var(--ti-lowcode-text-color);
-
-  //左侧插件栏hover背景色
-  --ti-plugins-hover-bg-color: #fff;
-  //左侧插件栏hover边框色
-  --ti-plugins-hover-border-color: #9e9e9e;
-  //左侧插件栏hover文字色
-  --ti-plugins-hover-text-color: #4d4d4d;
-  // 表格行间背景色
-  --ti-lowcode-new-table-row-sepline-background: #f0f0f0;
+  --ti-lowcode-numeric-unit-text-color: var(--te-common-text-primary);
 
   // 查看指引视频
-  --ti-lowcode-block-video-tip-color: var(--ti-lowcode-base-primary-color-2);
-
-  // 右侧optionitem的边框色
-  --ti-lowcode-optionitem-border-color: rgba(0, 0, 0, 0.08);
-  // 右侧optionitem的背景色
-  --ti-lowcode-optionitem-background-color: #fff;
+  --ti-lowcode-block-video-tip-color: var(--te-common-text-link);
 }
diff --git a/packages/toolbars/collaboration/src/Main.vue b/packages/toolbars/collaboration/src/Main.vue
index 6e32284633..ef3aba6df5 100644
--- a/packages/toolbars/collaboration/src/Main.vue
+++ b/packages/toolbars/collaboration/src/Main.vue
@@ -120,7 +120,7 @@ export default {
     width: 100%;
     font-size: 14px;
     padding: 12px 20px;
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    color: var(--te-common-text-secondary);
     line-height: 18px;
     font-weight: 600;
   }
@@ -142,7 +142,7 @@ export default {
 
     .user-item-name {
       font-size: 14px;
-      color: var(--ti-lowcode-dialog-font-color);
+      color: var(--te-common-text-primary);
       line-height: 16px;
       font-weight: 400;
       margin: 0 4px 0 8px;
@@ -168,16 +168,5 @@ export default {
     z-index: 9;
     border: 1px solid var(--ti-lowcode-toolbar-user-img-border-color);
   }
-
-  .user-count {
-    height: 20px;
-    width: 20px;
-    color: var(--ti-lowcode-toolbar-icon-color);
-    background-color: var(--ti-lowcode-user-header-bg);
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
 }
 </style>
diff --git a/packages/toolbars/generate-code/src/FileSelector.vue b/packages/toolbars/generate-code/src/FileSelector.vue
index 9019806721..d220de8fb1 100644
--- a/packages/toolbars/generate-code/src/FileSelector.vue
+++ b/packages/toolbars/generate-code/src/FileSelector.vue
@@ -120,27 +120,27 @@ export default {
 <style lang="less" scoped>
 .dialog-box {
   :deep(.tiny-dialog-box__content) {
-    background-color: var(--ti-lowcode-common-component-bg);
+    background-color: var(--te-common-bg-default);
 
     .tiny-dialog-box__header {
-      background-color: var(--ti-lowcode-common-component-bg);
+      background-color: var(--te-common-bg-default);
 
       .tiny-dialog-box__title {
-        color: var(--ti-lowcode-toolbar-breadcrumb-color);
+        color: var(--te-common-text-secondary);
       }
 
       .tiny-dialog-box__headerbtn .tiny-dialog-box__close {
-        fill: var(--ti-lowcode-toolbar-breadcrumb-color) !important;
+        fill: var(--te-common-text-secondary) !important;
 
         &:hover {
-          fill: var(--ti-lowcode-common-primary-text-color) !important;
+          fill: var(--te-common-text-primary) !important;
         }
       }
     }
 
     .tiny-dialog-box__footer {
       .tiny-button--primary {
-        background-color: var(--ti-lowcode-common-danger-color, #191919;);
+        background-color: var(--te-common-bg-primary);
         border: none;
       }
     }
@@ -163,24 +163,19 @@ export default {
 
     :deep(.tiny-grid) {
       .tiny-grid__header-wrapper {
-        background-color: var(--ti-lowcode-toolbar-view-hover-bg);
-
         .tiny-grid-header__column {
-          color: var(--ti-lowcode-toolbar-breadcrumb-color);
+          color: var(--te-common-text-secondary);
           height: 30px;
 
           .tiny-grid-resizable.is__line:before {
-            background-color: var(--ti-lowcode-common-component-bg);
+            background-color: var(--te-common-bg-default);
           }
         }
 
-        .tiny-grid__repair {
-          border-color: var(--ti-lowcode-tabs-border-color);
-        }
-
-        .tiny-grid-checkbox__icon {
+        .tiny-grid-checkbox__icon,
+        .icon-checked-sur {
           svg {
-            color: var(--ti-lowcode-common-primary-color);
+            color: var(--te-common-border-checked) !important;
           }
         }
       }
@@ -205,30 +200,14 @@ export default {
         }
 
         .tiny-grid-body__row {
-          background-color: var(--ti-lowcode-common-component-bg);
-        }
-
-        .tiny-grid-body__row,
-        .tiny-grid-body__row:not(.row__hover):nth-child(2n) {
-          background-image: linear-gradient(
-            -180deg,
-            var(--ti-lowcode-new-table-row-sepline-background),
-            var(--ti-lowcode-new-table-row-sepline-background)
-          );
-          background-repeat: no-repeat;
-          background-size: 100% 1px;
-          background-position: 100% 100%;
-
-          &.row__current {
-            background-color: var(--ti-lowcode-toolbar-view-hover-bg);
-          }
+          background-color: var(--te-common-bg-default);
         }
 
         .tiny-grid-body__row {
           &.row__selected {
             .tiny-grid-checkbox__icon {
               svg {
-                color: var(--ti-lowcode-common-primary-color);
+                color: var(--te-common-border-checked);
                 width: 100%;
                 height: 100%;
               }
@@ -238,7 +217,7 @@ export default {
       }
 
       .tiny-grid__empty-text {
-        color: var(--ti-lowcode-toolbar-breadcrumb-color);
+        color: var(--te-common-text-secondary);
       }
     }
   }
diff --git a/packages/toolbars/logo/src/Main.vue b/packages/toolbars/logo/src/Main.vue
index c286ab35c9..5d5a451a1c 100644
--- a/packages/toolbars/logo/src/Main.vue
+++ b/packages/toolbars/logo/src/Main.vue
@@ -428,7 +428,7 @@ onUnmounted(() => {
       }
 
       &:hover {
-        background: var(--ti-lowcode-toolbar-view-hover-bg);
+        background: var(--te-common-bg-container);
       }
     }
   }
diff --git a/packages/toolbars/logout/src/Main.vue b/packages/toolbars/logout/src/Main.vue
index e9db18941a..c990d7e127 100644
--- a/packages/toolbars/logout/src/Main.vue
+++ b/packages/toolbars/logout/src/Main.vue
@@ -22,7 +22,7 @@ export default {
 
   span,
   a {
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    color: var(--te-common-text-secondary);
   }
 }
 </style>
diff --git a/packages/toolbars/media/src/Main.vue b/packages/toolbars/media/src/Main.vue
index 65c24e0441..9c8d0ac396 100644
--- a/packages/toolbars/media/src/Main.vue
+++ b/packages/toolbars/media/src/Main.vue
@@ -441,7 +441,7 @@ export default {
     height: var(--base-top-panel-height);
     line-height: var(--base-top-panel-height);
     padding: 0 7px;
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
+    color: var(--te-common-text-secondary);
     display: inline-block;
 
     & > span {
@@ -480,7 +480,7 @@ export default {
       }
       &.active {
         svg {
-          color: var(--ti-lowcode-common-primary-color);
+          color: var(--te-common-text-checked);
         }
       }
     }