diff --git a/packages/layout/src/Main.vue b/packages/layout/src/Main.vue
index fa2725c28..26f37747f 100644
--- a/packages/layout/src/Main.vue
+++ b/packages/layout/src/Main.vue
@@ -87,7 +87,7 @@ export default {
 #tiny-engine {
   display: flex;
   flex-flow: column;
-  min-width: var(--base-min-width);
+  min-width: var(--ti-common-min-width);
   height: 100vh;
   overflow: hidden;
   .tiny-engine-main {
diff --git a/packages/plugins/datasource/src/DataSourceField.vue b/packages/plugins/datasource/src/DataSourceField.vue
index 06bceb5ae..8bcb830f6 100644
--- a/packages/plugins/datasource/src/DataSourceField.vue
+++ b/packages/plugins/datasource/src/DataSourceField.vue
@@ -186,9 +186,9 @@ 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/DataSourceRecordList.vue b/packages/plugins/datasource/src/DataSourceRecordList.vue
index 85182023a..cc707d588 100644
--- a/packages/plugins/datasource/src/DataSourceRecordList.vue
+++ b/packages/plugins/datasource/src/DataSourceRecordList.vue
@@ -650,7 +650,7 @@ export default {
     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/DataSourceTemplate.vue b/packages/plugins/datasource/src/DataSourceTemplate.vue
index e3c49d068..8ab3d5fdd 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 {
diff --git a/packages/theme/base/src/base.less b/packages/theme/base/src/base.less
index c710b53e6..bb8f164a0 100644
--- a/packages/theme/base/src/base.less
+++ b/packages/theme/base/src/base.less
@@ -65,6 +65,9 @@
   --ti-lowcode-base-gray-58: #919191;
   --ti-lowcode-base-gray-59: #e7e8e9;
   --ti-lowcode-base-gray-60: #9e9e9e;
+  --ti-lowcode-base-gray-61: #63666c;
+  --ti-lowcode-base-gray-62: #858585;
+  --ti-lowcode-base-gray-63: #f6eeee;
 
   // black
   --ti-lowcode-base-dark-1: #1f1f1f;
@@ -81,8 +84,8 @@
   --ti-lowcode-base-dark-12: #2b2b2b;
   --ti-lowcode-base-dark-13: #262626;
   --ti-lowcode-base-dark-14: #222;
-
-  --ti-lowcode-base-dark-16: #292929;
+  --ti-lowcode-base-dark-15: #323644;
+  --ti-lowcode-base-dark-16: #1e1e1e;
   --ti-lowcode-base-dark-17: #292929;
   --ti-lowcode-base-dark-18: #3c3c3c;
   --ti-lowcode-base-dark-19: #313131;
@@ -115,6 +118,7 @@
   --ti-lowcode-base-red-18: #ff0000;
   --ti-lowcode-base-red-19: #ea384c;
   --ti-lowcode-base-red-20: #c92c3f;
+  --ti-lowcode-base-red-21: #de504e;
 
   // expand-orange
   --ti-lowcode-base-orange-1: #fff5e8;
@@ -149,6 +153,7 @@
   --ti-lowcode-base-yellow-12: #d4b57f;
   --ti-lowcode-base-yellow-13: #e6d3b8;
   --ti-lowcode-base-yellow-14: #501c1c;
+  --ti-lowcode-base-yellow-15: #8d5421;
 
   // expand-lemon
   --ti-lowcode-base-lemon-1: #fcfae8;
@@ -267,6 +272,7 @@
   --ti-lowcode-base-blue-21: #6bb0ff;
   --ti-lowcode-base-blue-22: #006cff;
   --ti-lowcode-base-blue-23: #8bbefa;
+  --ti-lowcode-base-blue-24: #476be5;
 
   // expand-indigo
   --ti-lowcode-base-indigo-1: #eee8ff;
@@ -328,6 +334,7 @@
   --ti-lowcode-base-rose-11: #993d6e;
   --ti-lowcode-base-rose-12: #cc7aa6;
   --ti-lowcode-base-rose-13: #e6b8d2;
+  --ti-lowcode-base-rose-14: #f66f6a;
 
   // 公司品牌色
   --ti-lowcode-base-brand-color: #c7000b;
@@ -372,6 +379,7 @@
   --ti-lowcode-base-dark-text-link-color-1: #a6a6a6;
 
   // 按钮边框色
+  --ti-lowcode-base-button-border-none: none;
   --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;
@@ -396,6 +404,19 @@
   --ti-lowcode-base-rgba-7: rgba(200, 200, 200, 0.2);
   --ti-lowcode-base-rgba-8: rgba(255, 255, 255, 0.1);
   --ti-lowcode-base-rgba-9: rgba(76, 152, 241, 0.15);
+  --ti-lowcode-base-rgba-10: rgba(173, 176, 184, 0.6);
+  --ti-lowcode-base-rgba-11: rgba(0, 255, 0, 0.1);
+  --ti-lowcode-base-rgba-12: rgba(242, 48, 48, 0.3);
+  --ti-lowcode-base-rgba-13: rgba(255, 255, 255, 0.08);
+  --ti-lowcode-base-rgba-14: rgba(246, 111, 106, 0.1);
+  --ti-lowcode-base-rgba-15: rgba(217, 217, 217, 0.8);
+  --ti-lowcode-base-rgba-16: rgba(0, 179, 54, 0.6);
+  --ti-lowcode-base-rgba-17: rgba(217, 217, 217, 0.4);
+  --ti-lowcode-base-rgba-18: rgba(255, 255, 255, 0.4);
+  --ti-lowcode-base-rgba-19: rgba(255, 255, 255, 0.5);
+  --ti-lowcode-base-rgba-20: rgba(94, 94, 94, 0.8);
+  --ti-lowcode-base-rgba-21: rgba(121, 121, 121, 0.4);
+  --ti-lowcode-base-rgba-22: rgba(138, 142, 153, 0.99);
 
   // 状态色
   --ti-lowcode-base-error-color: #f23030;
diff --git a/packages/theme/base/src/common.less b/packages/theme/base/src/common.less
index 4921c4046..ebc4c9a02 100644
--- a/packages/theme/base/src/common.less
+++ b/packages/theme/base/src/common.less
@@ -47,6 +47,42 @@
   --ti-lowcode-common-component-bg-43: var(--ti-lowcode-base-blue-20);
   --ti-lowcode-common-component-bg-44: var(--ti-lowcode-base-rgba-7);
   --ti-lowcode-common-component-bg-45: var(--ti-lowcode-base-red-19);
+  --ti-lowcode-common-component-bg-46: var(--ti-lowcode-base-dark-18);
+  --ti-lowcode-common-component-bg-47: var(--ti-lowcode-base-dark-8);
+  --ti-lowcode-common-component-bg-48: var(--ti-lowcode-base-yellow-15);
+  --ti-lowcode-common-component-bg-49: var(--ti-lowcode-base-dark-17);
+  --ti-lowcode-common-component-bg-50: var(--ti-lowcode-base-dark-15);
+  --ti-lowcode-common-component-bg-51: var(--ti-lowcode-base-dark-12);
+  --ti-lowcode-common-component-bg-52: var(--ti-lowcode-base-dark-13);
+  --ti-lowcode-common-component-bg-53: var(--ti-lowcode-base-rgba-11);
+  --ti-lowcode-common-component-bg-54: var(--ti-lowcode-base-rgba-12);
+  --ti-lowcode-common-component-bg-55: var(--ti-lowcode-base-gray-29);
+  --ti-lowcode-common-component-bg-56: var(--ti-lowcode-base-blue-14);
+  --ti-lowcode-common-component-bg-57: var(--ti-lowcode-base-dark-22);
+  --ti-lowcode-common-component-bg-58: var(--ti-lowcode-base-gray-43);
+  --ti-lowcode-common-component-bg-59: var(--ti-lowcode-base-gray-25);
+  --ti-lowcode-common-component-bg-60: var(--ti-lowcode-base-kelly-6);
+  --ti-lowcode-common-component-bg-61: var(--ti-lowcode-base-dark-1);
+  --ti-lowcode-common-component-bg-62: var(--ti-lowcode-base-dark-bg-6);
+  --ti-lowcode-common-component-bg-63: var(--ti-lowcode-base-dark-16);
+  --ti-lowcode-common-component-bg-64: var(--ti-lowcode-base-rgba-14);
+  --ti-lowcode-common-component-bg-65: var(--ti-lowcode-base-dark-bg-3);
+  --ti-lowcode-common-component-bg-66: var(--ti-lowcode-base-dark-14);
+  --ti-lowcode-common-component-bg-67: var(--ti-lowcode-base-dark-bg-2);
+  --ti-lowcode-common-component-bg-68: var(--ti-lowcode-base-dark-bg-5);
+  --ti-lowcode-common-component-bg-69: var(--ti-lowcode-base-dark-24);
+  --ti-lowcode-common-component-bg-70: var(--ti-lowcode-base-gray-4);
+  --ti-lowcode-common-component-bg-71: var(--ti-lowcode-base-dark-9);
+  --ti-lowcode-common-component-bg-72: var(--ti-lowcode-base-dark-20);
+  --ti-lowcode-common-component-bg-73: var(--ti-lowcode-base-rgba-16);
+  --ti-lowcode-common-component-bg-74: var(--ti-lowcode-base-rgba-19);
+  --ti-lowcode-common-component-bg-75: var(--ti-lowcode-base-dark-25);
+  --ti-lowcode-common-component-bg-76: var(--ti-lowcode-base-gray-34);
+  --ti-lowcode-common-component-bg-77: var(--ti-lowcode-base-gray-12);
+  --ti-lowcode-common-component-bg-78: var(--ti-lowcode-base-dark-7);
+  --ti-lowcode-common-component-bg-79: var(--ti-lowcode-base-dark-5);
+  --ti-lowcode-common-component-bg-80: var(--ti-lowcode-base-rgba-21);
+  --ti-lowcode-common-component-bg-81: var(--ti-lowcode-base-rgba-20);
 
   // 文本
   --ti-lowcode-common-primary-text-color: var(--ti-lowcode-base-dark-5);
@@ -90,8 +126,37 @@
   --ti-lowcode-common-text-color-32: var(--ti-lowcode-base-blue-23);
   --ti-lowcode-common-text-color-33: var(--ti-lowcode-base-blue-20);
   --ti-lowcode-common-text-color-34: var(--ti-lowcode-base-gray-25);
+  --ti-lowcode-common-text-color-35: var(--ti-lowcode-base-gray-21);
+  --ti-lowcode-common-text-color-36: var(--ti-lowcode-base-blue-24);
+  --ti-lowcode-common-text-color-37: var(--ti-lowcode-base-gray-61);
+  --ti-lowcode-common-text-color-38: var(--ti-base-color-transparent);
+  --ti-lowcode-common-text-color-39: var(--ti-lowcode-base-gray-11);
+  --ti-lowcode-common-text-color-40: var(--ti-lowcode-base-gray-45);
+  --ti-lowcode-common-text-color-41: var(--ti-lowcode-base-dark-text-color);
+  --ti-lowcode-common-text-color-42: var(--ti-lowcode-base-red-21);
+  --ti-lowcode-common-text-color-43: var(--ti-lowcode-base-gray-23);
+  --ti-lowcode-common-text-color-44: var(--ti-lowcode-base-gray-9);
+  --ti-lowcode-common-text-color-45: var(--ti-lowcode-base-gray-7);
+  --ti-lowcode-common-text-color-46: var(--ti-lowcode-base-gray-47);
+  --ti-lowcode-common-text-color-47: var(--ti-lowcode-base-dark-18);
+  --ti-lowcode-common-text-color-48: var(--ti-lowcode-base-blue-15);
+  --ti-lowcode-common-text-color-49: var(--ti-lowcode-base-dark-8);
+  --ti-lowcode-common-text-color-50: var(--ti-lowcode-base-gray-29);
+  --ti-lowcode-common-text-color-51: var(--ti-lowcode-base-rgba-15);
+  --ti-lowcode-common-text-color-52: var(--ti-lowcode-base-rgba-17);
+  --ti-lowcode-common-text-color-53: var(--ti-lowcode-base-rgba-18);
+  --ti-lowcode-common-text-color-54: var(--ti-lowcode-base-rgba-19);
+  --ti-lowcode-common-text-color-55: var(--ti-lowcode-base-gray-62);
+  --ti-lowcode-common-text-color-56: var(--ti-lowcode-base-gray-24);
+  --ti-lowcode-common-text-color-57: var(--ti-lowcode-base-gray-27);
+  --ti-lowcode-common-text-color-58: var(--ti-lowcode-base-gray-28);
+  --ti-lowcode-common-text-color-59: var(--ti-lowcode-base-gray-38);
+  --ti-lowcode-common-text-color-60: var(--ti-lowcode-base-gray-63);
+  --ti-lowcode-common-text-color-61: var(--ti-lowcode-base-red-14);
+  --ti-lowcode-common-text-color-62: var(--ti-lowcode-base-rgba-22);
 
   // 边框
+  --ti-lowcode-common-border-none: var(--ti-lowcode-base-button-border-none);
   --ti-lowcode-common-border-color-1: var(--ti-lowcode-base-gray-9);
   --ti-lowcode-common-border-color-2: var(--ti-lowcode-base-gray-6);
   --ti-lowcode-common-border-color-3: var(--ti-lowcode-base-gray-35);
@@ -117,6 +182,26 @@
   --ti-lowcode-common-border-color-23: var(--ti-lowcode-base-gray-29);
   --ti-lowcode-common-border-color-24: var(--ti-lowcode-base-green-15);
   --ti-lowcode-common-border-color-25: var(--ti-lowcode-base-gray-60);
+  --ti-lowcode-common-border-color-26: var(--ti-lowcode-base-dark-9);
+  --ti-lowcode-common-border-color-27: var(--ti-lowcode-base-dark-13);
+  --ti-lowcode-common-border-color-28: var(--ti-lowcode-base-dark-19);
+  --ti-lowcode-common-border-color-29: var(--ti-lowcode-base-blue-14);
+  --ti-lowcode-common-border-color-30: var(--ti-lowcode-base-dark-text-color);
+  --ti-lowcode-common-border-color-31: var(--ti-lowcode-base-dark-6);
+  --ti-lowcode-common-border-color-32: var(--ti-lowcode-base-dark-12);
+  --ti-lowcode-common-border-color-33: var(--ti-lowcode-base-rgba-13);
+  --ti-lowcode-common-border-color-34: var(--ti-lowcode-base-gray-44);
+  --ti-lowcode-common-border-color-35: var(--ti-lowcode-base-rose-14);
+  --ti-lowcode-common-border-color-36: var(--ti-lowcode-base-rgba-8);
+  --ti-lowcode-common-border-color-37: var(--ti-lowcode-base-gray-21);
+  --ti-lowcode-common-border-color-38: var(--ti-lowcode-base-gray-34);
+  --ti-lowcode-common-border-color-39: var(--ti-lowcode-base-gray-31);
+  --ti-lowcode-common-border-color-40: var(--ti-lowcode-base-mint-14);
+  --ti-lowcode-common-border-color-41: var(--ti-lowcode-base-gray-23);
+  --ti-lowcode-common-border-color-42: var(--ti-lowcode-base-dark-2);
+  --ti-lowcode-common-border-color-43: var(--ti-lowcode-base-dark-22);
+  --ti-lowcode-common-border-color-44: var(--ti-lowcode-base-gray-12);
+  --ti-lowcode-common-border-color-45: var(--ti-lowcode-base-dark-21);
 
   // 提示
   --ti-lowcode-common-primary-color: var(--ti-lowcode-base-blue-6);
@@ -157,6 +242,7 @@
 
   // 权重值
   --ti-lowcode-common-font-weight-normal: var(--ti-lowcode-base-font-weight-bold);
+  --ti-lowcode-common-font-weight-400: var(--ti-lowcode-base-font-weight-4);
 
   // 其他
   --ti-lowcode-common-dark-1: var(--ti-lowcode-base-dark-1);
@@ -175,5 +261,6 @@
   --ti-lowcode-common-text-hover: var(--ti-lowcode-base-blue-17);
   --ti-lowcode-common-component-hover-bg: var(--ti-lowcode-base-gray-5);
   --ti-lowcode-common-rgba-1: var(--ti-lowcode-base-rgba-1);
+  --ti-lowcode-common-rgba-10: var(--ti-lowcode-base-rgba-10);
   --ti-lowcode-common-color-unset: var(--ti-base-color-unset);
 }
diff --git a/packages/theme/common/global.less b/packages/theme/common/global.less
index aaeef86fb..e570c6b77 100644
--- a/packages/theme/common/global.less
+++ b/packages/theme/common/global.less
@@ -590,7 +590,7 @@
   }
 
   &.tiny-pager__selector {
-    background-color: var(--ti-lowcode-common-hover-bg-1);
+    background-color: var(--ti-lowcode-common-component-bg-25);
 
     .tiny-pager__selector-poplist {
       background: var(--ti-lowcode-toolbar-view-hover-bg);
diff --git a/packages/theme/dark/block.less b/packages/theme/dark/block.less
index 2b43fe9cb..813f5e724 100644
--- a/packages/theme/dark/block.less
+++ b/packages/theme/dark/block.less
@@ -1,57 +1,59 @@
 :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(--ti-lowcode-common-border-color-26); // 组件边框色
   // 组件 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(--ti-lowcode-common-component-bg-46);
   // 组件默认颜色
-  --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(--ti-lowcode-common-text-color-35);
   // 预览还原 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(--ti-lowcode-common-text-color-3);
+  --ti-lowcode-component-block-history-list-item-btn-hover-bg: var(
+    --ti-lowcode-common-component-bg-25
+  ); // 预览还原背景色
   // 预览还原边框色
   --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-time-color: var(--ti-lowcode-common-rgba-10); // 组件时间颜色
 
   // 区块列表
-  --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-item-color: var(--ti-lowcode-common-text-color-35); // 区块列表颜色
+  --ti-lowcode-component-block-list-shortcut-title-color: var(--ti-lowcode-common-text-color-3); // 快照标题颜色
+  --ti-lowcode-component-block-list-shortcut-bg: var(--ti-lowcode-common-component-bg-47); // 快照标题颜色
   --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-active-bg: var(--ti-lowcode-common-component-bg-46); // 区块 active 背景色
+  --ti-lowcode-component-block-list-item-tag-bg: var(--ti-lowcode-common-component-bg-48);
+  --ti-lowcode-component-block-version-list-item-border-color: var(--ti-lowcode-common-component-bg-29);
+  --ti-lowcode-component-block-version-list-item-bg: var(--ti-lowcode-common-component-bg-49);
+  --ti-lowcode-component-block-version-list-version-bg: var(--ti-lowcode-common-component-bg-50);
+  --ti-lowcode-component-block-version-list-version-color: var(--ti-lowcode-common-text-color-36);
+  --ti-lowcode-component-block-version-list-panel-title-color: var(--ti-lowcode-common-text-color-3);
+  --ti-lowcode-component-block-version-list-time-color: var(--ti-lowcode-common-text-color-14);
+  --ti-lowcode-component-block-version-list-desc-color: var(--ti-lowcode-common-text-color-37);
+  --ti-lowcode-component-block-version-list-current-version-color: var(--ti-lowcode-common-primary-color);
+  --ti-lowcode-component-block-setting-popover-bg: var(--ti-lowcode-common-component-bg-29);
+  --ti-lowcode-component-block-setting-item-hover-bg: var(--ti-lowcode-common-component-bg-29);
+  --ti-lowcode-component-block-setting-item-text-color: var(--ti-lowcode-common-text-color-35);
   // 区块管理 - 添加分类
-  --ti-lowcode-component-block-list-add-group-btn-bg: var(--ti-lowcode-common-header-bg);
-  --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-add-group-btn-bg: var(--ti-lowcode-common-component-bg-29);
+  --ti-lowcode-component-block-list-add-group-btn-border: var(--ti-lowcode-common-border-none);
+  --ti-lowcode-component-block-list-setting-btn-color: var(--ti-lowcode-common-text-color-14);
   --ti-lowcode-component-block-list-setting-btn-hover-color: var(--ti-lowcode-common-primary-color);
-  --ti-lowcode-component-block-list-add-group-btn-border-radius: none;
+  --ti-lowcode-component-block-list-add-group-btn-border-radius: var(--ti-lowcode-common-border-none);
 }
 
 .block-setting-content {
-  --ti-lowcode-block-config-form-item-color: var(--ti-lowcode-toolbar-breadcrumb-color);
+  --ti-lowcode-block-config-form-item-color: var(--ti-lowcode-common-text-color-2);
 
   .tiny-form-item.is-error .tiny-input__inner {
-    background-color: var(--ti-lowcode-tabs-bg);
+    background-color: var(--ti-lowcode-common-component-bg-51);
   }
 }
 
 // 区块设置 - 标签
 .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(--ti-lowcode-common-text-color-2);
+  --ti-lowcode-block-config-tag-bg: var(--ti-lowcode-common-component-bg-52);
+  --ti-lowcode-block-config-tag-hover-color: var(--ti-lowcode-common-text-color-3);
+  --ti-lowcode-block-config-tag-hover-bg: var(--ti-lowcode-common-bg-0);
+  --ti-lowcode-block-config-tag-close-color: var(--ti-lowcode-common-text-color-3);
 }
diff --git a/packages/theme/dark/bridge.less b/packages/theme/dark/bridge.less
index 44dea9e3b..d7c07e315 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(--ti-lowcode-common-text-color-35);
+  --ti-lowcode-bridge-list-bg: var(--ti-lowcode-common-component-bg-46);
+  --ti-lowcode-birdge-editor-border-color: var(--ti-lowcode-common-border-color-27);
+  --ti-lowcode-birdge-input-label-color: var(--ti-lowcode-common-text-color-35);
 
   // 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(--ti-lowcode-common-text-color-2);
+  --ti-lowcode-birdge-code-preview-bg-color: var(--ti-lowcode-common-component-bg-52);
 }
diff --git a/packages/theme/dark/canvas.less b/packages/theme/dark/canvas.less
index 9201f8342..61d57e24c 100644
--- a/packages/theme/dark/canvas.less
+++ b/packages/theme/dark/canvas.less
@@ -1,28 +1,26 @@
 #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-corner-mark-left-color: var(--ti-lowcode-base-text-color-2);
-  --ti-lowcode-canvas-corner-mark-bottom-right-color: var(--ti-lowcode-base-text-color-3);
-  --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-rect-border-color: var(--ti-lowcode-common-border-color-6);
+  --ti-lowcode-canvas-hover-line-in-bg-color: var(--ti-lowcode-common-component-bg-53);
+  --ti-lowcode-canvas-hover-line-forbid-bg-color: var(--ti-lowcode-common-component-bg-7);
+  --ti-lowcode-canvas-hover-line-in-forbid-bg-color: var(--ti-lowcode-common-component-bg-54);
+  --ti-lowcode-canvas-choose-slot-border-color: var(--ti-lowcode-common-border-color-6);
+  --ti-lowcode-canvas-choose-slot-color: var(--ti-lowcode-common-primary-color);
+  --ti-lowcode-canvas-corner-mark-left-color: var(--ti-lowcode-common-primary-color);
+  --ti-lowcode-canvas-corner-mark-bottom-right-color: var(--ti-lowcode-common-text-color-5);
+  --ti-lowcode-canvas-corner-mark-bottom-right-border-color: var(--ti-lowcode-common-border-color-13);
+  --ti-lowcode-canvas-corner-mark-bottom-right-bg-color: var(--ti-lowcode-common-component-bg-1);
+  --ti-lowcode-canvas-corner-mark-right-color: var(--ti-lowcode-common-text-color-3);
+  --ti-lowcode-canvas-corner-mark-right-bg-color: var(--ti-lowcode-common-component-bg-9);
+  --ti-lowcode-canvas-select-corner-mark-left-color: var(--ti-lowcode-common-text-color-3);
+  --ti-lowcode-canvas-select-corner-mark-left-bg-color: var(--ti-lowcode-common-component-bg-9);
 
-  --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-footer-border-top-color: var(--ti-lowcode-common-text-color-38); // canvas 底部面包屑 边框色
+  --ti-lowcode-canvas-tab-handle-bg: var(--ti-lowcode-common-component-bg-47); // 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-menu-item-disabled-color: var(--ti-lowcode-base-text-color-3);
+  --ti-lowcode-canvas-tab-handle-color: var(--ti-lowcode-common-text-color-35); // canvas 宽度拖动手柄 两条竖线颜色
+  --ti-lowcode-canvas-menu-bg: var(--ti-lowcode-common-component-bg-46); // canvas 右键菜单背景
+  --ti-lowcode-canvas-menu-item-color: var(--ti-lowcode-common-text-color-35); // 右键菜单文字颜色
+  --ti-lowcode-canvas-menu-item-hover-bg-color: var(--ti-lowcode-common-component-bg-55);
+  --ti-lowcode-canvas-menu-border-color: var(--ti-lowcode-common-border-color-28);
+  --ti-lowcode-canvas-menu-item-disabled-color: var(--ti-lowcode-common-text-color-14);
 }
diff --git a/packages/theme/dark/datasource.less b/packages/theme/dark/datasource.less
index 2ad563e6e..a4ccb68dd 100644
--- a/packages/theme/dark/datasource.less
+++ b/packages/theme/dark/datasource.less
@@ -1,44 +1,46 @@
 :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-toolbar-icon-color: var(--ti-lowcode-common-text-color-3);
+  --ti-lowcode-datasource-tabs-border-color: var(--ti-lowcode-common-border-color-28);
+  --ti-lowcode-datasource-toolbar-breadcrumb-color: var(--ti-lowcode-common-text-color-2);
+  --ti-lowcode-datasource-json-border-color: var(--ti-lowcode-common-border-color-29);
+  --ti-lowcode-datasource-tree-border-color: var(--ti-lowcode-common-border-color-24);
+  --ti-lowcode-datasource-common-primary-color: var(--ti-lowcode-common-text-color-17);
+  --ti-lowcode-datasource-success-border-color: var(--ti-lowcode-common-border-color-24);
+  --ti-lowcode-datasource-input-icon-color: var(--ti-lowcode-common-text-color-29);
+  --ti-lowcode-datasource-dialog-demo-border-color: var(--ti-lowcode-common-border-color-23);
+  --ti-lowcode-datasource-canvas-wrap-bg: var(--ti-lowcode-common-component-bg-55);
+  --ti-lowcode-datasource-dialog-font-color: var(--ti-lowcode-common-text-color-39);
+  --ti-lowcode-datasource-toolbar-bg: var(--ti-lowcode-common-component-bg-57);
+  --ti-lowcode-datasource-description-error-color: var(--ti-lowcode-common-error-color-1);
+  --ti-lowcode-datasource-common-text-main-color: var(--ti-lowcode-common-text-color-39);
+  --ti-lowcode-datasource-toolbar-more-hover-color: var(--ti-lowcode-common-text-color-39);
+  --ti-lowcode-datasource-delete-button-hover-bg: var(--ti-lowcode-common-component-bg-38);
+  --ti-lowcode-datasource-common-text-color-5: var(--ti-lowcode-common-text-color-14);
+  --ti-lowcode-datasource-common-empty-color: var(--ti-lowcode-common-text-color-40);
+
+  --ti-lowcode-datasource-toolbar-view-hover-bg: var(--ti-lowcode-common-component-bg-59);
+  --ti-lowcode-datasource-common-hover-bg-1: var(--ti-lowcode-common-component-bg-35);
+  --ti-lowcode-datasource-common-primary-text-color: var(--ti-lowcode-common-text-color-41);
+  --ti-lowcode-datasource-icon-hover-bg: var(--ti-lowcode-common-text-color-41);
+  --ti-lowcode-datasource-tabs-bg: var(--ti-lowcode-common-component-bg-51);
+  --ti-lowcode-datasource-canvas-handle-hover-bg: var(--ti-lowcode-common-component-bg-56);
+  --ti-lowcode-datasource-tabs-active-bg: var(--ti-lowcode-common-component-bg-51);
   --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-description-minor-color: var(--ti-lowcode-common-third-text-color);
+  --ti-lowcode-datasource-description-warning-color: var(--ti-lowcode-common-warning-color-2);
+  --ti-lowcode-datasource-error-tip-color: var(--ti-lowcode-common-text-color-42);
+  --ti-lowcode-datasource-label-color: var(--ti-lowcode-common-text-color-35); // light
+  --ti-lowcode-datasource-list-hover-color: var(--ti-lowcode-common-component-bg-46);
+  --ti-lowcode-datasource-btn-click-color: var(--ti-lowcode-common-text-color-14);
+
+  --ti-lowcode-datasource-btn-border-color: var(--ti-lowcode-common-border-color-30);
+  --ti-lowcode-datasource-tabs-bottom-border-color: var(--ti-lowcode-common-text-color-17);
+  --ti-lowcode-datasource-list-bottom-border-color: var(--ti-lowcode-common-border-color-31);
+  --ti-lowcode-datasource-switch-off-bg-color: var(--ti-lowcode-common-component-bg-58);
+  --ti-lowcode-datasource-switch-on-bg-color: var(--ti-lowcode-common-component-bg-9);
+  --ti-lowcode-datasource-respones-select-color-bg: var(--ti-lowcode-common-component-bg-52);
+  --ti-lowcode-datasource-respones-color-bg: var(--ti-lowcode-common-component-bg-9);
+  --ti-lowcode-datasource-respones-border-color-bg: var(--ti-lowcode-common-component-bg-2);
+  --ti-lowcode-datasource-select-border-right-color-bg: var(--ti-lowcode-common-component-bg-58);
+  --ti-lowcode-datasource-select-border-color: var(--ti-lowcode-common-border-color-32);
 }
diff --git a/packages/theme/dark/events.less b/packages/theme/dark/events.less
index db31330fd..2053fed03 100644
--- a/packages/theme/dark/events.less
+++ b/packages/theme/dark/events.less
@@ -1,36 +1,36 @@
 .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(--ti-lowcode-common-text-color-41);
+  --ti-lowcode-event-add-custom-event-tips-highlight-color: var(--ti-lowcode-common-warning-color);
 }
 .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(--ti-lowcode-common-text-color-41);
+  --ti-lowcode-events-bind-event-list-item-disabled-color: var(--ti-lowcode-common-text-color-6);
+  --lowcode-events-bind-event-list-item-hover-bg-color: var(--ti-lowcode-common-component-bg-13);
 }
 .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-empty-action-color: var(--ti-lowcode-base-text-color-1);
-  --ti-lowcode-events-empty-action-tips-strong-color: var(--ti-lowcode-base-warn-color);
+  --ti-lowcode-events-bind-action-item-border-color: var(--ti-lowcode-common-border-color-33);
+  --ti-lowcode-events-event-bind-color: var(--ti-lowcode-common-primary-color);
+  --ti-lowcode-events-bind-action-item-color: var(--ti-lowcode-common-text-color-41);
+  --ti-lowcode-events-bind-action-item-hover-bg-color: var(--ti-lowcode-common-component-bg-13);
+  --ti-lowcode-events-bind-action-item-linked-bg-color: var(--ti-lowcode-common-component-bg-60);
+  --ti-lowcode-events-bind-action-item-linked-color: var(--ti-lowcode-common-text-color-3);
+  --ti-lowcode-events-empty-action-color: var(--ti-lowcode-common-text-color-43);
+  --ti-lowcode-events-empty-action-tips-strong-color: var(--ti-lowcode-common-warning-color);
 }
 
 .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(--ti-lowcode-common-text-color-41);
+  --ti-lowcode-events-advanced-label-color: var(--ti-lowcode-common-text-color-43);
+  --ti-lowcode-events-advanced-binding-state-bg-color: var(--ti-lowcode-common-component-bg-9);
+  --ti-lowcode-events-advanced-binding-state-color: var(--ti-lowcode-common-text-color-3);
 }
 
 .bind-event-dialog-content {
-  --ti-lowcode-bind-event-dialog-color: var(--ti-lowcode-base-text-color);
-  --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-color: var(--ti-lowcode-common-text-color-41);
+  --ti-lowcode-bind-event-dialog-content-left-border-color: var(--ti-lowcode-common-border-color-33);
+  --ti-lowcode-bind-event-dialog-content-right-monaco-border-color: var(--ti-lowcode-common-border-color-33);
+  --ti-lowcode-bind-event-dialog-content-left-list-item-active-bg-color: var(--ti-lowcode-common-component-bg-61);
+  --ti-lowcode-bind-event-dialog-new-action-tip-color: var(--ti-lowcode-common-text-color-43);
+  --ti-lowcode-bind-event-dialog-action-selected-icon-color: var(--ti-lowcode-common-primary-color);
+  --ti-lowcode-bind-event-dialog-mark-bg-color: var(--ti-lowcode-common-component-bg-62);
 }
diff --git a/packages/theme/dark/gpt-dialog.less b/packages/theme/dark/gpt-dialog.less
index 74fce60c0..5d7fe95d9 100644
--- a/packages/theme/dark/gpt-dialog.less
+++ b/packages/theme/dark/gpt-dialog.less
@@ -1,51 +1,51 @@
 .bind-chatgpt {
   // chatGPT聊天窗问题模板文字颜色
-  --ti-lowcode-chat-model-text: #dfe1e6;
+  --ti-lowcode-chat-model-text: var(--ti-lowcode-common-text-color-44);
   // chatGPT聊天窗问题模板文字边框颜色
-  --ti-lowcode-chat-model-text-border: #8a8e99;
+  --ti-lowcode-chat-model-text-border: var(--ti-lowcode-common-border-color-34);
   // chatGPT聊天窗提问框图标
-  --ti-lowcode-chat-model-input-icon: #8a8e99;
+  --ti-lowcode-chat-model-input-icon: var(--ti-lowcode-common-text-color-14);
   // chatGPT聊天窗用户头像边框色
-  --ti-lowcode-chat-model-avatar-border: #8a8e99;
+  --ti-lowcode-chat-model-avatar-border: var(--ti-lowcode-common-border-color-34);
   // chatGPT聊天窗AI聊天文字背景
-  --ti-lowcode-chat-model-ai-text-bg: #262626;
+  --ti-lowcode-chat-model-ai-text-bg: var(--ti-lowcode-common-component-bg-52);
   // chatGPT聊天窗AI聊天文字背景边框
-  --ti-lowcode-chat-model-ai-text-border: #262626;
+  --ti-lowcode-chat-model-ai-text-border: var(--ti-lowcode-common-border-color-27);
   // chatGPT聊天窗AI聊天文字
-  --ti-lowcode-chat-model-ai-text: #dfe1e6;
+  --ti-lowcode-chat-model-ai-text: var(--ti-lowcode-common-text-color-44);
   // chatGPT聊天窗AI连接失败文字背景
-  --ti-lowcode-chat-model-ai-fail-text-bg: rgba(246, 111, 106, 0.1);
+  --ti-lowcode-chat-model-ai-fail-text-bg: var(--ti-lowcode-common-component-bg-64);
   // chatGPT聊天窗AI连接失败文字背景边框
-  --ti-lowcode-chat-model-ai-fail-text-border: #f66f6a;
+  --ti-lowcode-chat-model-ai-fail-text-border: var(--ti-lowcode-common-border-color-35);
   // chatGPT聊天窗AI连接失败文字
-  --ti-lowcode-chat-model-ai-fail-text: #dfe1e6;
+  --ti-lowcode-chat-model-ai-fail-text: var(--ti-lowcode-common-text-color-44);
   // chatGPT聊天窗用户聊天文字背景
-  --ti-lowcode-chat-model-user-text-bg: #4f77ff;
+  --ti-lowcode-chat-model-user-text-bg: var(--ti-lowcode-common-component-bg-9);
   // chatGPT聊天窗用户聊天文字边框
-  --ti-lowcode-chat-model-user-text-border: #4f77ff;
+  --ti-lowcode-chat-model-user-text-border: var(--ti-lowcode-common-border-color-6);
   // chatGPT聊天窗用户聊天文字
-  --ti-lowcode-chat-model-user-text: #ffffff;
+  --ti-lowcode-chat-model-user-text: var(--ti-lowcode-common-text-color-3);
   // chatGPT聊天窗标题文字
-  --ti-lowcode-chat-model-title: #dfe1e6;
+  --ti-lowcode-chat-model-title: var(--ti-lowcode-common-text-color-44);
   // chatGPT聊天窗基础图标
-  --ti-lowcode-chat-model-common-icon: #8a887b;
+  --ti-lowcode-chat-model-common-icon: var(--ti-lowcode-common-text-color-14);
   // chatGPT聊天窗输入框背景
-  --ti-lowcode-chat-model-input-bg: #1e1e1e;
+  --ti-lowcode-chat-model-input-bg: var(--ti-lowcode-common-component-bg-63);
   // chatGPT聊天窗发送按钮背景
-  --ti-lowcode-chat-model-button-bg: #2f2f2f;
+  --ti-lowcode-chat-model-button-bg: var(--ti-lowcode-common-component-bg-47);
   // chatGPT聊天窗发送按钮边框
-  --ti-lowcode-chat-model-button-border: #8a8e99;
+  --ti-lowcode-chat-model-button-border: var(--ti-lowcode-common-border-color-34);
   // chatGPT聊天窗发送按钮文字
-  --ti-lowcode-chat-model-button-text: #dfe1e6;
+  --ti-lowcode-chat-model-button-text: var(--ti-lowcode-common-text-color-44);
 
   // chatGPT加载
   --ti-lowcode-chat-loading-svg-color: var(--ti-lowcode-common-primary-color);
-  --ti-lowcode-chat-loading-text-color: #fff;
+  --ti-lowcode-chat-loading-text-color: var(--ti-lowcode-common-text-color-3);
 }
 
 .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: var(--ti-lowcode-common-component-bg-52);
+  --ti-lowcode-chat-model-popover-color: var(--ti-lowcode-common-text-color-35);
+  --ti-lowcode-chat-model-popover-active-bg: var(--ti-lowcode-common-component-bg-47);
+  --ti-lowcode-chat-model-popover-active-color: var(--ti-lowcode-common-text-color-35);
 }
diff --git a/packages/theme/dark/help.less b/packages/theme/dark/help.less
index e3457c2ec..85c42c815 100644
--- a/packages/theme/dark/help.less
+++ b/packages/theme/dark/help.less
@@ -1,15 +1,15 @@
 .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(--ti-lowcode-common-text-color-8);
+  --ti-lowcode-help-guide-title-text-color: var(--ti-lowcode-common-text-color-8);
+  --ti-lowcode-help-guide-progress-style-text-color: var(--ti-lowcode-common-text-color-8);
+  --ti-lowcode-help-guide-mask-bg-color: var(--ti-lowcode-common-component-bg-65);
 }
 .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(--ti-lowcode-common-component-bg-46);
+  --ti-lowcode-help-box-shadow: 0px 2px 6px 0px var(--ti-lowcode-common-text-color-21);
+  --ti-lowcode-help-box-title-text-color: var(--ti-lowcode-common-text-color-3);
+  --ti-lowcode-help-box-item-text-color: var(--ti-lowcode-common-text-color-35);
+  --ti-lowcode-help-box-question-border-top: var(--ti-lowcode-common-border-color-36);
+  --ti-lowcode-help-box-question-item-text-color: var(--ti-lowcode-common-text-color-17);
 }
diff --git a/packages/theme/dark/i18n.less b/packages/theme/dark/i18n.less
index c6a7258ae..5a47919df 100644
--- a/packages/theme/dark/i18n.less
+++ b/packages/theme/dark/i18n.less
@@ -1,8 +1,8 @@
 :root {
   // 国际化表格操作图标颜色
-  --ti-lowcode-i18n-operate-svg-color: var(--ti-lowcode-base-text-color);
+  --ti-lowcode-i18n-operate-svg-color: var(--ti-lowcode-common-text-color-45);
   // 国际化表格加载中字体颜色
-  --ti-lowcode-i18n-loading-text-color: #d9d9d9;
+  --ti-lowcode-i18n-loading-text-color: var(--ti-lowcode-common-text-color-2);
   // 国际化表格加载中图标颜色
-  --ti-lowcode-i18n-loading-svg-color: #d9d9d9;
+  --ti-lowcode-i18n-loading-svg-color: var(--ti-lowcode-common-text-color-2);
 }
diff --git a/packages/theme/dark/life-cycles.less b/packages/theme/dark/life-cycles.less
index 69a2bce16..696d1dfea 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(--ti-lowcode-common-text-color-3);
+  --ti-lowcode-life-cycle-item-hover-bg: var(--ti-lowcode-common-component-bg-29);
+  --ti-lowcode-life-cycle-item-disable-color: var(--ti-lowcode-common-text-color-46);
+  --ti-lowcode-life-cycle-editor-border: var(--ti-lowcode-common-border-color-39);
 }
diff --git a/packages/theme/dark/materials.less b/packages/theme/dark/materials.less
index 971e385f5..c1fd0e812 100644
--- a/packages/theme/dark/materials.less
+++ b/packages/theme/dark/materials.less
@@ -1,30 +1,30 @@
 :root {
   // 带边框的图标按钮边框颜色
-  --ti-lowcode-materials-border-icon-border-color: transparent;
+  --ti-lowcode-materials-border-icon-border-color: var(--ti-lowcode-common-border-color-18);
   // 带边框的图标按钮图标颜色
-  --ti-lowcode-materials-border-icon-svg-color: #d9d9d9;
+  --ti-lowcode-materials-border-icon-svg-color: var(--ti-lowcode-common-text-color-2);
   // 带边框的图标按钮悬浮边框颜色
-  --ti-lowcode-materials-border-icon-border-color-hover: transparent;
+  --ti-lowcode-materials-border-icon-border-color-hover: var(--ti-lowcode-common-bg-0);
   // 带边框的图标按钮背景颜色
-  --ti-lowcode-materials-border-icon-bg-color: #202020;
+  --ti-lowcode-materials-border-icon-bg-color: var(--ti-lowcode-common-component-bg-29);
   // 区块分组下拉选项下边框颜色
-  --ti-lowcode-materials-block-group-item-border-color: var(--ti-lowcode-common-primary-color);
+  --ti-lowcode-materials-block-group-item-border-color: var(--ti-lowcode-common-text-color-17);
   // 添加区块筛选模块字体颜色
-  --ti-lowcode-materials-block-filter-text-color: var(--ti-lowcode-common-secondary-text-color);
+  --ti-lowcode-materials-block-filter-text-color: var(--ti-lowcode-common-text-color-35);
   // 添加区块筛选模块选中字体颜色
-  --ti-lowcode-materials-block-filter-selected-text-color: var(--ti-lowcode-common-primary-color);
+  --ti-lowcode-materials-block-filter-selected-text-color: var(--ti-lowcode-common-text-color-17);
   // 添加区块穿梭框面板背景颜色
-  --ti-lowcode-materials-block-transfer-bg-color: var(--ti-lowcode-common-component-bg);
+  --ti-lowcode-materials-block-transfer-bg-color: var(--ti-lowcode-common-component-bg-47);
   // 添加区块穿梭框面板头部字体颜色
-  --ti-lowcode-materials-block-transfer-header-text-color: #d9d9d9;
+  --ti-lowcode-materials-block-transfer-header-text-color: var(--ti-lowcode-common-text-color-2);
   // 添加区块穿梭框面板头部背景颜色
-  --ti-lowcode-materials-block-transfer-header-bg-color: var(--ti-lowcode-common-header-bg);
+  --ti-lowcode-materials-block-transfer-header-bg-color: var(--ti-lowcode-common-component-bg-29);
   // 区块分组添加区块筛选项 hover 颜色
   --ti-lowcode-materials-block-filter-hover-color: var(--ti-lowcode-common-text-color-2);
   // 组件列表  组件名称颜色
-  --ti-lowcode-materials-component-list-color: var(--ti-lowcode-toolbar-title-color);
+  --ti-lowcode-materials-component-list-color: var(--ti-lowcode-common-text-color-45);
   // 删除区块分组气泡弹窗背景色
-  --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(--ti-lowcode-common-component-bg-46);
   // 删除区块分组气泡弹窗标题色
-  --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(--ti-lowcode-common-text-color-35);
 }
diff --git a/packages/theme/dark/metaComponent.less b/packages/theme/dark/metaComponent.less
index cea6734aa..b6ce95015 100644
--- a/packages/theme/dark/metaComponent.less
+++ b/packages/theme/dark/metaComponent.less
@@ -1,65 +1,63 @@
 :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(--ti-lowcode-common-component-bg-2);
+  --ti-lowcode-meta-list-item-border-color: var(--ti-lowcode-common-border-color-18);
 
-  --ti-lowcode-meta-list-top-color: var(--ti-lowcode-base-text-color-1);
+  --ti-lowcode-meta-list-top-color: var(--ti-lowcode-common-text-color-43);
   // MetaJsSlot
-  --lowcode-meta-js-slot-color: var(--ti-lowcode-base-text-color-1);
+  --lowcode-meta-js-slot-color: var(--ti-lowcode-common-text-color-43);
 
   // MetaCodeEditor
-  --ti-lowcode-meta-codeEditor-color: #d9d9d9;
-  --ti-lowcode-meta-codeEditor-border-color: var(--ti-lowcode-button-default-border-color);
-  --ti-lowcode-meta-codeEditor-hover-color: #fff;
-  --ti-lowcode-meta-codeEditor-border-hover-color: #6b6b6b;
+  --ti-lowcode-meta-codeEditor-color: var(--ti-lowcode-common-text-color-2);
+  --ti-lowcode-meta-codeEditor-border-color: var(--ti-lowcode-common-border-color-37);
+  --ti-lowcode-meta-codeEditor-hover-color: var(--ti-lowcode-common-text-color-3);
+  --ti-lowcode-meta-codeEditor-border-hover-color: var(--ti-lowcode-common-border-color-38);
 }
 
 // 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(--ti-lowcode-common-text-color-43);
+  --ti-lowcode-meta-config-item-label-tips-title-color: var(--ti-lowcode-common-text-color-3);
 }
 
 // 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(--ti-lowcode-common-status-error);
+  --ti-lowcode-meta-config-item-label-color: var(--ti-lowcode-common-text-color-43);
+  --ti-lowcode-meta-config-item-bind-color: var(--ti-lowcode-common-text-color-3);
+  --ti-lowcode-meta-config-item-bind-bg: var(--ti-lowcode-common-component-bg-56);
+  --ti-lowcode-meta-config-item-bind-bg: var(--ti-lowcode-common-component-bg-56);
+  --ti-lowcode-meta-config-item-active-bg: var(--ti-lowcode-common-component-bg);
+  --ti-lowcode-meta-config-item-link-color: var(--ti-lowcode-common-text-color-4);
 }
 
 // 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(--ti-lowcode-common-text-color-45);
+  --ti-lowcode-meta-bind-variable-icon-hover-bg-color: var(--ti-lowcode-common-component-bg-13);
+  --ti-lowcode-meta-bind-variable-content-left-title-color: var(--ti-lowcode-common-text-color-45);
+  --ti-lowcode-meta-bind-variable-content-right-title-color: var(--ti-lowcode-common-text-color-45);
+  --ti-lowcode-meta-bind-variable-list-wrap-border-color: var(--ti-lowcode-common-border-color-39);
+  --ti-lowcode-meta-bind-variable-content-left-list-border-right-color: var(--ti-lowcode-common-border-color-39);
+  --ti-lowcode-meta-bind-variable-list-item-hover-bg-color: var(--ti-lowcode-common-component-bg-13);
+  --ti-lowcode-meta-bind-variable-item-selected-bg-color: var(--ti-lowcode-common-component-bg-13);
+  --ti-lowcode-meta-bind-variable-item-hover-bg-color: var(--ti-lowcode-common-component-bg-13);
+  --ti-lowcode-meta-bind-variable-bottom-border-color: var(--ti-lowcode-common-border-color-39);
+  --ti-lowcode-meta-bind-variable-top-border-color: var(--ti-lowcode-common-border-color-39);
+  --ti-lowcode-meta-bind-variable-bottom-color: var(--ti-lowcode-common-text-color-43);
+  --ti-lowcode-meta-bind-variable-content-left-list-color: var(--ti-lowcode-common-text-color-45);
+  --ti-lowcode-meta-bind-variable-item-text-color: var(--ti-lowcode-common-text-color-45);
+  --ti-lowcode-meta-bind-variable-header-alert-color: var(--ti-lowcode-common-text-color-3);
+  --ti-lowcode-meta-bind-variable-top-color: var(--ti-lowcode-common-text-color-45);
 }
 
 // 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(--ti-lowcode-common-text-color-45);
+  --ti-lowcode-meta-code-editor-header-collapse-icon-color: var(--ti-lowcode-common-text-color-5);
+  --ti-lowcode-meta-code-editor-header-collapse-icon-hover-color: var(--ti-lowcode-common-text-color-43);
+  --ti-lowcode-meta-code-editor-header-tips-demo-bg-color: var(--ti-lowcode-common-component-bg-25);
+  --ti-lowcode-meta-code-editor-header-tips-demo-color: var(--ti-lowcode-common-text-color-45);
+  --ti-lowcode-meta-code-editor-source-code-content-border-color: var(--ti-lowcode-common-border-color-18);
+  --ti-lowcode-meta-code-editor-err-msg-color: var(--ti-lowcode-common-status-error);
 }
diff --git a/packages/theme/dark/pageManage.less b/packages/theme/dark/pageManage.less
index 4311afab2..a317a95b8 100644
--- a/packages/theme/dark/pageManage.less
+++ b/packages/theme/dark/pageManage.less
@@ -1,29 +1,29 @@
 :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-title-background-text-color: var(--ti-lowcode-common-text-color-35);
+  --ti-lowcode-page-manage-tip-background-text-color: var(--ti-lowcode-common-text-color-34);
+  --ti-lowcode-page-manage-tip-text-color: var(--ti-lowcode-common-text-color-34);
+  --ti-lowcode-page-manage-tip-border-color: var(--ti-lowcode-common-border-color-17);
   --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-tree-text-background-color: var(--ti-lowcode-common-component-bg-66);
+  --ti-lowcode-page-manage-tree-node-background-color: var(--ti-lowcode-common-component-bg-47);
+  --ti-lowcode-page-manage-tip-color: var(--ti-lowcode-common-text-color-45);
+  --ti-lowcode-page-manage-input-background-color: var(--ti-lowcode-common-component-bg-63);
+  --ti-lowcode-page-manage-input-border-color: var(--ti-lowcode-common-border-color-40);
+  --ti-lowcode-page-manage-tips-icon-color: var(--ti-lowcode-common-text-color-17);
+  --ti-lowcode-page-manage-content-tips-color: var(--ti-lowcode-common-text-color-14);
+  --ti-lowcode-page-manage-search-border-color: var(--ti-lowcode-common-border-color-28);
+  --ti-lowcode-page-manage-tree-color: var(--ti-lowcode-common-text-color-35);
+  --ti-lowcode-page-manage-page-tree-background-active-color: var(--ti-lowcode-common-text-color-47);
+  --ti-lowcode-page-manage-page-tree-background-hover-color: var(--ti-lowcode-common-text-color-48);
+  --ti-lowcode-page-manage-svg-hover-color: var(--ti-lowcode-common-text-color-17);
+  --ti-lowcode-page-manage-text-color: var(--ti-lowcode-common-text-color-35);
+  --ti-lowcode-page-manage-input-head-text-color: var(--ti-lowcode-common-text-color-35);
+  --ti-lowcode-page-manage-btn-text-color: var(--ti-lowcode-common-text-color-22);
+  --ti-lowcode-page-manage-btn-text-color-2: var(--ti-lowcode-common-text-color-14);
   --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-group-color: var(--ti-lowcode-common-component-bg-52);
+  --ti-lowcode-page-manage-input-group-border-color: var(--ti-lowcode-common-component-bg-52);
+  --ti-lowcode-page-manage-input-group-border-right-color: var(--ti-lowcode-common-text-color-47);
   --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-input-output-text-bg-color: var(--ti-lowcode-common-component-bg-9);
 }
diff --git a/packages/theme/dark/plugin-js.less b/packages/theme/dark/plugin-js.less
index c07a1a2c3..90e337013 100644
--- a/packages/theme/dark/plugin-js.less
+++ b/packages/theme/dark/plugin-js.less
@@ -1,7 +1,7 @@
 // 页面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(--ti-lowcode-common-component-bg-47);
+  --ti-lowcode-plugin-js-head-border-bottom-color: var(--ti-lowcode-common-border-color-27);
+  --ti-lowcode-code-edit-content-border-color: var(--ti-lowcode-common-border-color-39);
+  --ti-lowcode-plugin-js-help-link-color: var(--ti-lowcode-common-primary-color);
 }
diff --git a/packages/theme/dark/setting-style.less b/packages/theme/dark/setting-style.less
index 552eee7e3..8e1210822 100644
--- a/packages/theme/dark/setting-style.less
+++ b/packages/theme/dark/setting-style.less
@@ -1,8 +1,8 @@
 :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(--ti-lowcode-common-component-bg-9);
+  --ti-lowcode-setting-style-font-color: var(--ti-lowcode-common-text-color-35); // light
+  --ti-lowcode-setting-style-input-font-color: var(--ti-lowcode-common-text-color-3);
+  --ti-lowcode-setting-style-btn-font-color: var(--ti-lowcode-common-text-color-43);
+  --ti-lowcode-setting-style-btn-border-color: var(--ti-lowcode-common-border-color-6);
+  --ti-lowcode-setting-style-title-color: var(--ti-lowcode-common-text-color-45);
 }
diff --git a/packages/theme/dark/settings.less b/packages/theme/dark/settings.less
index fe74f0cdc..097962013 100644
--- a/packages/theme/dark/settings.less
+++ b/packages/theme/dark/settings.less
@@ -1,46 +1,47 @@
 // 右侧属性面板 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(--ti-lowcode-common-component-bg-47);
+  --ti-lowcode-setting-panel-tabs-item-title-color: var(--ti-lowcode-common-text-color-43);
+  --ti-lowcode-setting-panel-tabs-item-title-active-color: var(--ti-lowcode-common-text-color-18);
+  --ti-lowcode-setting-panel-tabs-item-title-hover-color: var(--ti-lowcode-common-text-color-3);
   // 插件设置面板左侧边框
-  --ti-lowcode-plugin-setting-panel-border-left-color: var(--ti-lowcode-common-component-bg);
+  --ti-lowcode-plugin-setting-panel-border-left-color: var(--ti-lowcode-common-text-color-49);
 }
 
 // 属性面板-属性-新建区块属性
 .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);
+  --ti-lowcode-attr-popover-menu-item-hover-bg-color: var(--ti-lowcode-common-component-bg-13);
+  --ti-lowcode-attr-popover-menu-item-link-item-bg-color: var(--ti-lowcode-common-component-bg-9);
+  --ti-lowcode-attr-popover-menu-item-link-item-color: var(--ti-lowcode-common-text-color-3);
+  --ti-lowcode-attr-popover-menu-item-color: var(--ti-lowcode-common-text-color-45);
 }
 
 // 属性面板-属性-区块关联属性 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-block-link-field-link-icon-color: var(--ti-lowcode-common-text-color-3);
+  --ti-lowcode-block-link-field-link-icon-bg-color: var(--ti-lowcode-common-component-bg-60);
 }
 
 .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-dropdown-list-tips-color: var(--ti-lowcode-base-text-color-3);
+  --ti-lowcode-className-selector-container-color: var(--ti-lowcode-common-text-color-45);
+  --ti-lowcode-className-selector-container-error-border-color: var(--ti-lowcode-common-status-error);
+  --ti-lowcode-className-selector-container-error-bg-color: var(--ti-lowcode-common-component-bg-17);
+  --ti-lowcode-className-selector-error-tips-color: var(--ti-lowcode-common-status-error);
+
+  --ti-lowcode-className-selector-container-border-color: var(--ti-lowcode-common-border-color-41);
+  --ti-lowcode-className-selector-container-hover-border-color: var(--ti-lowcode-common-border-color-6);
+  --ti-lowcode-className-selector-container-empty-tips-color: var(--ti-lowcode-common-text-color-43);
+  --ti-lowcode-className-selector-container-label-bg-color: var(--ti-lowcode-common-component-bg-18);
+  --ti-lowcode-className-selector-container-label-color: var(--ti-lowcode-common-primary-color);
+  --ti-lowcode-className-selector-container-option-btn-color: var(--ti-lowcode-common-primary-color);
+  --ti-lowcode-className-selector-dropdown-list-bg-color: var(--ti-lowcode-common-component-bg-29);
+  --ti-lowcode-className-selector-dropdown-list-item-color: var(--ti-lowcode-common-text-color-45);
+  --ti-lowcode-className-selector-dropdown-list-item-active-bg-color: var(--ti-lowcode-common-component-bg-67);
+  --ti-lowcode-className-selector-title-color: var(--ti-lowcode-common-text-color-45);
+  --ti-lowcode-className-selector-dropdown-list-tips-color: var(--ti-lowcode-common-text-color-5);
 }
 
 :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(--ti-lowcode-common-component-bg-68);
+  --ti-lowcode-className-selector-del-popover-title-color: var(--ti-lowcode-common-text-color-45);
 }
diff --git a/packages/theme/dark/toolbar.less b/packages/theme/dark/toolbar.less
index 322903a59..08b93081f 100644
--- a/packages/theme/dark/toolbar.less
+++ b/packages/theme/dark/toolbar.less
@@ -1,14 +1,14 @@
 .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-setting-border-color: var(--ti-lowcode-common-border-color-2);
-  --ti-lowcode-toolbar-title-color: #e6e6e6;
-  --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-view-active-bg: #2f2f2f;
-  --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-border-bottom-color: var(--ti-lowcode-common-border-color-18);
+  --ti-lowcode-toolbar-media-bg: var(--ti-lowcode-common-component-bg-69);
+  --ti-lowcode-toolbar-media-setting-border-color: var(--ti-lowcode-common-border-color-28);
+  --ti-lowcode-toolbar-title-color: var(--ti-lowcode-common-text-color-45);
+  --ti-lowcode-toolbar-sub-title-color: var(--ti-lowcode-common-text-color-35);
+  --ti-lowcode-toolbar-hover-color: var(--ti-lowcode-common-text-color-47);
+  --ti-lowcode-toolbar-view-active-bg: var(--ti-lowcode-common-component-bg-47);
+  --ti-lowcode-toolbar-popover-bg: var(--ti-lowcode-common-component-bg);
+  --ti-lowcode-toolbar-active-color: var(--ti-lowcode-common-text-color-5);
+  --ti-lowcode-toolbar-user-img-border-color: var(--ti-lowcode-common-border-color-44);
+  --ti-lowcode-toolbar-dot-color: var(--ti-lowcode-common-text-color-61);
 }
diff --git a/packages/theme/dark/tree.less b/packages/theme/dark/tree.less
index b2d7556b0..75fb4873a 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-color: var(--ti-lowcode-common-text-color-35);
+  --ti-lowcode-tree-icon-color: var(--ti-lowcode-common-text-color-62);
+  --ti-lowcode-tree-icon-hover-color: var(--ti-lowcode-common-text-color-35);
   --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-selected-bg: var(--ti-lowcode-common-text-color-17);
 }
diff --git a/packages/theme/dark/tutorial.less b/packages/theme/dark/tutorial.less
index 28f063eef..0258727c7 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-hover-bg-color: var(--ti-lowcode-base-bg);
+  --ti-lowcode-tutorial-primary-text-color: var(--ti-lowcode-common-text-color-8);
+  --ti-lowcode-tutorial-primary-bg-color: var(--ti-lowcode-common-component-bg-4);
+  --ti-lowcode-tutorial-hover-bg-color: var(--ti-lowcode-common-component-bg-1);
 }
diff --git a/packages/theme/dark/variable.less b/packages/theme/dark/variable.less
index e5256c6dc..9c41f746a 100644
--- a/packages/theme/dark/variable.less
+++ b/packages/theme/dark/variable.less
@@ -1,392 +1,396 @@
 // 暗色主题
 :root {
   // 基础配置，前缀为 --base
-  --base-min-width: 1280px;
+  --ti-common-min-width: 1280px;
 
   // tiny vue 的 css 变量，覆盖掉就好
   .tiny-form-item {
     // 错误背景色
-    --ti-form-item-error-bg-color: #433535;
+    --ti-form-item-error-bg-color: var(--ti-lowcode-common-component-bg-69);
   }
 
   .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(--ti-lowcode-common-text-color-49);
+    --ti-grid-text-color: var(--ti-lowcode-common-text-color-14);
   }
 
-  --ti-lowcode-trigger-color: #adb0b8;
-  --ti-lowcode-trigger-hover-color: #8a8e99;
+  --ti-lowcode-trigger-color: var(--ti-lowcode-common-text-color-35);
+  --ti-lowcode-trigger-hover-color: var(--ti-lowcode-common-text-color-14);
   --ti-lowcode-input-error-color: var(--ti-lowcode-common-error-color);
-  --ti-lowcode-input-error-bg: rgba(246, 111, 106, 0.1);
-
-  --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-input-error-bg: var(--ti-lowcode-common-component-bg-64);
 
+  --ti-lowcode-tabs-active-border-bottom-color: var(--ti-lowcode-common-border-color-29);
+  --ti-lowcode-tabs-active-color: var(--ti-lowcode-common-text-color-17);
   --ti-lowcode-form-error-tips-color: var(--ti-lowcode-common-error-color);
 
   // 设置面板
-  --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(--ti-lowcode-common-text-color-35);
+
+  --ti-lowcode-component-setting-panel-icon-color: var(--ti-lowcode-common-text-color-2);
+  --ti-lowcode-component-setting-panel-label-tips-bg: var(--ti-lowcode-common-component-bg-70);
 
   // 插件面板
-  --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-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-panel-title-color: var(--ti-lowcode-common-text-color-39); // 插件面板标题色
+  --ti-lowcode-plugin-panel-bg: var(--ti-lowcode-common-component-bg-47); // 插件面板背景色
+  --ti-lowcode-plugin-panel-border-right-color: var(--ti-lowcode-common-border-color-42); // 插件面板右侧边框色
+  --ti-lowcode-plugin-panel-header-border-bottom-color: var(
+    --ti-lowcode-common-border-color-27
+  ); // 插件面板头部区域底部边框线颜色
+  --ti-lowcode-plugin-panel-title-font-weight: var(--ti-lowcode-common-font-weight-400); // 插件面板标题加粗效果
 
   // 插件设置面板
-  --ti-lowcode-plugin-setting-panel-bg: var(--ti-lowcode-common-component-bg); // 插件设置面板背景色
+  --ti-lowcode-plugin-setting-panel-bg: var(--ti-lowcode-common-component-bg-47); // 插件设置面板背景色
 
   // ------ 各个模块的主题色，前缀为 --ti-lowcode-模块名 -------
 
-  --ti-lowcode-design-plugin-color: #8a8e99;
-  --ti-lowcode-design-toolbar-icon-color: #8a8e99;
+  --ti-lowcode-design-plugin-color: var(--ti-lowcode-common-text-color-14);
+  --ti-lowcode-design-toolbar-icon-color: var(--ti-lowcode-common-text-color-14);
   --ti-lowcode-nav-panel-border-left-color: transparent;
 
   // 物料-组件列表
   --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(--ti-lowcode-common-component-bg-46);
 
   // 页面管理
   --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(--ti-lowcode-common-text-color-3);
 
   // 画布 canvas
-  --ti-lowcode-canvas-iframe-scrollbar-track-color: var(--ti-lowcode-canvas-wrap-bg); // iframe 内部滚动条 track 颜色
+  --ti-lowcode-canvas-iframe-scrollbar-track-color: var(
+    --ti-lowcode-common-text-color-50
+  ); // iframe 内部滚动条 track 颜色
   // iframe 内部滚动条 滑块 颜色
-  --ti-lowcode-canvas-iframe-scrollbar-thumb-color: var(--ti-lowcode-common-component-bg);
+  --ti-lowcode-canvas-iframe-scrollbar-thumb-color: var(--ti-lowcode-common-text-color-49);
 
   // 数据源
-  --ti-lowcode-datasource-list-color: var(--ti-lowcode-toolbar-more-hover-color);
+  --ti-lowcode-datasource-list-color: var(--ti-lowcode-common-text-color-51);
 
   // 状态管理
-  --ti-lowcode-data-list-color: var(--ti-lowcode-toolbar-icon-color);
+  --ti-lowcode-data-list-color: var(--ti-lowcode-common-text-color-3);
   // 状态管理面板头部的底部边框色
-  --ti-lowcode-data-header-border-bottom-color: var(--ti-lowcode-common-bg-4);
+  --ti-lowcode-data-header-border-bottom-color: var(--ti-lowcode-common-border-color-27);
   // 状态管理示例背景色
-  --ti-lowcode-data-example-bg-color: var(--ti-lowcode-common-primary-text-color);
+  --ti-lowcode-data-example-bg-color: var(--ti-lowcode-common-component-bg);
   // 状态管理示例文字色
-  --ti-lowcode-data-example-color: var(--ti-lowcode-common-text-title-color);
+  --ti-lowcode-data-example-color: var(--ti-lowcode-common-text-color-15);
   // 添加高级属性文字颜色
-  --ti-lowcode-data-advanced-text-color: #dfe1e6;
+  --ti-lowcode-data-advanced-text-color: var(--ti-lowcode-common-text-color-44);
   // 添加高级属性 hover 文字颜色
-  --ti-lowcode-data-advanced-text-hover-color: #8a8e99;
+  --ti-lowcode-data-advanced-text-hover-color: var(--ti-lowcode-common-text-color-14);
 
   // 状态管理按激活背景色
-  --ti-lowcode-data-radio-group-active-bg: var(--ti-lowcode-common-primary-color);
+  --ti-lowcode-data-radio-group-active-bg: var(--ti-lowcode-common-component-bg-56);
   // 状态管理按默认背景色
-  --ti-lowcode-data-radio-group-bg: var(--ti-lowcode-common-header-bg);
+  --ti-lowcode-data-radio-group-bg: var(--ti-lowcode-common-component-bg-29);
 
   // 教程
-  --ti-lowcode-tutorial-list-item-color: var(--ti-lowcode-toolbar-breadcrumb-color);
+  --ti-lowcode-tutorial-list-item-color: var(--ti-lowcode-common-text-color-2);
 
   // 头部工具栏背景色
-  --ti-lowcode-toolbar-bg: #404040;
+  --ti-lowcode-toolbar-bg: var(--ti-lowcode-common-component-bg-57);
   // 头部工具栏选中背景色
-  --ti-lowcode-toolbar-active-bg: #212121;
+  --ti-lowcode-toolbar-active-bg: var(--ti-lowcode-common-component-bg-71);
   // 头部工具栏边框色
-  --ti-lowcode-toolbar-border-color: #333;
+  --ti-lowcode-toolbar-border-color: var(--ti-lowcode-common-border-color-17);
   // 头部工具栏icon颜色 && 右侧属性面板tabs hover字体颜色 && switch 选中hover圆背景色
-  --ti-lowcode-toolbar-icon-color: #fff;
+  --ti-lowcode-toolbar-icon-color: var(--ti-lowcode-common-text-color-3);
   // 头部工具栏icon颜色
-  --ti-lowcode-toolbar-icon-active-color: #4f77ff;
+  --ti-lowcode-toolbar-icon-active-color: var(--ti-lowcode-common-text-color-17);
   // 头部工具栏面包屑背景颜色
-  --ti-lowcode-toolbar-breadcrumb-background-color: rgba(0, 179, 54, 0.6);
+  --ti-lowcode-toolbar-breadcrumb-background-color: var(--ti-lowcode-common-component-bg-73);
   // 头部工具栏更多more图标颜色
-  --ti-lowcode-toolbar-more-color: rgba(217, 217, 217, 0.4);
+  --ti-lowcode-toolbar-more-color: var(--ti-lowcode-common-text-color-52);
   // 头部工具栏更多more图标hover颜色
-  --ti-lowcode-toolbar-more-hover-color: rgba(217, 217, 217, 0.8);
+  --ti-lowcode-toolbar-more-hover-color: var(--ti-lowcode-common-text-color-51);
   // 头部工具栏面包屑字体颜色 && 右侧属性面板tabs字体颜色 && 右侧属性面板 collapse 头部字体颜色 && switch 选中圆背景色
-  --ti-lowcode-toolbar-breadcrumb-color: #d9d9d9;
+  --ti-lowcode-toolbar-breadcrumb-color: var(--ti-lowcode-common-text-color-2);
   // 头部工具栏画布大小文本hover背景色 && 头部弹框背景色 && context-menu 背景色 && 大纲树节点hover背景色 && 日期组件背景色
-  --ti-lowcode-toolbar-view-hover-bg: #4d4d4d;
+  --ti-lowcode-toolbar-view-hover-bg: var(--ti-lowcode-common-component-bg-59);
   // 头部工具栏i18n国际化字体颜色
-  --ti-lowcode-toolbar-i18n-color: rgba(255, 255, 255, 0.4);
+  --ti-lowcode-toolbar-i18n-color: var(--ti-lowcode-common-text-color-53);
   // 应用发布弹窗图标颜色
-  --ti-lowcode-toolbar-publish-icon-color: var(--ti-lowcode-common-primary-text-color);
+  --ti-lowcode-toolbar-publish-icon-color: var(--ti-lowcode-common-text-color-3);
   // 头部左侧logo颜色
-  --ti-lowcode-logo-color: #8a8e99;
+  --ti-lowcode-logo-color: var(--ti-lowcode-common-text-color-14);
   // 头部左侧logo颜色
-  --ti-lowcode-logo-active-color: rgba(255, 255, 255, 0.5);
+  --ti-lowcode-logo-active-color: var(--ti-lowcode-common-text-color-54);
   // 中间画布边框色
-  --ti-lowcode-canvas-border-color: #1a1a1a;
+  --ti-lowcode-canvas-border-color: var(--ti-lowcode-common-border-color-42);
   // 右侧属性面板tab页签背景色 && 表单校验错误输入框背景色
-  --ti-lowcode-tabs-bg: #2b2b2b;
+  --ti-lowcode-tabs-bg: var(--ti-lowcode-common-component-bg-51);
   // 右侧属性面板tab页签边框色 && 弹框边框色 && context-menu 边框色
-  --ti-lowcode-tabs-border-color: #313131;
+  --ti-lowcode-tabs-border-color: var(--ti-lowcode-common-border-color-28);
   // 右侧属性面板tab页签激活状态背景色 && 弹框title背景颜色
-  --ti-lowcode-tabs-active-bg: #404040;
+  --ti-lowcode-tabs-active-bg: var(--ti-lowcode-common-component-bg-57);
   // 右侧属性面板折叠面板展开内容边框色
-  --ti-lowcode-collapse-active-border-color: #333;
+  --ti-lowcode-collapse-active-border-color: var(--ti-lowcode-common-border-color-17);
   // 中间画布外框容器背景色 && 弹框底部tip背景色 && select 多选下拉选项hover背景色
-  --ti-lowcode-canvas-wrap-bg: #5e5e5e;
+  --ti-lowcode-canvas-wrap-bg: var(--ti-lowcode-common-component-bg-55);
   // 中间画布拖拽宽度按钮背景色
-  --ti-lowcode-canvas-handle-bg: #2b2b2b;
+  --ti-lowcode-canvas-handle-bg: var(--ti-lowcode-common-component-bg-51);
   // 中间画布拖拽宽度按钮背景色
-  --ti-lowcode-canvas-handle-hover-bg: var(--ti-lowcode-common-primary-color);
+  --ti-lowcode-canvas-handle-hover-bg: var(--ti-lowcode-common-component-bg-56);
   // 中间画布底部面包屑背景色 && popover 背景颜色
-  --ti-lowcode-breadcrumb-bg: #ebebeb;
+  --ti-lowcode-breadcrumb-bg: var(--ti-lowcode-common-component-bg-19);
   // 中间画布底部面包屑字体颜色 && popover 字体颜色
-  --ti-lowcode-breadcrumb-color: #4d4d4d;
+  --ti-lowcode-breadcrumb-color: var(--ti-lowcode-common-text-color-34);
   // 中间画布底部面包屑三角箭头颜色
-  --ti-lowcode-breadcrumb-icon-color: #858585;
+  --ti-lowcode-breadcrumb-icon-color: var(--ti-lowcode-common-text-color-55);
   // 弹框遮罩层背景色
-  --ti-lowcode-mask-modal-bg: rgba(0, 0, 0, 0.5);
+  --ti-lowcode-mask-modal-bg: var(--ti-lowcode-common-component-bg-21);
   // 引导提示框遮罩层背景色
-  --ti-lowcode-guide-mask-bg: rgba(255, 255, 255, 0.5);
+  --ti-lowcode-guide-mask-bg: var(--ti-lowcode-common-component-bg-74);
   // 引导高亮遮罩层背景色
-  --ti-lowcode-guide-highlight-mask-bg: rgba(200, 200, 200, 0.2);
+  --ti-lowcode-guide-highlight-mask-bg: var(--ti-lowcode-common-component-bg-44);
   // 引导弹框背景色
-  --ti-lowcode-guide-dialog-bg: #041320;
+  --ti-lowcode-guide-dialog-bg: var(--ti-lowcode-common-component-bg-75);
   // 引导弹框标题，按钮文本字体色
-  --ti-lowcode-guide-title-color: #fff;
+  --ti-lowcode-guide-title-color: var(--ti-lowcode-common-text-color-3);
   // 引导弹框描述文本字体色
-  --ti-lowcode-guide-message-color: #a7aab2;
+  --ti-lowcode-guide-message-color: var(--ti-lowcode-common-text-color-56);
 
   // collapse 折叠面板激活后字体颜色
-  --ti-lowcode-collapse-active-color: #ebebeb;
+  --ti-lowcode-collapse-active-color: var(--ti-lowcode-common-text-color-39);
   // input 框背景色
-  --ti-lowcode-input-bg: #262626;
+  --ti-lowcode-input-bg: var(--ti-lowcode-common-component-bg-52);
   // switch 圆点 hover 背景色
-  --ti-lowcode-switch-after-hover-bg: #6b6b6b;
+  --ti-lowcode-switch-after-hover-bg: var(--ti-lowcode-common-component-bg-76);
   // switch 圆点 checked 背景色
-  --ti-lowcode-switch-after-checked-bg: #d9d9d9;
+  --ti-lowcode-switch-after-checked-bg: var(--ti-lowcode-common-component-bg-77);
   // -----下拉框相关主题配置-----
   // 下拉框聚焦时边框颜色
-  --ti-lowcode-select-focus-border-color: var(--ti-lowcode-common-primary-color);
+  --ti-lowcode-select-focus-border-color: var(--ti-lowcode-common-border-color-29);
   // 下拉框选中标签字体颜色
-  --ti-lowcode-select-tags-text-color: #d9d9d9;
+  --ti-lowcode-select-tags-text-color: var(--ti-lowcode-common-text-color-2);
   // 下拉框选中标签背景颜色
-  --ti-lowcode-select-tags-bg-color: #5e5e5e;
+  --ti-lowcode-select-tags-bg-color: var(--ti-lowcode-common-component-bg-55);
   // 下拉框suffix图标悬浮颜色
-  --ti-lowcode-select-suffix-icon-color-hover: #fff;
+  --ti-lowcode-select-suffix-icon-color-hover: var(--ti-lowcode-common-text-color-3);
   // select 下拉框背景色
-  --ti-lowcode-dropdown-bg-color: #202020;
+  --ti-lowcode-dropdown-bg-color: var(--ti-lowcode-common-component-bg-29);
   // select 下拉面板边框颜色
-  --ti-lowcode-dropdown-border-color: #333;
+  --ti-lowcode-dropdown-border-color: var(--ti-lowcode-common-border-color-17);
   // select 下拉面板选型字体颜色
-  --ti-lowcode-dropdown-item-text-color: #d9d9d9;
+  --ti-lowcode-dropdown-item-text-color: var(--ti-lowcode-common-text-color-2);
   // select 下拉框选项hover背景色
-  --ti-lowcode-dropdown-item-hover-bg-color: var(--ti-lowcode-common-component-bg);
+  --ti-lowcode-dropdown-item-hover-bg-color: var(--ti-lowcode-common-component-bg-47);
   // select 下拉框选项选中背景色
-  --ti-lowcode-dropdown-item-selected-bg: var(--ti-lowcode-common-component-hover-bg);
+  --ti-lowcode-dropdown-item-selected-bg: var(--ti-lowcode-common-component-bg-46);
   // select 下拉框选项选中字体颜色
-  --ti-lowcode-dropdown-item-selected-color: #ebebeb;
+  --ti-lowcode-dropdown-item-selected-color: var(--ti-lowcode-common-text-color-39);
   // select 下拉框选项hover字体颜色
-  --ti-lowcode-dropdown-item-hover-text-color: #ebebeb;
+  --ti-lowcode-dropdown-item-hover-text-color: var(--ti-lowcode-common-text-color-39);
   // button info 字体颜色
-  --ti-lowcode-button-info-color: #fff;
+  --ti-lowcode-button-info-color: var(--ti-lowcode-common-text-color-3);
   // button default 背景颜色
-  --ti-lowcode-button-default-bg: transparent;
+  --ti-lowcode-button-default-bg: var(--ti-lowcode-common-bg-0);
   // 按钮hover字体颜色
-  --ti-lowcode-button-default-hover-color: #fff;
+  --ti-lowcode-button-default-hover-color: var(--ti-lowcode-common-text-color-3);
   // 按钮hover背景色
-  --ti-lowcode-button-default-hover-bg: #6b6b6b;
-  --ti-lowcode-button-default-hover-border-color: #6b6b6b;
+  --ti-lowcode-button-default-hover-bg: var(--ti-lowcode-common-component-bg-76);
+  --ti-lowcode-button-default-hover-border-color: var(--ti-lowcode-common-border-color-38);
   // info 保存按钮背景色
-  --ti-lowcode-button-info-bg: var(--ti-lowcode-common-primary-color);
+  --ti-lowcode-button-info-bg: var(--ti-lowcode-common-component-bg-56);
   // info 保存按钮 hover 背景色
   --ti-lowcode-button-info-hover-bg: var(--ti-lowcode-common-primary-hover-color);
   // primary 按钮字体颜色
-  --ti-lowcode-button-primary-color: #fff;
+  --ti-lowcode-button-primary-color: var(--ti-lowcode-common-text-color-3);
   // 按钮边框颜色
-  --ti-lowcode-button-border-color: #333;
+  --ti-lowcode-button-border-color: var(--ti-lowcode-common-border-color-17);
 
   // 组件icon颜色
-  --ti-lowcode-component-icon-color: #d9d9d9;
+  --ti-lowcode-component-icon-color: var(--ti-lowcode-common-text-color-2);
   // 组件item hover 背景色
-  --ti-lowcode-component-item-hover-bg: #4d4d4d;
+  --ti-lowcode-component-item-hover-bg: var(--ti-lowcode-common-component-bg-59);
   // 左侧插件激活背景色
-  --ti-lowcode-left-panel-active-bg: #2f2f2f;
+  --ti-lowcode-left-panel-active-bg: var(--ti-lowcode-common-component-bg-47);
   // 左侧插件激活边框色
-  --ti-lowcode-left-panel-active-border-color: #212121;
+  --ti-lowcode-left-panel-active-border-color: var(--ti-lowcode-common-border-color-26);
   // 左侧按钮边框色
-  --ti-lowcode-left-button-border-color: #212121;
+  --ti-lowcode-left-button-border-color: var(--ti-lowcode-common-border-color-26);
 
   // list-item 项背景色
-  --ti-lowcode-list-item-bg: #333;
+  --ti-lowcode-list-item-bg: var(--ti-lowcode-common-component-bg-72);
   // list-item 项激活背景色
-  --ti-lowcode-list-item-active-bg: #404040;
+  --ti-lowcode-list-item-active-bg: var(--ti-lowcode-common-component-bg-57);
   // radio 按钮组激活背景色
-  --ti-lowcode-radio-button-active-bg: #2b2b2b;
+  --ti-lowcode-radio-button-active-bg: var(--ti-lowcode-common-component-bg-51);
   // grid 布局设置按钮字体颜色
-  --ti-lowcode-grid-edit-color: #d9d9d9;
+  --ti-lowcode-grid-edit-color: var(--ti-lowcode-common-text-color-2);
   // grid 布局设置按钮背景色
-  --ti-lowcode-grid-edit-bg: #5e5e5e;
+  --ti-lowcode-grid-edit-bg: var(--ti-lowcode-common-component-bg-55);
   // tooltip字体颜色
-  --ti-lowcode-tooltip-text-color: #999;
+  --ti-lowcode-tooltip-text-color: var(--ti-lowcode-common-text-color-22);
   // tooltip背景颜色
-  --ti-lowcode-tooltip-bg-color: #ebebeb;
+  --ti-lowcode-tooltip-bg-color: var(--ti-lowcode-common-component-bg-19);
   // tooltip错误提示背景颜色
-  --ti-lowcode-tooltip-error-bg-color: #c92c3f;
+  --ti-lowcode-tooltip-error-bg-color: var(--ti-lowcode-common-component-bg-38);
 
   // Fit 字体颜色
-  --ti-lowcode-fit-label-color: #ebebeb;
+  --ti-lowcode-fit-label-color: var(--ti-lowcode-common-text-color-39);
   // Fit 背景颜色
-  --ti-lowcode-fit-coordinate-bg: #2b2b2b;
+  --ti-lowcode-fit-coordinate-bg: var(--ti-lowcode-common-component-bg-51);
   // Fit 边框颜色
-  --ti-lowcode-fit-coordinate-border-color: #212121;
+  --ti-lowcode-fit-coordinate-border-color: var(--ti-lowcode-common-border-color-26);
   // Fit 圆点颜色
-  --ti-lowcode-fit-coordinate-origin-color: #757575;
+  --ti-lowcode-fit-coordinate-origin-color: var(--ti-lowcode-common-text-color-27);
   // more icon 选中背景色
-  --ti-lowcode-more-icon-selected-bg: #2e2e2e;
+  --ti-lowcode-more-icon-selected-bg: var(--ti-lowcode-common-component-bg-78);
   // 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-item-hover-color: var(--ti-lowcode-toolbar-icon-color);
+  --ti-lowcode-main-menu-bg: var(--ti-lowcode-common-component-bg-47);
+  --ti-lowcode-main-menu-item-hover-bg: var(--ti-lowcode-common-component-bg-46);
+  --ti-lowcode-main-menu-item-hover-color: var(--ti-lowcode-common-text-color-3);
   // spacing svg 图标上下颜色
-  --ti-lowcode-spacing-tb-color: #4d4d4d;
+  --ti-lowcode-spacing-tb-color: var(--ti-lowcode-common-text-color-34);
   // spacing svg 图标上下hover颜色
-  --ti-lowcode-spacing-tb-hover-color: #5a5a5a;
+  --ti-lowcode-spacing-tb-hover-color: var(--ti-lowcode-common-text-color-57);
   // spacing svg 图标左右颜色
-  --ti-lowcode-spacing-lr-color: #555;
+  --ti-lowcode-spacing-lr-color: var(--ti-lowcode-common-text-color-58);
   // spacing svg 图标左右hover颜色
-  --ti-lowcode-spacing-lr-hover-color: #626262;
+  --ti-lowcode-spacing-lr-hover-color: var(--ti-lowcode-common-text-color-59);
   // spacing svg 图标边框颜色
-  --ti-lowcode-spacing-border-color: #333;
+  --ti-lowcode-spacing-border-color: var(--ti-lowcode-common-border-color-17);
   // position direction 字体颜色
-  --ti-lowcode-position-direction-color: #ebebeb;
+  --ti-lowcode-position-direction-color: var(--ti-lowcode-common-text-color-39);
   // position direction 弹框显示时字体背景色
-  --ti-lowcode-position-direction-bg: #6b6b6b;
+  --ti-lowcode-position-direction-bg: var(--ti-lowcode-common-component-bg-76);
   // position Relative to 按钮字体颜色
-  --ti-lowcode-position-relative-to-color: #ababab;
+  --ti-lowcode-position-relative-to-color: var(--ti-lowcode-common-third-text-color);
   // position Relative to 按钮边框颜色
-  --ti-lowcode-position-relative-to-border-color: #363636;
+  --ti-lowcode-position-relative-to-border-color: var(--ti-lowcode-common-border-color-45);
   // position Relative to 按钮背景色
-  --ti-lowcode-position-relative-to-bg: #363636;
+  --ti-lowcode-position-relative-to-bg: var(--ti-lowcode-common-component-bg-34);
   // position 选中背景色
-  --ti-lowcode-position-selected-bg: #2b2b2b;
+  --ti-lowcode-position-selected-bg: var(--ti-lowcode-common-component-bg-51);
   // icon 图标选择弹框背景色
-  --ti-lowcode-icon-popover-bg: #404040;
+  --ti-lowcode-icon-popover-bg: var(--ti-lowcode-common-component-bg-57);
   // icon 图标选择弹框字体颜色
-  --ti-lowcode-icon-popover-color: #d9d9d9;
+  --ti-lowcode-icon-popover-color: var(--ti-lowcode-common-text-color-2);
   // icon 图标选择弹框hover颜色
-  --ti-lowcode-icon-popover-hover-color: #fff;
+  --ti-lowcode-icon-popover-hover-color: var(--ti-lowcode-common-text-color-3);
   // 查看区块详情icon颜色
-  --ti-lowcode-block-detail-icon-color: #f6eeee;
+  --ti-lowcode-block-detail-icon-color: var(--ti-lowcode-common-text-color-60);
 
   // 中间画布底部面包屑hover背景色
-  --ti-lowcode-breadcrumb-hover-bg: #fff;
+  --ti-lowcode-breadcrumb-hover-bg: var(--ti-lowcode-common-component-bg-47);
   // 弹框中tip提示边框颜色
-  --ti-lowcode-dialog-tip-border-color: #d9d9d9;
+  --ti-lowcode-dialog-tip-border-color: var(--ti-lowcode-common-border-color-44);
   // 弹框字体颜色 && 左侧面板 title 字体颜色
-  --ti-lowcode-dialog-font-color: #ebebeb;
+  --ti-lowcode-dialog-font-color: var(--ti-lowcode-common-text-color-39);
   // 输入框icon图标颜色
-  --ti-lowcode-input-icon-color: #737373;
+  --ti-lowcode-input-icon-color: var(--ti-lowcode-common-text-color-29);
   // 弹框字体颜色 && 图标颜色 && 输入框 suffix 字体颜色
-  --ti-lowcode-text-color: #6a6a6a;
+  --ti-lowcode-text-color: var(--ti-lowcode-common-text-color-1);
   // 右侧optionitem的边框色
-  --ti-lowcode-optionitem-border-color: #2b2b2b;
+  --ti-lowcode-optionitem-border-color: var(--ti-lowcode-common-border-color-32);
   // 右侧optionitem的背景色
-  --ti-lowcode-optionitem-background-color: #363636;
+  --ti-lowcode-optionitem-background-color: var(--ti-lowcode-common-component-bg-34);
   //tootip里的input框字体颜色
-  --ti-lowcode-tootip-input-color: #fff;
+  --ti-lowcode-tootip-input-color: var(--ti-lowcode-common-text-color-3);
   //tootip里的input背景颜色
-  --ti-lowcode-tootip-input-background-color: #363636;
+  --ti-lowcode-tootip-input-background-color: var(--ti-lowcode-common-component-bg-34);
   //tootip里的input框边框颜色
-  --ti-lowcode-tootip-input-border-color: #2b2b2b;
+  --ti-lowcode-tootip-input-border-color: var(--ti-lowcode-common-border-color-32);
   //tootip里的input框箭头颜色
-  --ti-lowcode-tootip-arrow-border-color: #404040;
+  --ti-lowcode-tootip-arrow-border-color: var(--ti-lowcode-common-border-color-43);
   // dialogBox弹框示例框边框色
-  --ti-lowcode-dialog-demo-border-color: #5e5e5e;
+  --ti-lowcode-dialog-demo-border-color: var(--ti-lowcode-common-border-color-23);
   // 关闭 icon 图标hover背景色 && 输入框后置文本hover背景色
-  --ti-lowcode-icon-hover-bg: rgba(255, 255, 255, 0.1);
+  --ti-lowcode-icon-hover-bg: var(--ti-lowcode-common-component-bg-35);
   // 说明提示框警告颜色
-  --ti-lowcode-description-warning-color: #facb4b;
+  --ti-lowcode-description-warning-color: var(--ti-lowcode-common-warning-color-2);
   // 说明提示框错误颜色
-  --ti-lowcode-description-error-color: #ff0000;
+  --ti-lowcode-description-error-color: var(--ti-lowcode-common-error-color-1);
   // switch checked状态边框色
-  --ti-lowcode-switch-checked-border-color: var(--ti-lowcode-common-primary-color);
+  --ti-lowcode-switch-checked-border-color: var(--ti-lowcode-common-border-color-29);
   // 文本链接颜色
-  --ti-lowcode-text-link-color: #6bb0ff;
+  --ti-lowcode-text-link-color: var(--ti-lowcode-common-text-color-31);
   // 大纲树node节点选中背景色
-  --ti-lowcode-node-current-bg: var(--ti-lowcode-common-primary-color);
+  --ti-lowcode-node-current-bg: var(--ti-lowcode-common-component-bg-56);
   // 大纲树node节点不可拖拽背景色 && 表单校验错误边框色
-  --ti-lowcode-node-nodrag-bg: #ea384c;
+  --ti-lowcode-node-nodrag-bg: var(--ti-lowcode-common-component-bg-45);
   // 成功状态按钮边框色
-  --ti-lowcode-success-border-color: #2ad986;
+  --ti-lowcode-success-border-color: var(--ti-lowcode-common-border-color-24);
   // 错误提示颜色
-  --ti-lowcode-error-tip-color: #de504e;
+  --ti-lowcode-error-tip-color: var(--ti-lowcode-common-text-color-42);
 
   // 画布拖拽元素背景色
-  --ti-lowcode-drag-ghost-bg: #888;
+  --ti-lowcode-drag-ghost-bg: var(--ti-lowcode-common-component-bg-36);
   // 画布拖拽位置线背景色
-  --ti-lowcode-ghost-line-bg: #ffb100;
+  --ti-lowcode-ghost-line-bg: var(--ti-lowcode-common-component-bg-37);
   // 描述颜色
   --ti-lowcode-description-color: var(--ti-lowcode-common-text-color-4);
   // 更多折叠面板头部hover背景色
-  --ti-lowcode-more-collapse-header-hover-color: #5a5a5a;
+  --ti-lowcode-more-collapse-header-hover-color: var(--ti-lowcode-common-text-color-57);
   // 绑定时icon图标颜色
-  --ti-lowcode-icon-bind-color: #006cff;
+  --ti-lowcode-icon-bind-color: var(--ti-lowcode-common-blue-22);
   // 创建字体颜色
-  --ti-lowcode-create-color: #575d6c;
+  --ti-lowcode-create-color: var(--ti-lowcode-common-text-color-25);
   // 删除按钮hover背景色 && 表单校验错误背景色
-  --ti-lowcode-delete-button-hover-bg: #c92c3f;
+  --ti-lowcode-delete-button-hover-bg: var(--ti-lowcode-common-component-bg-38);
   // input框focus 获焦时边框颜色
-  --ti-lowcode-input-focus-border-color: var(--ti-lowcode-common-primary-color);
+  --ti-lowcode-input-focus-border-color: var(--ti-lowcode-common-border-color-29);
   // 次要描述字体颜色 && 面包屑label 字体颜色
-  --ti-lowcode-description-minor-color: #ababab;
+  --ti-lowcode-description-minor-color: var(--ti-lowcode-common-third-text-color);
   // 样式设置 label 字体颜色
-  --ti-lowcode-style-setting-label-color: #8bbefa;
+  --ti-lowcode-style-setting-label-color: var(--ti-lowcode-common-text-color-32);
   // 样式设置 label 背景颜色
-  --ti-lowcode-style-setting-label-bg: rgba(76, 152, 241, 0.15);
+  --ti-lowcode-style-setting-label-bg: var(--ti-lowcode-common-component-bg-39);
   // 多人协作item项hover背景色
-  --ti-lowcode-user-item-hover-bg: rgba(94, 94, 94, 0.8);
+  --ti-lowcode-user-item-hover-bg: var(--ti-lowcode-common-component-bg-81);
   // 多人协作人员头像背景色
-  --ti-lowcode-user-header-bg: #919191;
+  --ti-lowcode-user-header-bg: var(--ti-lowcode-common-component-bg-41);
   // 工具栏提示框字体颜色
-  --ti-lowcode-toolbar-popover-color: #363636;
+  --ti-lowcode-toolbar-popover-color: var(--ti-lowcode-common-text-color-30);
   // 工具栏 media 提示框字体颜色
-  --ti-lowcode-media-popover-color: #adb0b8;
+  --ti-lowcode-media-popover-color: var(--ti-lowcode-common-text-color-35);
   // 工具栏 media 提示框标题字体颜色
-  --ti-lowcode-media-popover-title-color: #fff;
+  --ti-lowcode-media-popover-title-color: var(--ti-lowcode-common-text-color-3);
   // 工具栏icon禁用颜色
-  --ti-lowcode-disabled-color: #757575;
+  --ti-lowcode-disabled-color: var(--ti-lowcode-common-text-color-27);
   // 状态管理详情收缩摩纳哥编辑器icon颜色
-  --ti-lowcode-state-management-screen-icon-color: #fff;
+  --ti-lowcode-state-management-screen-icon-color: var(--ti-lowcode-common-text-color-3);
   // 状态管理搜索无结果显示颜色
-  --ti-lowcode-state-management-query-color: #fff;
+  --ti-lowcode-state-management-query-color: var(--ti-lowcode-common-text-color-3);
   // 状态管理代码编辑器边框颜色
-  --ti-lowcode-state-management-monaco-editor-border-color: transparent;
+  --ti-lowcode-state-management-monaco-editor-border-color: var(--ti-lowcode-common-border-color-18);
 
   // Popover提示框
-  --ti-lowcode-popover-color: var(--ti-lowcode-breadcrumb-color);
-  --ti-lowcode-popover-bg-color: #191919;
+  --ti-lowcode-popover-color: var(--ti-lowcode-common-text-color-34);
+  --ti-lowcode-popover-bg-color: var(--ti-lowcode-common-component-bg-79);
   // 自定义类名lowcode弹框背景色
-  --ti-lowcode-custom-popover-bg-color: #404040;
+  --ti-lowcode-custom-popover-bg-color: var(--ti-lowcode-common-component-bg-57);
   // 自定义类名lowcode弹框字体颜色
-  --ti-lowcode-custom-popover-text-color: #d9d9d9;
+  --ti-lowcode-custom-popover-text-color: var(--ti-lowcode-common-text-color-2);
   // 自定义类名lowcode弹框边框颜色
-  --ti-lowcode-custom-popover-border-color: #313131;
+  --ti-lowcode-custom-popover-border-color: var(--ti-lowcode-common-border-color-28);
 
   // 滚动条thumb颜色
-  --ti-lowcode-scrollbar-thumb-background-color: rgba(121, 121, 121, 0.4);
+  --ti-lowcode-scrollbar-thumb-background-color: var(--ti-lowcode-common-component-bg-80);
   // 可点击交互的文字颜色
-  --ti-lowcode-common-interaction-text-color: #5e7ce0;
+  --ti-lowcode-interaction-text-color: var(--ti-lowcode-common-text-color-33);
   // 数字输入框组件下拉列表文字颜色
-  --ti-lowcode-numeric-unit-text-color: var(--ti-lowcode-text-color);
+  --ti-lowcode-numeric-unit-text-color: var(--ti-lowcode-common-text-color-1);
 
   //左侧插件栏hover背景色
-  --ti-plugins-hover-bg-color: #ffffff;
+  --ti-plugins-hover-bg-color: var(--ti-lowcode-common-component-bg);
   //左侧插件栏hover文字色
-  --ti-plugins-hover-text-color: #4d4d4d;
+  --ti-plugins-hover-text-color: var(--ti-lowcode-common-text-color-34);
   //左侧插件栏hover边框色
-  --ti-plugins-hover-border-color: #9e9e9e;
+  --ti-plugins-hover-border-color: var(--ti-lowcode-common-border-color-25);
   // 表格行间背景色
-  --ti-lowcode-new-table-row-sepline-background: #1f1f1f;
+  --ti-lowcode-new-table-row-sepline-background: var(--ti-lowcode-common-component-bg-61);
 
   // 查看指引视频
-  --ti-lowcode-block-video-tip-color: var(--ti-lowcode-base-primary-color-2);
+  --ti-lowcode-block-video-tip-color: var(--ti-lowcode-common-primary-color);
 
   // 属性设置、事件设置等列表的背景色
-  --ti-lowcode-meta-list-item-border-color: #2b2b2b;
+  --ti-lowcode-meta-list-item-border-color: var(--ti-lowcode-common-border-color-32);
   // 属性设置、事件设置等列表的背景色
-  --ti-lowcode-meta-list-item-bg-color: #363636;
+  --ti-lowcode-meta-list-item-bg-color: var(--ti-lowcode-common-component-bg-34);
 
   // 空数据图标颜色
-  --ti-lowcode-empty-icon-color: #fff;
-  --ti-lowcode-popover-option-popper-border-color: transparent;
-  --ti-lowcode-toolbar-hover-popper: var(--ti-lowcode-common-primary-text-color);
+  --ti-lowcode-empty-icon-color: var(--ti-lowcode-common-text-color-3);
+  --ti-lowcode-popover-option-popper-border-color: var(--ti-lowcode-common-border-color-18);
+  --ti-lowcode-toolbar-hover-popper: var(--ti-lowcode-common-text-color-3);
 }
diff --git a/packages/theme/light/base.less b/packages/theme/light/base.less
new file mode 100644
index 000000000..db2e35310
--- /dev/null
+++ b/packages/theme/light/base.less
@@ -0,0 +1,273 @@
+: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;
+
+  // 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-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/datasource.less b/packages/theme/light/datasource.less
index 6767b3276..5082b633c 100644
--- a/packages/theme/light/datasource.less
+++ b/packages/theme/light/datasource.less
@@ -2,7 +2,7 @@
   --ti-lowcode-datasource-toolbar-icon-color: var(--ti-lowcode-common-text-color-8);
   --ti-lowcode-datasource-tabs-border-color: var(--ti-lowcode-common-border-color-8);
   --ti-lowcode-datasource-toolbar-breadcrumb-color: var(--ti-lowcode-common-dark-2);
-  --ti-lowcode-datasource-json-border-colorr: var(--ti-lowcode-common-primary-color);
+  --ti-lowcode-datasource-json-border-color: var(--ti-lowcode-common-primary-color);
   --ti-lowcode-datasource-tree-border-color: var(--ti-lowcode-common-border-color-9);
   --ti-lowcode-datasource-common-primary-color: var(--ti-lowcode-common-primary-color);
   --ti-lowcode-datasource-success-border-color: var(--ti-lowcode-common-border-color-9);
diff --git a/packages/theme/light/index.less b/packages/theme/light/index.less
index 54cb05456..eef6cef06 100644
--- a/packages/theme/light/index.less
+++ b/packages/theme/light/index.less
@@ -1,5 +1,6 @@
 @import '../common/base.less';
 @import '../common/global.less';
+@import './base.less';
 // 主题配置优先于公共配置
 @import './variable.less';
 @import './tutorial.less';
diff --git a/packages/theme/light/variable.less b/packages/theme/light/variable.less
index e5cc438c7..8d1e965e2 100644
--- a/packages/theme/light/variable.less
+++ b/packages/theme/light/variable.less
@@ -1,7 +1,7 @@
 // 亮色主题
 :root {
   // 基础配置，前缀为 --base
-  --base-min-width: 1280px;
+  --ti-common-min-width: 1280px;
 
   // 插件面板
   --ti-lowcode-plugin-panel-title-color: var(--ti-lowcode-common-text-title-color); // 插件面板标题色