From ceb8bae97b35db9c9e9e03f0a755056de02da155 Mon Sep 17 00:00:00 2001
From: wenmine <wwmmail@foxmail.com>
Date: Tue, 21 Jan 2025 11:10:27 +0800
Subject: [PATCH] feat(refactor/theme): change incorrect css variables to the
 common variables and delete theme/base.less (#1049)

---
 .../src/components/CanvasDivider.vue          |   4 +-
 packages/common/component/PluginBlockList.vue |   4 +-
 packages/plugins/page/src/PageGeneral.vue     |  13 +-
 packages/plugins/page/src/PageHome.vue        |   4 +-
 packages/plugins/page/src/PageInputOutput.vue |   2 +-
 packages/plugins/schema/src/Main.vue          |   2 +-
 packages/plugins/script/src/Main.vue          |   2 +-
 packages/settings/design/src/App.vue          |   1 -
 .../design/src/components/PropertyCanvas.vue  |   2 +-
 .../design/src/components/PropertyList.vue    |   2 +-
 .../components/background/ImageSetting.vue    |  27 --
 .../components/background/RadialGradient.vue  |  27 --
 packages/theme/dark/base.less                 | 273 -----------------
 packages/theme/dark/block.less                |  66 ++---
 packages/theme/dark/bridge.less               |  11 +-
 packages/theme/dark/events.less               |  45 ++-
 packages/theme/dark/gpt-dialog.less           |  68 +++--
 packages/theme/dark/help.less                 |  18 +-
 packages/theme/dark/i18n.less                 |  10 +-
 packages/theme/dark/index.less                |   1 -
 packages/theme/dark/life-cycles.less          |   8 +-
 packages/theme/dark/materials.less            |  24 +-
 packages/theme/dark/metaComponent.less        |  61 +---
 packages/theme/dark/pageManage.less           |  33 +--
 packages/theme/dark/plugin-js.less            |   6 +-
 packages/theme/dark/toolbar.less              |  22 +-
 packages/theme/dark/tree.less                 |   7 +-
 packages/theme/dark/tutorial.less             |   4 +-
 packages/theme/dark/variable.less             | 256 +++-------------
 packages/theme/light/base.less                | 275 ------------------
 packages/theme/light/block.less               |  60 ++--
 packages/theme/light/bridge.less              |  11 +-
 packages/theme/light/events.less              |  45 ++-
 packages/theme/light/gpt-dialog.less          |   8 +-
 packages/theme/light/help.less                |  17 +-
 packages/theme/light/i18n.less                |  14 +-
 packages/theme/light/index.less               |   1 -
 packages/theme/light/life-cycles.less         |   8 +-
 packages/theme/light/materials.less           |  26 +-
 packages/theme/light/metaComponent.less       |  60 +---
 packages/theme/light/pageManage.less          |  31 +-
 packages/theme/light/plugin-js.less           |   6 +-
 packages/theme/light/toolbar.less             |  21 +-
 packages/theme/light/tree.less                |   8 +-
 packages/theme/light/tutorial.less            |   4 +-
 packages/theme/light/variable.less            | 246 +++-------------
 46 files changed, 356 insertions(+), 1488 deletions(-)
 delete mode 100644 packages/theme/dark/base.less
 delete mode 100644 packages/theme/light/base.less

diff --git a/packages/canvas/container/src/components/CanvasDivider.vue b/packages/canvas/container/src/components/CanvasDivider.vue
index 0b333fcd1..1fb5f1130 100644
--- a/packages/canvas/container/src/components/CanvasDivider.vue
+++ b/packages/canvas/container/src/components/CanvasDivider.vue
@@ -201,7 +201,7 @@ export default {
   width: 24px;
   height: 24px;
   border-radius: 50%;
-  background-color: var(--ti-lowcode-common-text-color-3);
+  background-color: var(--te-common-bg-default);
   cursor: pointer;
   z-index: 3;
   &.divider-vertical {
@@ -223,7 +223,7 @@ export default {
   .divider {
     width: 12px;
     height: 12px;
-    color: var(--ti-lowcode-common-text-color-3);
+    color: var(--te-base-gray-0);
     background-size: contain;
     background-repeat: no-repeat;
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAACO0lEQVRIDa2Uy6tNURzHN7cwMUAmHncot0QeV5QiBgZKmWEgzDDx+ANu5soMcUkxIY+iEFIKEZnIyMC9GZAMrke6hXt9Pvus1VnntPbZ53B/9dnrt36P7zpr7bVPUTRtD+5j+Arv4QwshDpbTIG1o2CvGmq12CVmk/ADnsGnMHccgCpbRiLWjuA/BTXUUrM0VzNwD+aVkcbjIMNveJnEUrePyWuYgP1JYi6+WmqWO3FLrpqKMy3tHE8LtzemLc99ITfcEm1MXERNtYsxcGs520nQBV61JWcyHw253W25OFVzbDqPj1D1MheF6tWM24LvcAD6w7yqdwF5tYvT4K90y6m5zQ/wE37BC9Bmw2f4Ah6DNdamFo/vlEHP3pvwB87CLjgGNrrwEbgY/K2MQ8E/zHg0+NbaY68aaqmpdmlLeT4HBSPf8RXQloA3ylvzDTx/34OmsLWxz9Hdqtlivo/l4NXy1syB1C4ziSK547THXjXU6tk20uECnn1fz91dNJynJu5gUxf1PZV4nr6DdzABj2BK7Rpq/votcDX4GxinxNagovjDoOZLdBcPwvy/h/souMDaROlGiK1PYv/kbg5C19u6V4b43bZ4z1M/GF/uQKbzFjF3NpjJdRXaEQQuVFQr7AK3K/Idw36Jb2Ec+jtU3iHnIqs61GRTe4naeDKbbQbXhbqbzVC9N4OSEfAPbD7UmbfMa7uirjDmD+H464/HQM3oB2f9lVxd7l9vFoVv4ESuIRN7QkzxaZlc8RcdnI7tMHZBlAAAAABJRU5ErkJggg==);
diff --git a/packages/common/component/PluginBlockList.vue b/packages/common/component/PluginBlockList.vue
index 326513312..dbdd38179 100644
--- a/packages/common/component/PluginBlockList.vue
+++ b/packages/common/component/PluginBlockList.vue
@@ -358,7 +358,7 @@ export default {
   padding: 12px;
   background: var(--ti-lowcode-component-block-list-shortcut-bg);
   border-radius: 5px;
-  border: 1px solid var(--ti-lowcode-common-border-color-4);
+  border: 1px solid var(--te-common-border-default);
   top: v-bind('state.top');
   .block-shortcut-title {
     color: var(--ti-lowcode-component-block-list-shortcut-title-color);
@@ -741,7 +741,7 @@ export default {
     box-sizing: border-box;
     cursor: pointer;
     &:hover {
-      color: var(--ti-lowcode-common-primary-text-color);
+      color: var(--te-common-text-primary);
     }
     .list-item-icon {
       font-size: 14px;
diff --git a/packages/plugins/page/src/PageGeneral.vue b/packages/plugins/page/src/PageGeneral.vue
index 252da0623..2bd565522 100644
--- a/packages/plugins/page/src/PageGeneral.vue
+++ b/packages/plugins/page/src/PageGeneral.vue
@@ -252,9 +252,8 @@ export default {
     :deep(.tiny-form-item) {
       margin-bottom: 16px;
       .tiny-input-group__prepend {
-        border: 1px solid var(--ti-lowcode-page-manage-input-group-border-color);
-        background: var(--ti-lowcode-page-manage-input-group-color);
-        border-right: 1px solid var(--ti-lowcode-page-manage-input-group-border-right-color);
+        border: 1px solid var(--te-common-border-default);
+        background: var(--te-common-bg-default);
       }
       .page-type-radio {
         color: var(--ti-lowcode-page-manage-title-background-text-color);
@@ -268,18 +267,15 @@ export default {
     }
   }
   .tip {
-    color: var(--ti-lowcode-page-manage-tip-border-color);
+    color: var(--ti-lowcode-page-manage-tip-text-color);
     font-size: 12px;
     border-radius: 3px;
     display: flex;
     align-items: center;
     height: 16px;
     margin-top: 4px;
-    .icon {
-      color: var(--ti-lowcode-page-manage-icon-text-color);
-    }
     .text {
-      color: var(--ti-lowcode-page-manage-btn-text-color);
+      color: var(--te-common-text-weaken);
     }
     .text-dim {
       color: var(--ti-lowcode-plugin-panel-title-color);
@@ -290,7 +286,6 @@ export default {
 <style lang="less">
 .tiny-select-dropdown.parent-fold-select-dropdown {
   padding: 8px 0;
-
   .tiny-tree {
     .tiny-tree-node {
       .tiny-tree-node__content {
diff --git a/packages/plugins/page/src/PageHome.vue b/packages/plugins/page/src/PageHome.vue
index 31311d4c9..0655441ad 100644
--- a/packages/plugins/page/src/PageHome.vue
+++ b/packages/plugins/page/src/PageHome.vue
@@ -106,13 +106,13 @@ export default {
   }
 
   .tip {
-    color: var(--ti-lowcode-page-manage-btn-text-color);
+    color: var(--te-common-text-weaken);
     margin-top: 4px;
     margin-bottom: 12px;
     font-size: 11px;
     line-height: 16px;
     span {
-      color: var(--ti-lowcode-page-manage-btn-text-color);
+      color: var(--te-common-text-weaken);
     }
     .home-page {
       display: inline-block;
diff --git a/packages/plugins/page/src/PageInputOutput.vue b/packages/plugins/page/src/PageInputOutput.vue
index de99e0ad8..d9448bb0c 100644
--- a/packages/plugins/page/src/PageInputOutput.vue
+++ b/packages/plugins/page/src/PageInputOutput.vue
@@ -101,7 +101,7 @@ export default {
 
 <style lang="less" scoped>
 .input-or-output {
-  color: var(--ti-lowcode-page-manage-icon-text-color);
+  color: var(--te-common-text-secondary);
   .life-cycle-alert {
     color: var(--ti-lowcode-life-cycle-alert-color);
     height: 28px;
diff --git a/packages/plugins/schema/src/Main.vue b/packages/plugins/schema/src/Main.vue
index 71dd540b8..58509678d 100644
--- a/packages/plugins/schema/src/Main.vue
+++ b/packages/plugins/schema/src/Main.vue
@@ -205,7 +205,7 @@ export default {
         width: 6px;
         height: 6px;
         border-radius: 50%;
-        background-color: var(--ti-lowcode-common-error-color);
+        background-color: var(--te-common-color-error);
         display: block;
         z-index: 100;
         position: absolute;
diff --git a/packages/plugins/script/src/Main.vue b/packages/plugins/script/src/Main.vue
index 22099bba6..a5e2ec140 100644
--- a/packages/plugins/script/src/Main.vue
+++ b/packages/plugins/script/src/Main.vue
@@ -158,7 +158,7 @@ export default {
         .dots {
           width: 6px;
           height: 6px;
-          background: var(--ti-lowcode-common-error-color);
+          background: var(--te-common-color-error);
           border-radius: 50%;
           position: absolute;
           top: 9px;
diff --git a/packages/settings/design/src/App.vue b/packages/settings/design/src/App.vue
index 1e3c55f17..ecde2bf79 100644
--- a/packages/settings/design/src/App.vue
+++ b/packages/settings/design/src/App.vue
@@ -98,7 +98,6 @@ export default {
 <style lang="less">
 :root {
   --ti-lowcode-common-secondary-text-color: #adb0b8;
-  --ti-lowcode-common-border-color: #dfe1e6;
   --ti-lowcode-common-hover-bg-color: #f2f5fc;
   --ti-lowcode-mask-bg: #fafafa;
   --max-height: calc(65vh - 70px);
diff --git a/packages/settings/design/src/components/PropertyCanvas.vue b/packages/settings/design/src/components/PropertyCanvas.vue
index f133672e0..ad1c150eb 100644
--- a/packages/settings/design/src/components/PropertyCanvas.vue
+++ b/packages/settings/design/src/components/PropertyCanvas.vue
@@ -236,7 +236,7 @@ export default {
     .tiny-collapse-item {
       &.is-active {
         .tiny-collapse-item__header {
-          border-bottom: 1px solid var(--ti-lowcode-common-border-color);
+          border-bottom: 1px solid var(--te-common-border-divider);
           height: 36px;
         }
       }
diff --git a/packages/settings/design/src/components/PropertyList.vue b/packages/settings/design/src/components/PropertyList.vue
index ae0f6bab4..63a97ce1f 100644
--- a/packages/settings/design/src/components/PropertyList.vue
+++ b/packages/settings/design/src/components/PropertyList.vue
@@ -113,7 +113,7 @@ export default {
   color: var(--te-common-text-primary);
   padding: 7px 7px;
   list-style: none;
-  border: 1px solid var(--ti-lowcode-common-border-color);
+  border: 1px solid var(--te-common-border-divider);
 
   &:hover {
     background: var(--ti-lowcode-common-hover-bg-color);
diff --git a/packages/settings/styles/src/components/background/ImageSetting.vue b/packages/settings/styles/src/components/background/ImageSetting.vue
index dd1fb79f2..e8d50e7c5 100644
--- a/packages/settings/styles/src/components/background/ImageSetting.vue
+++ b/packages/settings/styles/src/components/background/ImageSetting.vue
@@ -268,33 +268,6 @@ onMounted(() => {
     }
   }
 }
-.text-wrap {
-  display: flex;
-  flex-direction: column;
-  font-size: 12px;
-  color: var(--te-common-text-secondary);
-  margin-left: 8px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  & > span {
-    display: inline-block;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    &:first-child {
-      margin-bottom: 4px;
-    }
-    &:last-child {
-      display: flex;
-      align-items: center;
-      margin-top: 2px;
-    }
-  }
-  .size {
-    color: var(--te-common-text-secondary);
-  }
-}
 .choose-image {
   border-color: var(--te-common-border-default);
   outline: 0px;
diff --git a/packages/settings/styles/src/components/background/RadialGradient.vue b/packages/settings/styles/src/components/background/RadialGradient.vue
index 1a4930eb3..f6613ba74 100644
--- a/packages/settings/styles/src/components/background/RadialGradient.vue
+++ b/packages/settings/styles/src/components/background/RadialGradient.vue
@@ -130,33 +130,6 @@ onMounted(() => {
   background-repeat: no-repeat;
   background-position: 50% 50%;
 }
-.text-wrap {
-  display: flex;
-  flex-direction: column;
-  font-size: 12px;
-  color: var(--te-common-text-secondary);
-  margin-left: 8px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  & > span {
-    display: inline-block;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    &:first-child {
-      margin-bottom: 4px;
-    }
-    &:last-child {
-      display: flex;
-      align-items: center;
-      margin-top: 2px;
-    }
-  }
-  .size {
-    color: var(--ti-lowcode-common-third-text-color);
-  }
-}
 .choose-image {
   border-color: rgb(54, 54, 54);
   outline: 0px;
diff --git a/packages/theme/dark/base.less b/packages/theme/dark/base.less
deleted file mode 100644
index 2713efff9..000000000
--- a/packages/theme/dark/base.less
+++ /dev/null
@@ -1,273 +0,0 @@
-:root {
-  // 灰阶
-  --ti-lowcode-base-gray-0: #fff;
-  --ti-lowcode-base-gray-10: #e6e6e6;
-  --ti-lowcode-base-gray-20: #d9d9d9;
-  --ti-lowcode-base-gray-30: #ccc;
-  --ti-lowcode-base-gray-40: #a6a6a6;
-  --ti-lowcode-base-gray-50: #808080;
-  --ti-lowcode-base-gray-60: #595959;
-  --ti-lowcode-base-gray-70: #333;
-  --ti-lowcode-base-gray-80: #292929;
-  --ti-lowcode-base-gray-90: #1f1f1f;
-  --ti-lowcode-base-gray-95: #141414;
-  --ti-lowcode-base-gray-100: #000;
-
-  // expand-red
-  --ti-lowcode-base-red-1: #ffeae8;
-  --ti-lowcode-base-red-2: #fccdca;
-  --ti-lowcode-base-red-3: #faa9a5;
-  --ti-lowcode-base-red-4: #fa8682;
-  --ti-lowcode-base-red-5: #f76360;
-  --ti-lowcode-base-red-6: #f23030;
-  --ti-lowcode-base-red-7: #cc272a;
-  --ti-lowcode-base-red-8: #a3171c;
-  --ti-lowcode-base-red-9: #78080e;
-  --ti-lowcode-base-red-10: #4d0005;
-  --ti-lowcode-base-red-11: #a64242;
-  --ti-lowcode-base-red-12: #d4827f;
-  --ti-lowcode-base-red-13: #f2c5c2;
-
-  // expand-orange
-  --ti-lowcode-base-orange-1: #fff5e8;
-  --ti-lowcode-base-orange-2: #fcdfb8;
-  --ti-lowcode-base-orange-3: #fcc98b;
-  --ti-lowcode-base-orange-4: #fcb25c;
-  --ti-lowcode-base-orange-5: #ff9a2e;
-  --ti-lowcode-base-orange-6: #ff8800;
-  --ti-lowcode-base-orange-7: #d96900;
-  --ti-lowcode-base-orange-8: #a64d00;
-  --ti-lowcode-base-orange-9: #733400;
-  --ti-lowcode-base-orange-10: #4d2201;
-  --ti-lowcode-base-orange-11: #9e6d3f;
-  --ti-lowcode-base-orange-12: #d6a981;
-  --ti-lowcode-base-orange-13: #f2d8c2;
-
-  // expand-yellow
-  --ti-lowcode-base-yellow-1: #fcf9eb;
-  --ti-lowcode-base-yellow-2: #fcf0c2;
-  --ti-lowcode-base-yellow-3: #fae396;
-  --ti-lowcode-base-yellow-4: #f7d56d;
-  --ti-lowcode-base-yellow-5: #f7c845;
-  --ti-lowcode-base-yellow-6: #fcbe1e;
-  --ti-lowcode-base-yellow-7: #d99b0b;
-  --ti-lowcode-base-yellow-8: #a67711;
-  --ti-lowcode-base-yellow-9: #7a5202;
-  --ti-lowcode-base-yellow-10: #4d3200;
-  --ti-lowcode-base-yellow-11: #9e7e3f;
-  --ti-lowcode-base-yellow-12: #d4b57f;
-  --ti-lowcode-base-yellow-13: #e6d3b8;
-
-  // expand-lemon
-  --ti-lowcode-base-lemon-1: #fcfae8;
-  --ti-lowcode-base-lemon-2: #fcf6c2;
-  --ti-lowcode-base-lemon-3: #fcf092;
-  --ti-lowcode-base-lemon-4: #fae969;
-  --ti-lowcode-base-lemon-5: #f7e04a;
-  --ti-lowcode-base-lemon-6: #f7d916;
-  --ti-lowcode-base-lemon-7: #d9bb16;
-  --ti-lowcode-base-lemon-8: #a38708;
-  --ti-lowcode-base-lemon-9: #756002;
-  --ti-lowcode-base-lemon-10: #4d3d00;
-  --ti-lowcode-base-lemon-11: #9e8f46;
-  --ti-lowcode-base-lemon-12: #d6c581;
-  --ti-lowcode-base-lemon-13: #eddfb2;
-
-  // expand-lime
-  --ti-lowcode-base-lime-1: #f8fae3;
-  --ti-lowcode-base-lime-2: #eff5bf;
-  --ti-lowcode-base-lime-3: #e2ed8e;
-  --ti-lowcode-base-lime-4: #d5e667;
-  --ti-lowcode-base-lime-5: #c6de3e;
-  --ti-lowcode-base-lime-6: #b2d119;
-  --ti-lowcode-base-lime-7: #95b312;
-  --ti-lowcode-base-lime-8: #728c0a;
-  --ti-lowcode-base-lime-9: #576e05;
-  --ti-lowcode-base-lime-10: #3b4d00;
-  --ti-lowcode-base-lime-11: #808c46;
-  --ti-lowcode-base-lime-12: #c1cc7a;
-  --ti-lowcode-base-lime-13: #3b4d00;
-
-  // expand-kelly
-  --ti-lowcode-base-kelly-1: #f2fae6;
-  --ti-lowcode-base-kelly-2: #daf2bb;
-  --ti-lowcode-base-kelly-3: #b9e683;
-  --ti-lowcode-base-kelly-4: #9edb58;
-  --ti-lowcode-base-kelly-5: #7dcc29;
-  --ti-lowcode-base-kelly-6: #5cb300;
-  --ti-lowcode-base-kelly-7: #4b9902;
-  --ti-lowcode-base-kelly-8: #3c8001;
-  --ti-lowcode-base-kelly-9: #2e6600;
-  --ti-lowcode-base-kelly-10: #1f4700;
-  --ti-lowcode-base-kelly-11: #628c38;
-  --ti-lowcode-base-kelly-12: #a2c777;
-  --ti-lowcode-base-kelly-13: #d2e6bb;
-
-  // expand-green
-  --ti-lowcode-base-green-1: #e8fced;
-  --ti-lowcode-base-green-2: #bbf2c8;
-  --ti-lowcode-base-green-3: #82e09a;
-  --ti-lowcode-base-green-4: #51d675;
-  --ti-lowcode-base-green-5: #25c251;
-  --ti-lowcode-base-green-6: #00b336;
-  --ti-lowcode-base-green-7: #029931;
-  --ti-lowcode-base-green-8: #01802b;
-  --ti-lowcode-base-green-9: #006624;
-  --ti-lowcode-base-green-10: #004a1b;
-  --ti-lowcode-base-green-11: #3d995c;
-  --ti-lowcode-base-green-12: #77c78f;
-  --ti-lowcode-base-green-13: #b8e6c7;
-
-  // expand-mint
-  --ti-lowcode-base-mint-1: #e8fcfa;
-  --ti-lowcode-base-mint-2: #bff5ef;
-  --ti-lowcode-base-mint-3: #8be8e0;
-  --ti-lowcode-base-mint-4: #5dded5;
-  --ti-lowcode-base-mint-5: #38d6ce;
-  --ti-lowcode-base-mint-6: #10c7c1;
-  --ti-lowcode-base-mint-7: #0aaba8;
-  --ti-lowcode-base-mint-8: #048c8c;
-  --ti-lowcode-base-mint-9: #046466;
-  --ti-lowcode-base-mint-10: #004547;
-  --ti-lowcode-base-mint-11: #3d9996;
-  --ti-lowcode-base-mint-12: #77c7c2;
-  --ti-lowcode-base-mint-13: #b8e6e1;
-
-  // expand-sky
-  --ti-lowcode-base-sky-1: #e8f8fc;
-  --ti-lowcode-base-sky-2: #c4f2ff;
-  --ti-lowcode-base-sky-3: #9de4fa;
-  --ti-lowcode-base-sky-4: #79d8f7;
-  --ti-lowcode-base-sky-5: #58cbf5;
-  --ti-lowcode-base-sky-6: #33bcf2;
-  --ti-lowcode-base-sky-7: #1f9acf;
-  --ti-lowcode-base-sky-8: #1075a3;
-  --ti-lowcode-base-sky-9: #065278;
-  --ti-lowcode-base-sky-10: #00304a;
-  --ti-lowcode-base-sky-11: #3d7f99;
-  --ti-lowcode-base-sky-12: #7ab8cc;
-  --ti-lowcode-base-sky-13: #b6e5f2;
-
-  // expand-blue
-  --ti-lowcode-base-blue-1: #e3effa;
-  --ti-lowcode-base-blue-2: #c4e1ff;
-  --ti-lowcode-base-blue-3: #99c9ff;
-  --ti-lowcode-base-blue-4: #68abfc;
-  --ti-lowcode-base-blue-5: #4191fa;
-  --ti-lowcode-base-blue-6: #1476ff;
-  --ti-lowcode-base-blue-7: #0f5ed4;
-  --ti-lowcode-base-blue-8: #0845a6;
-  --ti-lowcode-base-blue-9: #022e7a;
-  --ti-lowcode-base-blue-10: #001a4a;
-  --ti-lowcode-base-blue-11: #3d6899;
-  --ti-lowcode-base-blue-12: #7fa6d4;
-  --ti-lowcode-base-blue-13: #b6d4f2;
-
-  // expand-indigo
-  --ti-lowcode-base-indigo-1: #eee8ff;
-  --ti-lowcode-base-indigo-2: #ddd7fa;
-  --ti-lowcode-base-indigo-3: #b19cf7;
-  --ti-lowcode-base-indigo-4: #957af5;
-  --ti-lowcode-base-indigo-5: #6e51e0;
-  --ti-lowcode-base-indigo-6: #512fd6;
-  --ti-lowcode-base-indigo-7: #391eb0;
-  --ti-lowcode-base-indigo-8: #27108f;
-  --ti-lowcode-base-indigo-9: #19056e;
-  --ti-lowcode-base-indigo-10: #0e004d;
-  --ti-lowcode-base-indigo-11: #584d99;
-  --ti-lowcode-base-indigo-12: #847acc;
-  --ti-lowcode-base-indigo-13: #bbb8e6;
-
-  // expand-purple
-  --ti-lowcode-base-purple-1: #f5e8ff;
-  --ti-lowcode-base-purple-2: #e4c5fc;
-  --ti-lowcode-base-purple-3: #d0a1f7;
-  --ti-lowcode-base-purple-4: #b878f0;
-  --ti-lowcode-base-purple-5: #9f53e6;
-  --ti-lowcode-base-purple-6: #832fd6;
-  --ti-lowcode-base-purple-7: #641eb0;
-  --ti-lowcode-base-purple-8: #4c1091;
-  --ti-lowcode-base-purple-9: #370673;
-  --ti-lowcode-base-purple-10: #20004d;
-  --ti-lowcode-base-purple-11: #683d99;
-  --ti-lowcode-base-purple-12: #a07acc;
-  --ti-lowcode-base-purple-13: #cbb8e6;
-
-  // expand-pink
-  --ti-lowcode-base-pink-1: #fce6fb;
-  --ti-lowcode-base-pink-2: #fcc2f9;
-  --ti-lowcode-base-pink-3: #f794f2;
-  --ti-lowcode-base-pink-4: #eb67e6;
-  --ti-lowcode-base-pink-5: #e841e5;
-  --ti-lowcode-base-pink-6: #d91ad9;
-  --ti-lowcode-base-pink-7: #b50fb8;
-  --ti-lowcode-base-pink-8: #8f0a94;
-  --ti-lowcode-base-pink-9: #6b0370;
-  --ti-lowcode-base-pink-10: #47004d;
-  --ti-lowcode-base-pink-11: #993d99;
-  --ti-lowcode-base-pink-12: #c97acc;
-  --ti-lowcode-base-pink-13: #e2b8e6;
-
-  // expand-rose
-  --ti-lowcode-base-rose-1: #fce6ef;
-  --ti-lowcode-base-rose-2: #ffc4de;
-  --ti-lowcode-base-rose-3: #fa9bc9;
-  --ti-lowcode-base-rose-4: #f56cac;
-  --ti-lowcode-base-rose-5: #eb4696;
-  --ti-lowcode-base-rose-6: #e61c81;
-  --ti-lowcode-base-rose-7: #b50e65;
-  --ti-lowcode-base-rose-8: #940a54;
-  --ti-lowcode-base-rose-9: #70033f;
-  --ti-lowcode-base-rose-10: #4d002b;
-  --ti-lowcode-base-rose-11: #993d6e;
-  --ti-lowcode-base-rose-12: #cc7aa6;
-  --ti-lowcode-base-rose-13: #e6b8d2;
-
-  // 公司品牌色
-  --ti-lowcode-base-brand-color: #c7000b;
-
-  // 主色
-  --ti-lowcode-base-primary-color-1: #e6e6e6;
-  --ti-lowcode-base-primary-color-2: #1476ff;
-
-  // 背景色
-  --ti-lowcode-base-bg: #141414;
-  --ti-lowcode-base-bg-1: rgba(0, 0, 0, 0.05);
-  --ti-lowcode-base-bg-2: #333;
-  --ti-lowcode-base-bg-3: #e6e6e6;
-  --ti-lowcode-base-bg-4: #a6a6a6;
-  --ti-lowcode-base-bg-5: #000;
-  --ti-lowcode-base-bg-6: #a6a6a61a;
-
-  // 文本色
-  --ti-lowcode-base-text-color: #e6e6e6;
-  --ti-lowcode-base-text-color-1: #a6a6a6;
-  --ti-lowcode-base-text-color-2: #1476ff;
-  --ti-lowcode-base-text-color-3: #808080;
-  --ti-lowcode-base-text-color-4: #595959;
-
-  // 文本链接色
-  --ti-lowcode-base-text-link-color: #e6e6e6;
-  --ti-lowcode-base-text-link-color-1: #a6a6a6;
-  --ti-lowcode-base-text-link-color-2: #595959;
-  --ti-lowcode-base-text-link-color-3: #fff;
-
-  // 按钮边框色
-  --ti-lowcode-base-secondary-button-border-color: #a6a6a6;
-  --ti-lowcode-base-secondary-button-border-hover-color: #3d3d3d;
-  --ti-lowcode-base-default-button-border-color: #595959;
-  --ti-lowcode-base-default-button-border-hover-color: #e6e6e6;
-  --ti-lowcode-base-default-button-border-disable-color: #dbdbdb;
-
-  // 分割线
-  --ti-lowcode-base-split-color-1: rgba(255, 255, 255, 0.08); // 白色背景分割线
-  --ti-lowcode-base-split-color-2: rgba(255, 255, 255, 0.15); // 灰色背景分割线
-
-  // 状态色
-  --ti-lowcode-base-error-color: #f23030;
-  --ti-lowcode-base-warn-color: #ff8800;
-  --ti-lowcode-base-warn-color-1: #f7d916;
-  --ti-lowcode-base-success-color: #5cb300;
-  --ti-lowcode-base-prompt-color: #1476ff;
-  --ti-lowcode-base-invalidate-color: #ebebeb;
-}
diff --git a/packages/theme/dark/block.less b/packages/theme/dark/block.less
index 2b43fe9cb..82c60d613 100644
--- a/packages/theme/dark/block.less
+++ b/packages/theme/dark/block.less
@@ -1,57 +1,39 @@
 :root {
-  // 历史备份列表
-  --ti-lowcode-component-block-history-list-item-border-color: var(--ti-lowcode-common-border-color-1); // 组件边框色
-  // 组件 hover 背景 色
-  --ti-lowcode-component-block-history-list-item-hover-bg: var(--ti-lowcode-common-component-hover-bg);
-  // 组件默认颜色
-  --ti-lowcode-component-block-history-list-item-text-color: var(--ti-lowcode-common-secondary-text-color);
-  // 预览还原 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-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-list-item-color: var(--ti-lowcode-common-secondary-text-color); // 区块列表颜色
-  --ti-lowcode-component-block-list-shortcut-title-color: var(--ti-lowcode-common-primary-text-color); // 快照标题颜色
-  --ti-lowcode-component-block-list-shortcut-bg: var(--ti-lowcode-common-component-bg); // 快照标题颜色
-  --ti-lowcode-component-block-list-border-color: var(--ti-lowcode-common-border-color-4); // 快照标题颜色
-  --ti-lowcode-component-block-list-item-active-bg: var(--ti-lowcode-common-component-hover-bg); // 区块 active 背景色
-  --ti-lowcode-component-block-list-item-tag-bg: #8d5421;
-  --ti-lowcode-component-block-version-list-item-border-color: #202020;
-  --ti-lowcode-component-block-version-list-item-bg: #292929;
-  --ti-lowcode-component-block-version-list-version-bg: #323644;
-  --ti-lowcode-component-block-version-list-version-color: #476be5;
-  --ti-lowcode-component-block-version-list-panel-title-color: var(--ti-lowcode-common-primary-text-color);
-  --ti-lowcode-component-block-version-list-time-color: var(--ti-lowcode-common-text-color-5);
-  --ti-lowcode-component-block-version-list-desc-color: #63666c;
-  --ti-lowcode-component-block-version-list-current-version-color: var(--ti-lowcode-base-text-color-2);
-  --ti-lowcode-component-block-setting-popover-bg: #202020;
-  --ti-lowcode-component-block-setting-item-hover-bg: #202020;
-  --ti-lowcode-component-block-setting-item-text-color: var(--ti-lowcode-common-secondary-text-color);
+  --ti-lowcode-component-block-list-item-color: var(--te-common-text-secondary); // 区块列表颜色
+  --ti-lowcode-component-block-list-shortcut-title-color: var(--te-common-text-primary); // 快照标题颜色
+  --ti-lowcode-component-block-list-shortcut-bg: var(--te-common-bg-default); // 快照标题颜色
+  --ti-lowcode-component-block-list-item-active-bg: var(--te-common-bg-container); // 区块 active 背景色
+  --ti-lowcode-component-block-version-list-version-bg: var(--te-common-bg-default);
+  --ti-lowcode-component-block-version-list-version-color: var(--te-common-text-primary);
+  --ti-lowcode-component-block-version-list-panel-title-color: var(--te-common-text-primary);
+  --ti-lowcode-component-block-version-list-time-color: var(--te-common-text-primary);
+  --ti-lowcode-component-block-version-list-desc-color: var(--te-common-text-weaken);
+  --ti-lowcode-component-block-version-list-current-version-color: var(
+    --te-common-text-emphasize
+  ); // 暗色独有，可以注意一下，后续可考虑去掉
+  --ti-lowcode-component-block-setting-popover-bg: var(--te-common-bg-default);
+  --ti-lowcode-component-block-setting-item-text-color: var(--te-common-text-secondary);
   // 区块管理 - 添加分类
-  --ti-lowcode-component-block-list-add-group-btn-bg: var(--ti-lowcode-common-header-bg);
+  --ti-lowcode-component-block-list-add-group-btn-bg: var(--te-common-bg-default);
   --ti-lowcode-component-block-list-add-group-btn-border: none;
-  --ti-lowcode-component-block-list-setting-btn-color: var(--ti-lowcode-common-text-color-5);
-  --ti-lowcode-component-block-list-setting-btn-hover-color: var(--ti-lowcode-common-primary-color);
+  --ti-lowcode-component-block-list-setting-btn-color: var(--te-common-text-weaken); // 暗色和亮色不一致，需要注意
+  --ti-lowcode-component-block-list-setting-btn-hover-color: var(
+    --te-common-text-checked
+  ); // 暗色和亮色不一致，需要注意
   --ti-lowcode-component-block-list-add-group-btn-border-radius: none;
 }
 
 .block-setting-content {
-  --ti-lowcode-block-config-form-item-color: var(--ti-lowcode-toolbar-breadcrumb-color);
-
   .tiny-form-item.is-error .tiny-input__inner {
-    background-color: var(--ti-lowcode-tabs-bg);
+    background-color: var(--te-common-bg-error);
   }
 }
 
 // 区块设置 - 标签
 .block-tag-create {
-  --ti-lowcode-block-config-tag-color: var(--ti-lowcode-toolbar-breadcrumb-color);
-  --ti-lowcode-block-config-tag-bg: var(--ti-lowcode-input-bg);
-  --ti-lowcode-block-config-tag-hover-color: var(--ti-lowcode-toolbar-icon-color);
-  --ti-lowcode-block-config-tag-hover-bg: transparent;
-  --ti-lowcode-block-config-tag-close-color: var(--ti-lowcode-toolbar-icon-color);
+  --ti-lowcode-block-config-tag-color: var(--te-common-text-primary);
+  --ti-lowcode-block-config-tag-bg: var(--te-common-bg-disabled);
+  --ti-lowcode-block-config-tag-hover-color: var(--te-common-text-primary);
+  --ti-lowcode-block-config-tag-hover-bg: var(--te-common-bg-disabled);
 }
diff --git a/packages/theme/dark/bridge.less b/packages/theme/dark/bridge.less
index 44dea9e3b..0619a1c4b 100644
--- a/packages/theme/dark/bridge.less
+++ b/packages/theme/dark/bridge.less
@@ -1,11 +1,6 @@
 .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;
-
-  // npm工具类中代码预览的主题
-  --ti-lowcode-birdge-code-preview-color: var(--ti-lowcode-base-gray-20);
-  --ti-lowcode-birdge-code-preview-bg-color: #262626;
+  --ti-lowcode-bridge-list-color: var(--te-common-text-primary);
+  --ti-lowcode-bridge-list-bg: var(--te-common-bg-container);
+  --ti-lowcode-birdge-editor-border-color: var(--te-common-border-default);
 }
diff --git a/packages/theme/dark/events.less b/packages/theme/dark/events.less
index 4a43098d1..2329806e8 100644
--- a/packages/theme/dark/events.less
+++ b/packages/theme/dark/events.less
@@ -1,38 +1,37 @@
 .setting-advanced-add-custom-event-tip {
-  --ti-lowcode-events-add-custom-event-tips-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-event-add-custom-event-tips-highlight-color: var(--ti-lowcode-base-warn-color);
+  --ti-lowcode-events-add-custom-event-tips-color: var(--te-common-text-primary);
+  --ti-lowcode-event-add-custom-event-tips-highlight-color: var(--te-common-color-warning);
 }
 .setting-advanced-bind-event-list {
-  --ti-lowcode-events-bind-event-list-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-events-bind-event-list-item-disabled-color: var(--ti-lowcode-base-text-color-4);
-  --lowcode-events-bind-event-list-item-hover-bg-color: var(--ti-lowcode-base-bg-1);
+  --ti-lowcode-events-bind-event-list-color: var(--te-common-text-primary);
+  --ti-lowcode-events-bind-event-list-item-disabled-color: var(--te-common-text-disabled);
+  --lowcode-events-bind-event-list-item-hover-bg-color: var(--te-common-bg-container);
 }
 .bind-action-list {
-  --ti-lowcode-events-bind-action-item-border-color: var(--ti-lowcode-base-split-color-1);
-  --ti-lowcode-events-event-bind-color: var(--ti-lowcode-base-primary-color-2);
-  --ti-lowcode-events-bind-action-item-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-events-bind-action-item-hover-bg-color: var(--ti-lowcode-base-bg-1);
-  --ti-lowcode-events-bind-action-item-linked-bg-color: var(--ti-lowcode-base-success-color);
-  --ti-lowcode-events-bind-action-item-linked-color: var(--ti-lowcode-base-gray-0);
+  --ti-lowcode-events-bind-action-item-border-color: var(--te-common-border-default);
+  --ti-lowcode-events-event-bind-color: var(--te-common-text-checked);
+  --ti-lowcode-events-bind-action-item-color: var(--te-common-text-primary);
+  --ti-lowcode-events-bind-action-item-hover-bg-color: var(--te-common-bg-container);
+  --ti-lowcode-events-bind-action-item-linked-bg-color: var(--te-common-color-success);
+  --ti-lowcode-events-bind-action-item-linked-color: var(--te-common-text-dark-inverse);
   --ti-lowcode-events-empty-action-bg-color: var(--te-common-bg-container);
   --ti-lowcode-events-empty-action-color: var(--te-common-text-weaken);
-  --ti-lowcode-events-custom-icon-color: var(--te-common-text-weaken);
-  --ti-lowcode-events-empty-action-tips-strong-color: var(--ti-lowcode-base-warn-color);
+  --ti-lowcode-events-empty-action-tips-strong-color: var(--te-common-color-warning);
 }
 
 .advanced-config-container {
-  --ti-lowcode-events-advanced-config-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-events-advanced-label-color: var(--ti-lowcode-base-text-color-1);
-  --ti-lowcode-events-advanced-binding-state-bg-color: var(--ti-lowcode-base-primary-color-2);
-  --ti-lowcode-events-advanced-binding-state-color: var(--ti-lowcode-base-gray-0);
+  --ti-lowcode-events-advanced-config-color: var(--te-common-text-primary);
+  --ti-lowcode-events-advanced-label-color: var(--te-common-text-secondary);
+  --ti-lowcode-events-advanced-binding-state-bg-color: var(--te-common-bg-primary-checked);
+  --ti-lowcode-events-advanced-binding-state-color: var(--te-common-text-dark-inverse);
 }
 
 .bind-event-dialog-content {
   --ti-lowcode-bind-event-dialog-color: var(--te-common-text-secondary);
-  --ti-lowcode-bind-event-dialog-content-left-border-color: var(--ti-lowcode-base-split-color-1);
-  --ti-lowcode-bind-event-dialog-content-right-monaco-border-color: var(--ti-lowcode-base-split-color-1);
-  --ti-lowcode-bind-event-dialog-content-left-list-item-active-bg-color: var(--ti-lowcode-base-gray-90);
-  --ti-lowcode-bind-event-dialog-new-action-tip-color: var(--ti-lowcode-base-text-color-1);
-  --ti-lowcode-bind-event-dialog-action-selected-icon-color: var(--ti-lowcode-base-primary-color-2);
-  --ti-lowcode-bind-event-dialog-mark-bg-color: var(--ti-lowcode-base-bg-6);
+  --ti-lowcode-bind-event-dialog-content-left-border-color: var(--te-common-border-default);
+  --ti-lowcode-bind-event-dialog-content-right-monaco-border-color: var(--te-common-border-default);
+  --ti-lowcode-bind-event-dialog-content-left-list-item-active-bg-color: var(--te-common-bg-container);
+  --ti-lowcode-bind-event-dialog-new-action-tip-color: var(--te-common-text-secondary);
+  --ti-lowcode-bind-event-dialog-action-selected-icon-color: var(--te-common-text-checked);
+  --ti-lowcode-bind-event-dialog-mark-bg-color: var(--te-common-bg-container);
 }
diff --git a/packages/theme/dark/gpt-dialog.less b/packages/theme/dark/gpt-dialog.less
index 74fce60c0..3a3ab8ee6 100644
--- a/packages/theme/dark/gpt-dialog.less
+++ b/packages/theme/dark/gpt-dialog.less
@@ -1,51 +1,65 @@
-.bind-chatgpt {
+.robot-dialog {
   // chatGPT聊天窗问题模板文字颜色
-  --ti-lowcode-chat-model-text: #dfe1e6;
+  --ti-lowcode-chat-model-text: #191919;
   // chatGPT聊天窗问题模板文字边框颜色
-  --ti-lowcode-chat-model-text-border: #8a8e99;
-  // chatGPT聊天窗提问框图标
-  --ti-lowcode-chat-model-input-icon: #8a8e99;
+  --ti-lowcode-chat-model-text-border: #cbcbcb;
   // chatGPT聊天窗用户头像边框色
-  --ti-lowcode-chat-model-avatar-border: #8a8e99;
+  --ti-lowcode-chat-model-avatar-border: #dfe1e6;
   // chatGPT聊天窗AI聊天文字背景
-  --ti-lowcode-chat-model-ai-text-bg: #262626;
+  --ti-lowcode-chat-model-ai-text-bg: #ffffff;
   // chatGPT聊天窗AI聊天文字背景边框
-  --ti-lowcode-chat-model-ai-text-border: #262626;
+  --ti-lowcode-chat-model-ai-text-border: #dbdbdb;
   // chatGPT聊天窗AI聊天文字
-  --ti-lowcode-chat-model-ai-text: #dfe1e6;
+  --ti-lowcode-chat-model-ai-text: #191919;
   // chatGPT聊天窗AI连接失败文字背景
-  --ti-lowcode-chat-model-ai-fail-text-bg: rgba(246, 111, 106, 0.1);
+  --ti-lowcode-chat-model-ai-fail-text-bg: #feeaeb;
   // chatGPT聊天窗AI连接失败文字背景边框
-  --ti-lowcode-chat-model-ai-fail-text-border: #f66f6a;
+  --ti-lowcode-chat-model-ai-fail-text-border: #dc544f;
   // chatGPT聊天窗AI连接失败文字
-  --ti-lowcode-chat-model-ai-fail-text: #dfe1e6;
+  --ti-lowcode-chat-model-ai-fail-text: #191919;
   // chatGPT聊天窗用户聊天文字背景
-  --ti-lowcode-chat-model-user-text-bg: #4f77ff;
+  --ti-lowcode-chat-model-user-text-bg: rgba(20, 118, 255, 0.12);
   // chatGPT聊天窗用户聊天文字边框
-  --ti-lowcode-chat-model-user-text-border: #4f77ff;
+  --ti-lowcode-chat-model-user-text-border: #dbdbdb;
   // chatGPT聊天窗用户聊天文字
-  --ti-lowcode-chat-model-user-text: #ffffff;
+  --ti-lowcode-chat-model-user-text: #191919;
   // chatGPT聊天窗标题文字
-  --ti-lowcode-chat-model-title: #dfe1e6;
+  --ti-lowcode-chat-model-title: #333333;
   // chatGPT聊天窗基础图标
   --ti-lowcode-chat-model-common-icon: #8a887b;
   // chatGPT聊天窗输入框背景
-  --ti-lowcode-chat-model-input-bg: #1e1e1e;
-  // chatGPT聊天窗发送按钮背景
-  --ti-lowcode-chat-model-button-bg: #2f2f2f;
+  --ti-lowcode-chat-model-input-bg: #eeeeee;
+  // chatGPT聊天窗输入框背景
+  --ti-lowcode-chat-model-input-border: rgb(129, 168, 255);
+  // chatGPT聊天窗发送按钮背景渐变色
+  --ti-lowcode-chat-model-button-bg-1: rgba(96, 140, 255, 0.8);
+  --ti-lowcode-chat-model-button-bg-2: rgba(169, 117, 255, 0.8);
+  --ti-lowcode-chat-model-button-bg-3: rgba(177, 136, 255, 0.8);
   // chatGPT聊天窗发送按钮边框
-  --ti-lowcode-chat-model-button-border: #8a8e99;
+  --ti-lowcode-chat-model-button-border: #1476ff;
   // chatGPT聊天窗发送按钮文字
-  --ti-lowcode-chat-model-button-text: #dfe1e6;
+  --ti-lowcode-chat-model-button-text: #ffffff;
+  // chatGPT背景渐变色
+  --ti-lowcode-chat-bg-top-color: rgb(227, 236, 255);
+  --ti-lowcode-chat-bg-mid-color: rgb(236, 245, 255);
+  --ti-lowcode-chat-bg-bottom-color: rgb(255, 255, 255);
+  // chatGPT聊天窗背景色
+  --ti-lowcode-chat-model-bg: #ffffff;
+  // chatGPT聊天窗小助手文字颜色
+  --ti-lowcode-chat-model-helper-text: #808080;
+  // chatGPT聊天窗问题提示字体颜色
+  --ti-lowcode-chat-model-tips-text: #595959;
+  // chatGPT聊天窗问题提示背景颜色
+  --ti-lowcode-chat-model-tips-bg: #f5f5f5;
 
   // chatGPT加载
-  --ti-lowcode-chat-loading-svg-color: var(--ti-lowcode-common-primary-color);
-  --ti-lowcode-chat-loading-text-color: #fff;
+  --ti-lowcode-chat-loading-svg-color: var(--te-common-icon-link);
+  --ti-lowcode-chat-loading-text-color: #595959;
 }
 
 .chat-model-popover {
-  --ti-lowcode-chat-model-popover-bg: #262626;
-  --ti-lowcode-chat-model-popover-color: #adb0b8;
-  --ti-lowcode-chat-model-popover-active-bg: #2f2f2f;
-  --ti-lowcode-chat-model-popover-active-color: #adb0b8;
+  --ti-lowcode-chat-model-popover-bg: #fff;
+  --ti-lowcode-chat-model-popover-color: var(--te-common-text-primary);
+  --ti-lowcode-chat-model-popover-active-bg: #fff;
+  --ti-lowcode-chat-model-popover-active-color: var(--te-common-text-checked);
 }
diff --git a/packages/theme/dark/help.less b/packages/theme/dark/help.less
index e3457c2ec..fc1c9fe20 100644
--- a/packages/theme/dark/help.less
+++ b/packages/theme/dark/help.less
@@ -1,15 +1,13 @@
 .shepherd-modal-overlay-container,
 .tiny-guide {
-  --ti-lowcode-help-guide-content-text-color: var(--ti-lowcode-base-text-color-4);
-  --ti-lowcode-help-guide-title-text-color: var(--ti-lowcode-base-text-color-4);
-  --ti-lowcode-help-guide-progress-style-text-color: var(--ti-lowcode-base-text-color-4);
-  --ti-lowcode-help-guide-mask-bg-color: var(--ti-lowcode-base-bg-3);
+  --ti-lowcode-help-guide-content-text-color: var(--te-common-text-secondary);
+  --ti-lowcode-help-guide-title-text-color: var(--te-common-text-primary);
+  --ti-lowcode-help-guide-progress-style-text-color: var(--te-common-text-primary);
+  --ti-lowcode-help-guide-mask-bg-color: var(--te-common-bg-default);
 }
 .help-plugin-box {
-  --ti-lowcode-help-box-bg-color: #3c3c3c;
-  --ti-lowcode-help-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.5);
-  --ti-lowcode-help-box-title-text-color: #ffffff;
-  --ti-lowcode-help-box-item-text-color: #adb0b8;
-  --ti-lowcode-help-box-question-border-top: rgba(255, 255, 255, 0.1);
-  --ti-lowcode-help-box-question-item-text-color: #4f77ff;
+  --ti-lowcode-help-box-bg-color: var(--te-common-bg-default);
+  --ti-lowcode-help-box-title-text-color: var(--te-common-text-primary);
+  --ti-lowcode-help-box-question-border-top: var(--te-common-border-divider);
+  --ti-lowcode-help-box-item-hover-bg-color: var(--te-common-bg-container);
 }
diff --git a/packages/theme/dark/i18n.less b/packages/theme/dark/i18n.less
index c6a7258ae..0206288b2 100644
--- a/packages/theme/dark/i18n.less
+++ b/packages/theme/dark/i18n.less
@@ -1,8 +1,10 @@
 :root {
-  // 国际化表格操作图标颜色
-  --ti-lowcode-i18n-operate-svg-color: var(--ti-lowcode-base-text-color);
   // 国际化表格加载中字体颜色
-  --ti-lowcode-i18n-loading-text-color: #d9d9d9;
+  --ti-lowcode-i18n-loading-text-color: var(--te-common-text-weaken);
   // 国际化表格加载中图标颜色
-  --ti-lowcode-i18n-loading-svg-color: #d9d9d9;
+  --ti-lowcode-i18n-loading-svg-color: var(--te-common-text-primary);
+  // 国际化边框颜色
+  --ti-lowcode-i18n-border-color: var(--te-common-border-default);
+  // 国际化按钮字体颜色
+  --ti-lowcode-i18n-button-color: var(--te-common-text-primary);
 }
diff --git a/packages/theme/dark/index.less b/packages/theme/dark/index.less
index a4f8c143d..8fdcaa2be 100644
--- a/packages/theme/dark/index.less
+++ b/packages/theme/dark/index.less
@@ -1,5 +1,4 @@
 // 主题配置优先于公共配置
-@import './base.less';
 @import './variable.less';
 @import './block.less';
 @import './life-cycles.less';
diff --git a/packages/theme/dark/life-cycles.less b/packages/theme/dark/life-cycles.less
index 69a2bce16..8377abf2d 100644
--- a/packages/theme/dark/life-cycles.less
+++ b/packages/theme/dark/life-cycles.less
@@ -1,7 +1,7 @@
 :root {
   // 生命周期
-  --ti-lowcode-life-cycle-alert-color: #fff;
-  --ti-lowcode-life-cycle-item-hover-bg: #202020;
-  --ti-lowcode-life-cycle-item-disable-color: #9d9d9d;
-  --ti-lowcode-life-cycle-editor-border: var(--ti-lowcode-base-default-button-border-color);
+  --ti-lowcode-life-cycle-alert-color: var(--te-common-text-disabled);
+  --ti-lowcode-life-cycle-item-hover-bg: var(--te-common-bg-container);
+  --ti-lowcode-life-cycle-item-disable-color: var(--te-common-text-disabled);
+  --ti-lowcode-life-cycle-editor-border: var(--te-common-border-default);
 }
diff --git a/packages/theme/dark/materials.less b/packages/theme/dark/materials.less
index 971e385f5..1ad6e15a8 100644
--- a/packages/theme/dark/materials.less
+++ b/packages/theme/dark/materials.less
@@ -1,30 +1,22 @@
 :root {
   // 带边框的图标按钮边框颜色
   --ti-lowcode-materials-border-icon-border-color: transparent;
-  // 带边框的图标按钮图标颜色
-  --ti-lowcode-materials-border-icon-svg-color: #d9d9d9;
   // 带边框的图标按钮悬浮边框颜色
   --ti-lowcode-materials-border-icon-border-color-hover: transparent;
   // 带边框的图标按钮背景颜色
-  --ti-lowcode-materials-border-icon-bg-color: #202020;
+  --ti-lowcode-materials-border-icon-bg-color: var(--te-common-bg-default);
   // 区块分组下拉选项下边框颜色
-  --ti-lowcode-materials-block-group-item-border-color: var(--ti-lowcode-common-primary-color);
+  --ti-lowcode-materials-block-group-item-border-color: var(--te-common-border-checked); // 暗色和亮色不同，需注意
   // 添加区块筛选模块字体颜色
-  --ti-lowcode-materials-block-filter-text-color: var(--ti-lowcode-common-secondary-text-color);
-  // 添加区块筛选模块选中字体颜色
-  --ti-lowcode-materials-block-filter-selected-text-color: var(--ti-lowcode-common-primary-color);
+  --ti-lowcode-materials-block-filter-text-color: var(--te-common-text-primary);
   // 添加区块穿梭框面板背景颜色
-  --ti-lowcode-materials-block-transfer-bg-color: var(--ti-lowcode-common-component-bg);
+  --ti-lowcode-materials-block-transfer-bg-color: var(--te-common-bg-default);
   // 添加区块穿梭框面板头部字体颜色
-  --ti-lowcode-materials-block-transfer-header-text-color: #d9d9d9;
+  --ti-lowcode-materials-block-transfer-header-text-color: var(--te-common-text-primary);
   // 添加区块穿梭框面板头部背景颜色
-  --ti-lowcode-materials-block-transfer-header-bg-color: var(--ti-lowcode-common-header-bg);
-  // 区块分组添加区块筛选项 hover 颜色
-  --ti-lowcode-materials-block-filter-hover-color: var(--ti-lowcode-common-text-color-2);
+  --ti-lowcode-materials-block-transfer-header-bg-color: var(--te-common-bg-default); // 暗色和亮色不同，需注意
   // 组件列表  组件名称颜色
-  --ti-lowcode-materials-component-list-color: var(--ti-lowcode-toolbar-title-color);
+  --ti-lowcode-materials-component-list-color: var(--te-common-text-secondary);
   // 删除区块分组气泡弹窗背景色
-  --ti-lowcode-materials-block-group-delete-popover-bg-color: var(--ti-lowcode-common-component-hover-bg);
-  // 删除区块分组气泡弹窗标题色
-  --ti-lowcode-materials-block-group-delete-popover-title-color: var(--ti-lowcode-common-secondary-text-color);
+  --ti-lowcode-materials-block-group-delete-popover-bg-color: var(--te-common-bg-popover);
 }
diff --git a/packages/theme/dark/metaComponent.less b/packages/theme/dark/metaComponent.less
index b185a2e41..924d20666 100644
--- a/packages/theme/dark/metaComponent.less
+++ b/packages/theme/dark/metaComponent.less
@@ -1,65 +1,36 @@
 :root {
   // MetaListItem
-  --ti-lowcode-meta-list-item-bg-color: var(--ti-lowcode-base-bg-5);
-  --ti-lowcode-meta-list-item-border-color: transparent;
+  --ti-lowcode-meta-list-item-bg-color: var(--te-common-bg-default);
+  --ti-lowcode-meta-list-item-border-color: var(--te-common-border-default);
 
-  --ti-lowcode-meta-list-top-color: var(--ti-lowcode-base-text-color-1);
+  --ti-lowcode-meta-list-top-color: var(--te-common-text-secondary);
   // MetaJsSlot
-  --lowcode-meta-js-slot-color: var(--ti-lowcode-base-text-color-1);
+  --lowcode-meta-js-slot-color: var(--te-common-text-secondary);
 
   // MetaCodeEditor
-  --ti-lowcode-meta-codeEditor-color: #d9d9d9;
+  --ti-lowcode-meta-codeEditor-color: var(--te-common-text-primary);
+  --ti-lowcode-meta-codeEditor-hover-color: var(--te-common-text-primary);
   --ti-lowcode-meta-codeEditor-border-color: var(--te-common-border-default);
-  --ti-lowcode-meta-codeEditor-hover-color: #fff;
-  --ti-lowcode-meta-codeEditor-border-hover-color: #6b6b6b;
+  --ti-lowcode-meta-codeEditor-border-hover-color: var(--te-common-border-active);
+  --ti-lowcode-meta-codeEditor-icon-color: var(--te-common-text-weaken);
 }
 
 // config-item label popover tips
 .prop-label-tips-container {
-  --ti-lowcode-meta-config-item-label-tips-desc-color: var(--ti-lowcode-base-text-color-1);
-  --ti-lowcode-meta-config-item-label-tips-title-color: #fff;
+  --ti-lowcode-meta-config-item-label-tips-desc-color: var(--te-common-text-secondary);
+  --ti-lowcode-meta-config-item-label-tips-title-color: var(--te-common-text-primary);
 }
 
 // configItem
 .properties-item {
-  --ti-lowcode-meta-config-item-error-tips-color: var(--ti-lowcode-base-error-color);
-  --ti-lowcode-meta-config-item-label-color: var(--ti-lowcode-base-text-color-1);
-  --ti-lowcode-meta-config-item-bind-color: var(--ti-lowcode-base-gray-0);
-  --ti-lowcode-meta-config-item-bind-bg: var(--ti-lowcode-common-primary-color);
-  --ti-lowcode-meta-config-item-bind-bg: var(--ti-lowcode-common-primary-color);
-  --ti-lowcode-meta-config-item-active-bg: #fff;
-  --ti-lowcode-meta-config-item-link-color: var(--ti-lowcode-description-color);
-}
-
-// 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-config-item-error-tips-color: var(--te-common-color-error);
+  --ti-lowcode-meta-config-item-bind-color: var(--te-common-text-dark-inverse);
+  --ti-lowcode-meta-config-item-bind-bg: var(--te-common-bg-primary-checked);
+  --ti-lowcode-meta-config-item-active-bg: var(--te-common-bg-container);
 }
 
 // MetaCodeEditor
 .meta-code-editor-dialog-box {
-  --ti-lowcode-meta-code-editor-header-tips-container-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-meta-code-editor-header-collapse-icon-color: var(--ti-lowcode-base-gray-50);
-  --ti-lowcode-meta-code-editor-header-collapse-icon-hover-color: var(--ti-lowcode-base-gray-40);
-  --ti-lowcode-meta-code-editor-header-tips-demo-bg-color: var(--ti-lowcode-base-gray-5);
-  --ti-lowcode-meta-code-editor-header-tips-demo-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-meta-code-editor-source-code-content-border-color: transparent;
-  --ti-lowcode-meta-code-editor-err-msg-color: var(--ti-lowcode-base-error-color);
+  --ti-lowcode-meta-code-editor-header-tips-container-color: var(--te-common-text-primary);
+  --ti-lowcode-meta-code-editor-err-msg-color: var(--te-common-color-error);
 }
diff --git a/packages/theme/dark/pageManage.less b/packages/theme/dark/pageManage.less
index 4311afab2..ae246aef2 100644
--- a/packages/theme/dark/pageManage.less
+++ b/packages/theme/dark/pageManage.less
@@ -1,29 +1,8 @@
 :root {
-  --ti-lowcode-page-manage-title-background-text-color: var(--ti-lowcode-common-secondary-text-color);
-  --ti-lowcode-page-manage-tip-background-text-color: var(--ti-lowcode-common-bg-2);
-  --ti-lowcode-page-manage-tip-text-color: var(--ti-lowcode-common-bg-2);
-  --ti-lowcode-page-manage-tip-border-color: var(--ti-lowcode-base-gray-70);
-  --ti-lowcode-page-manage-icon-text-color: var(--ti-lowcode-common-text-color-2);
-  --ti-lowcode-page-manage-tree-text-background-color: var(--ti-lowcode-common-bg-8);
-  --ti-lowcode-page-manage-tree-node-background-color: var(--ti-lowcode-common-component-bg);
-  --ti-lowcode-page-manage-tip-color: var(--ti-lowcode-base-gray-10);
-  --ti-lowcode-page-manage-input-background-color: var(--ti-lowcode-common-bg-9);
-  --ti-lowcode-page-manage-input-border-color: var(--ti-lowcode-common-text-color-4);
-  --ti-lowcode-page-manage-tips-icon-color: var(--ti-lowcode-common-primary-color);
-  --ti-lowcode-page-manage-content-tips-color: var(--ti-lowcode-common-text-color-5);
-  --ti-lowcode-page-manage-search-border-color: var(--ti-lowcode-common-border-color-2);
-  --ti-lowcode-page-manage-tree-color: var(--ti-lowcode-common-secondary-text-color);
-  --ti-lowcode-page-manage-page-tree-background-active-color: var(--ti-lowcode-common-component-hover-bg);
-  --ti-lowcode-page-manage-page-tree-background-hover-color: var(--ti-lowcode-common-primary-hover-color);
-  --ti-lowcode-page-manage-svg-hover-color: var(--ti-lowcode-common-primary-color);
-  --ti-lowcode-page-manage-text-color: var(--ti-lowcode-common-secondary-text-color);
-  --ti-lowcode-page-manage-input-head-text-color: var(--ti-lowcode-common-secondary-text-color);
-  --ti-lowcode-page-manage-btn-text-color: #999;
-  --ti-lowcode-page-manage-btn-text-color-2: var(--ti-lowcode-common-bg-7);
-  --ti-lowcode-page-manage-error-color: var(--ti-lowcode-common-error-color);
-  --ti-lowcode-page-manage-input-group-color: var(--ti-lowcode-common-bg-4);
-  --ti-lowcode-page-manage-input-group-border-color: var(--ti-lowcode-common-bg-4);
-  --ti-lowcode-page-manage-input-group-border-right-color: var(--ti-lowcode-common-component-hover-bg);
-  --ti-lowcode-page-manage-input-output-text-color: var(--ti-lowcode-common-text-color-3);
-  --ti-lowcode-page-manage-input-output-text-bg-color: var(--ti-lowcode-base-blue-6);
+  --ti-lowcode-page-manage-title-background-text-color: var(--te-common-text-primary);
+  --ti-lowcode-page-manage-tip-text-color: var(--te-common-text-weaken);
+  --ti-lowcode-page-manage-tree-text-background-color: var(--te-common-bg-default);
+  --ti-lowcode-page-manage-tree-node-background-color: var(--te-common-bg-default);
+  --ti-lowcode-page-manage-text-color: var(--te-common-text-secondary);
+  --ti-lowcode-page-manage-input-head-text-color: var(--te-common-text-primary);
 }
diff --git a/packages/theme/dark/plugin-js.less b/packages/theme/dark/plugin-js.less
index c07a1a2c3..bb25ca60d 100644
--- a/packages/theme/dark/plugin-js.less
+++ b/packages/theme/dark/plugin-js.less
@@ -1,7 +1,5 @@
 // 页面JS 插件面板
 .plugin-page-js-container {
-  --ti-lowcode-plugin-js-bg: var(--ti-lowcode-common-component-bg);
-  --ti-lowcode-plugin-js-head-border-bottom-color: var(--ti-lowcode-common-bg-4);
-  --ti-lowcode-code-edit-content-border-color: var(--ti-lowcode-base-gray-60);
-  --ti-lowcode-plugin-js-help-link-color: var(--ti-lowcode-base-primary-color-2);
+  --ti-lowcode-plugin-js-bg: var(--te-common-bg-default);
+  --ti-lowcode-plugin-js-help-link-color: var(--te-common-text-link);
 }
diff --git a/packages/theme/dark/toolbar.less b/packages/theme/dark/toolbar.less
index a85dffb01..251b77d1e 100644
--- a/packages/theme/dark/toolbar.less
+++ b/packages/theme/dark/toolbar.less
@@ -1,16 +1,12 @@
 .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-left-icon-bg-hover: rgb(240, 240, 240);
-  --ti-lowcode-toolbar-popover-bg: var(--ti-lowcode-base-gray-0);
-  --ti-lowcode-toolbar-active-color: #808080;
-  --ti-lowcode-toolbar-user-img-border-color: var(--ti-lowcode-base-gray-20);
-  --ti-lowcode-toolbar-dot-color: var(--ti-lowcode-common-danger-color);
-  --ti-lowcode-toolbar-right-line: #ebebeb;
+  --ti-lowcode-toolbar-border-bottom-color: var(--te-common-border-divider);
+  --ti-lowcode-toolbar-title-color: var(--te-common-text-primary);
+  --ti-lowcode-toolbar-hover-color: var(--te-common-bg-container);
+  --ti-lowcode-toolbar-view-active-bg: var(--te-common-bg-prompt);
+  --ti-lowcode-toolbar-left-icon-bg-hover: var(--te-common-icon-primary);
+  --ti-lowcode-toolbar-active-color: var(--te-common-text-secondary);
+  --ti-lowcode-toolbar-user-img-border-color: var(--te-common-border-divider);
+  --ti-lowcode-toolbar-dot-color: var(--te-common-color-error);
+  --ti-lowcode-toolbar-right-line: var(--te-common-bg-prompt);
 }
diff --git a/packages/theme/dark/tree.less b/packages/theme/dark/tree.less
index b2d7556b0..5f870f206 100644
--- a/packages/theme/dark/tree.less
+++ b/packages/theme/dark/tree.less
@@ -1,7 +1,4 @@
 .outlinebox {
-  --ti-lowcode-tree-color: var(--ti-lowcode-common-secondary-text-color);
-  --ti-lowcode-tree-icon-color: rgba(138, 142, 153, 0.99);
-  --ti-lowcode-tree-icon-hover-color: var(--ti-lowcode-common-secondary-text-color);
-  --ti-lowcode-tree-selected-color: var(--ti-lowcode-common-text-color-3);
-  --ti-lowcode-tree-selected-bg: var(--ti-lowcode-common-primary-color);
+  --ti-lowcode-tree-icon-hover-color: var(--te-common-icon-hover);
+  --ti-lowcode-tree-border-color: transparent; // 亮色主题特有
 }
diff --git a/packages/theme/dark/tutorial.less b/packages/theme/dark/tutorial.less
index f872e57f7..4e963d5d3 100644
--- a/packages/theme/dark/tutorial.less
+++ b/packages/theme/dark/tutorial.less
@@ -1,5 +1,5 @@
 #tiny-engine-left-panel {
-  --ti-lowcode-tutorial-primary-text-color: var(--ti-lowcode-base-text-color-1);
-  --ti-lowcode-tutorial-primary-bg-color: var(--ti-lowcode-base-bg-2);
+  --ti-lowcode-tutorial-primary-text-color: var(--te-common-text-secondary);
+  --ti-lowcode-tutorial-primary-bg-color: var(--te-common-bg-default);
   --ti-lowcode-tutorial-hover-bg-color: var(--te-common-bg-container);
 }
diff --git a/packages/theme/dark/variable.less b/packages/theme/dark/variable.less
index d7b61cb61..34c3d927d 100644
--- a/packages/theme/dark/variable.less
+++ b/packages/theme/dark/variable.less
@@ -4,46 +4,9 @@
   --base-min-width: 1280px;
 
   // ------ 主要的公共主题色，前缀为 --ti-lowcode-common -------
-  --ti-lowcode-common-primary-color: #4f77ff;
-  --ti-lowcode-common-primary-hover-color: #3961eb;
-  --ti-lowcode-common-primary-color-1: #cad6ff;
-  --ti-lowcode-common-component-bg: #2f2f2f;
-  --ti-lowcode-common-component-hover-bg: #3c3c3c;
-  --ti-lowcode-common-layout-bg: #191818;
-  --ti-lowcode-common-layout-hover-bg: #191919;
-  --ti-lowcode-common-header-bg: #202020;
-  --ti-lowcode-common-bg-1: #404040;
-  --ti-lowcode-common-bg-2: #4d4d4d;
-  --ti-lowcode-common-bg-3: #2b2b2b;
-  --ti-lowcode-common-bg-4: #262626;
-  --ti-lowcode-common-bg-5: #eee;
-  --ti-lowcode-common-bg-6: #414141;
-  --ti-lowcode-common-bg-7: #8a8e99;
-  --ti-lowcode-common-bg-8: #222;
-  --ti-lowcode-common-bg-9: #292929;
-  --ti-lowcode-common-hover-bg-1: rgba(255, 255, 255, 0.1);
   --ti-lowcode-common-transparent-color: transparent;
-  --ti-lowcode-common-primary-text-color: #fff;
   --ti-lowcode-common-secondary-text-color: #adb0b8;
-  --ti-lowcode-common-text-title-color: #252b3a;
-  --ti-lowcode-common-text-color-1: #6a6a6a;
-  --ti-lowcode-common-text-color-2: #d9d9d9;
-  --ti-lowcode-common-text-color-3: #fff;
-  --ti-lowcode-common-text-color-4: #50d4ab;
-  --ti-lowcode-common-text-color-5: #8a8e99;
-  --ti-lowcode-common-text-color-6: #575d6c;
   --ti-lowcode-common-third-text-color: #ababab;
-  --ti-lowcode-common-danger-color: #c7000b;
-  --ti-lowcode-common-border-color-1: #212121;
-  --ti-lowcode-common-border-color-2: #313131;
-  --ti-lowcode-common-border-color-3: #606165;
-  --ti-lowcode-common-border-color-4: #232323;
-  --ti-lowcode-common-error-color: var(--ti-lowcode-base-error-color);
-
-  --ti-lowcode-info-color: #7693f5;
-  --ti-lowcode-warning-color: #fa9841;
-  --ti-lowcode-warning-color-1: #fac20a;
-  --ti-lowcode-common-empty-color: #9a9a9a;
 
   // tiny vue 的 css 变量，覆盖掉就好
 
@@ -53,69 +16,60 @@
   }
 
   .tiny-grid {
-    --ti-grid-light-color: var(--ti-lowcode-common-component-bg);
-    --ti-grid-text-color: var(--ti-lowcode-common-text-color-5);
+    --ti-grid-light-color: var(--te-common-bg-default);
+    --ti-grid-text-color: var(--te-common-text-weaken);
   }
 
   --ti-lowcode-trigger-color: #adb0b8;
   --ti-lowcode-trigger-hover-color: #8a8e99;
-  --ti-lowcode-input-error-color: var(--ti-lowcode-common-error-color);
+  --ti-lowcode-input-error-color: var(--te-common-color-error);
   --ti-lowcode-input-error-bg: rgba(246, 111, 106, 0.1);
 
   // ------ 公共组件的主题色，前缀为 --ti-lowcode-component-组件名 ------
-  // tinysearch  背景色
-  --ti-lowcode-component-search-bg: var(--ti-lowcode-input-bg);
   // tinysearch  边框色
   --ti-lowcode-component-input-border-color: transparent;
   // svgButton
-  --ti-lowcode-component-svg-button-color: var(--ti-lowcode-common-text-color-2);
-  --ti-lowcode-component-svg-button-hover-color: var(--ti-lowcode-common-primary-color);
+  --ti-lowcode-component-svg-button-color: var(--te-common-text-primary);
+  --ti-lowcode-component-svg-button-hover-color: var(--te-common-text-primary);
   --ti-lowcode-component-svg-button-hover-bg-color: var(--te-common-bg-prompt);
-  --ti-lowcode-component-svg-button-active-color: var(--ti-lowcode-common-primary-color);
+  --ti-lowcode-component-svg-button-active-color: var(--te-common-text-primary);
   --ti-lowcode-component-svg-button-active-bg-color: var(--te-common-bg-prompt);
 
-  --ti-lowcode-tabs-active-border-bottom-color: var(--ti-lowcode-common-primary-color);
-  --ti-lowcode-tabs-active-color: var(--ti-lowcode-common-primary-color);
+  --ti-lowcode-tabs-active-border-bottom-color: var(--te-common-border-checked);
 
-  --ti-lowcode-form-error-tips-color: var(--ti-lowcode-common-error-color);
-  // 关闭按钮
-  --ti-lowcode-component-close-icon-text-color: var(--ti-lowcode-common-third-text-color); // 关闭按钮默认颜色
-  // 关闭按钮 hover 颜色
-  --ti-lowcode-component-close-icon-text-hover-color: var(--ti-lowcode-common-primary-text-color);
+  --ti-lowcode-form-error-tips-color: var(--te-common-color-error);
 
   // 设置面板
-  --ti-lowcode-component-setting-panel-label-color: var(--ti-lowcode-common-secondary-text-color);
-  --ti-lowcode-component-setting-panel-icon-color: var(--ti-lowcode-toolbar-breadcrumb-color);
-  --ti-lowcode-component-setting-panel-label-tips-bg: #f2f5fc;
+  --ti-lowcode-component-setting-panel-label-color: var(--te-common-text-secondary);
+  --ti-lowcode-component-setting-panel-icon-color: var(--te-common-text-secondary);
 
   // 插件面板
-  --ti-lowcode-plugin-panel-title-color: var(--ti-lowcode-dialog-font-color); // 插件面板标题色
-  --ti-lowcode-plugin-panel-bg: var(--ti-lowcode-common-component-bg); // 插件面板背景色
-  --ti-lowcode-plugin-panel-border-right-color: var(--ti-lowcode-canvas-border-color); // 插件面板右侧边框色
-  --ti-lowcode-plugin-panel-header-border-bottom-color: #262626; // 插件面板头部区域底部边框线颜色
+  --ti-lowcode-plugin-panel-title-color: var(--te-common-text-primary); // 插件面板标题色
+  --ti-lowcode-plugin-panel-bg: var(--te-common-bg-default); // 插件面板背景色
+  --ti-lowcode-plugin-panel-border-right-color: var(--te-common-border-divider); // 插件面板右侧边框色
+  --ti-lowcode-plugin-panel-header-border-bottom-color: var(
+    --te-common-border-divider
+  ); // 插件面板头部区域底部边框线颜色
   --ti-lowcode-plugin-panel-title-font-weight: 400; // 插件面板标题加粗效果
 
   // 插件设置面板
-  --ti-lowcode-plugin-setting-panel-bg: var(--ti-lowcode-common-component-bg); // 插件设置面板背景色
+  --ti-lowcode-plugin-setting-panel-bg: var(--te-common-bg-default); // 插件设置面板背景色
 
   // ------ 各个模块的主题色，前缀为 --ti-lowcode-模块名 -------
 
-  --ti-lowcode-design-plugin-color: #8a8e99;
-  --ti-lowcode-design-toolbar-icon-color: #8a8e99;
-  --ti-lowcode-nav-panel-border-left-color: transparent;
+  --ti-lowcode-design-plugin-color: var(--te-common-text-weaken);
 
   // 物料-组件列表
-  --ti-lowcode-material-component-list-border-color: var(--ti-lowcode-common-border-color-4);
-  --ti-lowcode-material-component-list-hover-bg: var(--ti-lowcode-common-component-hover-bg);
+  --ti-lowcode-material-component-list-hover-bg: var(--te-common-bg-container);
 
   // 页面管理
   --ti-lowcode-page-tree-color: var(--ti-lowcode-common-secondary-text-color);
-  --ti-lowcode-page-tree-hover-color: var(--ti-lowcode-common-primary-text-color);
+  --ti-lowcode-page-tree-hover-color: var(--te-common-text-primary);
 
   // 画布 canvas
-  --ti-lowcode-canvas-iframe-scrollbar-track-color: var(--ti-lowcode-canvas-wrap-bg); // iframe 内部滚动条 track 颜色
+  --ti-lowcode-canvas-iframe-scrollbar-track-color: var(--te-common-bg-container); // iframe 内部滚动条 track 颜色
   // iframe 内部滚动条 滑块 颜色
-  --ti-lowcode-canvas-iframe-scrollbar-thumb-color: var(--ti-lowcode-common-component-bg);
+  --ti-lowcode-canvas-iframe-scrollbar-thumb-color: var(--te-common-bg-default);
 
   // 数据源
   --ti-lowcode-datasource-list-color: var(--ti-lowcode-toolbar-more-hover-color);
@@ -123,30 +77,22 @@
   // 状态管理
   --ti-lowcode-data-list-color: var(--ti-lowcode-toolbar-icon-color);
   // 状态管理面板头部的底部边框色
-  --ti-lowcode-data-header-border-bottom-color: var(--ti-lowcode-common-bg-4);
-  // 状态管理示例背景色
-  --ti-lowcode-data-example-bg-color: var(--ti-lowcode-common-primary-text-color);
-  // 状态管理示例文字色
-  --ti-lowcode-data-example-color: var(--ti-lowcode-common-text-title-color);
+  --ti-lowcode-data-header-border-bottom-color: var(--te-common-border-divider);
   // 添加高级属性文字颜色
   --ti-lowcode-data-advanced-text-color: #dfe1e6;
   // 添加高级属性 hover 文字颜色
   --ti-lowcode-data-advanced-text-hover-color: #8a8e99;
 
-  // 状态管理按激活背景色
-  --ti-lowcode-data-radio-group-active-bg: var(--ti-lowcode-common-primary-color);
   // 状态管理按默认背景色
-  --ti-lowcode-data-radio-group-bg: var(--ti-lowcode-common-header-bg);
+  --ti-lowcode-data-radio-group-bg: var(--te-common-bg-default);
 
   // 教程
-  --ti-lowcode-tutorial-list-item-color: var(--ti-lowcode-toolbar-breadcrumb-color);
+  --ti-lowcode-tutorial-list-item-color: var(--te-common-text-secondary);
 
   // 头部工具栏背景色
   --ti-lowcode-toolbar-bg: #404040;
   // 头部工具栏选中背景色
   --ti-lowcode-toolbar-active-bg: #212121;
-  // 头部工具栏边框色
-  --ti-lowcode-toolbar-border-color: #333;
   // 头部工具栏icon颜色 && 右侧属性面板tabs hover字体颜色 && switch 选中hover圆背景色
   --ti-lowcode-toolbar-icon-color: #fff;
   // 头部工具栏icon颜色
@@ -157,34 +103,24 @@
   --ti-lowcode-toolbar-more-color: rgba(217, 217, 217, 0.4);
   // 头部工具栏更多more图标hover颜色
   --ti-lowcode-toolbar-more-hover-color: rgba(217, 217, 217, 0.8);
-  // 头部工具栏面包屑字体颜色 && 右侧属性面板tabs字体颜色 && 右侧属性面板 collapse 头部字体颜色 && switch 选中圆背景色
-  --ti-lowcode-toolbar-breadcrumb-color: #d9d9d9;
-  // 头部工具栏画布大小文本hover背景色 && 头部弹框背景色 && context-menu 背景色 && 大纲树节点hover背景色 && 日期组件背景色
-  --ti-lowcode-toolbar-view-hover-bg: #4d4d4d;
   // 头部工具栏i18n国际化字体颜色
   --ti-lowcode-toolbar-i18n-color: rgba(255, 255, 255, 0.4);
   // 应用发布弹窗图标颜色
-  --ti-lowcode-toolbar-publish-icon-color: var(--ti-lowcode-common-primary-text-color);
+  --ti-lowcode-toolbar-publish-icon-color: var(--te-common-text-primary);
   // 头部左侧logo颜色
   --ti-lowcode-logo-color: #8a8e99;
   // 头部左侧logo颜色
   --ti-lowcode-logo-active-color: rgba(255, 255, 255, 0.5);
   // 中间画布边框色
   --ti-lowcode-canvas-border-color: #1a1a1a;
-  // 右侧属性面板tab页签背景色 && 表单校验错误输入框背景色
-  --ti-lowcode-tabs-bg: #2b2b2b;
   // 右侧属性面板tab页签边框色 && 弹框边框色 && context-menu 边框色
-  --ti-lowcode-tabs-border-color: #313131;
+  --ti-lowcode-tabs-border-color: var(--te-common-border-default);
   // 右侧属性面板tab页签激活状态背景色 && 弹框title背景颜色
   --ti-lowcode-tabs-active-bg: #404040;
-  // 右侧属性面板折叠面板展开内容边框色
-  --ti-lowcode-collapse-active-border-color: #333;
-  // 中间画布外框容器背景色 && 弹框底部tip背景色 && select 多选下拉选项hover背景色
-  --ti-lowcode-canvas-wrap-bg: #5e5e5e;
   // 中间画布拖拽宽度按钮背景色
   --ti-lowcode-canvas-handle-bg: #2b2b2b;
   // 中间画布拖拽宽度按钮背景色
-  --ti-lowcode-canvas-handle-hover-bg: var(--ti-lowcode-common-primary-color);
+  --ti-lowcode-canvas-handle-hover-bg: var(--te-common-bg-primary-checked);
   // 中间画布底部面包屑背景色 && popover 背景颜色
   --ti-lowcode-breadcrumb-bg: #ebebeb;
   // 中间画布底部面包屑字体颜色 && popover 字体颜色
@@ -206,25 +142,8 @@
 
   // collapse 折叠面板激活后字体颜色
   --ti-lowcode-collapse-active-color: #ebebeb;
-  // input 框背景色
-  --ti-lowcode-input-bg: #262626;
-  // switch 圆点 hover 背景色
-  --ti-lowcode-switch-after-hover-bg: #6b6b6b;
-  // switch 圆点 checked 背景色
-  --ti-lowcode-switch-after-checked-bg: #d9d9d9;
-  // -----下拉框相关主题配置-----
-  // 下拉框聚焦时边框颜色
-  --ti-lowcode-select-focus-border-color: var(--ti-lowcode-common-primary-color);
-  // 下拉框选中标签字体颜色
-  --ti-lowcode-select-tags-text-color: #d9d9d9;
-  // 下拉框选中标签背景颜色
-  --ti-lowcode-select-tags-bg-color: #5e5e5e;
-  // 下拉框suffix图标悬浮颜色
-  --ti-lowcode-select-suffix-icon-color-hover: #fff;
-  // 组件icon颜色
-  --ti-lowcode-component-icon-color: #d9d9d9;
   // 左侧插件激活背景色
-  --ti-lowcode-left-panel-active-bg: #2f2f2f;
+  --ti-lowcode-left-panel-active-bg: var(--te-base-blue-140);
   // 左侧插件激活边框色
   --ti-lowcode-left-panel-active-border-color: #212121;
   // 左侧按钮边框色
@@ -233,15 +152,9 @@
   // radio 按钮组激活背景色
   --ti-lowcode-radio-button-active-bg: #2b2b2b;
   // grid 布局设置按钮字体颜色
-  --ti-lowcode-grid-edit-color: #d9d9d9;
+  --ti-lowcode-grid-edit-color: var(--te-common-text-primary);
   // grid 布局设置按钮背景色
-  --ti-lowcode-grid-edit-bg: #5e5e5e;
-  // tooltip字体颜色
-  --ti-lowcode-tooltip-text-color: #999;
-  // tooltip背景颜色
-  --ti-lowcode-tooltip-bg-color: #ebebeb;
-  // tooltip错误提示背景颜色
-  --ti-lowcode-tooltip-error-bg-color: #c92c3f;
+  --ti-lowcode-grid-edit-bg: var(--te-common-bg-default);
 
   // Fit 字体颜色
   --ti-lowcode-fit-label-color: #ebebeb;
@@ -254,8 +167,8 @@
   // more icon 选中背景色
   --ti-lowcode-more-icon-selected-bg: #2e2e2e;
   // main menu 背景色
-  --ti-lowcode-main-menu-bg: var(--ti-lowcode-common-component-bg);
-  --ti-lowcode-main-menu-item-hover-bg: var(--ti-lowcode-common-component-hover-bg);
+  --ti-lowcode-main-menu-bg: var(--te-common-bg-default);
+  --ti-lowcode-main-menu-item-hover-bg: var(--te-common-bg-container);
   --ti-lowcode-main-menu-item-hover-color: var(--ti-lowcode-toolbar-icon-color);
   // spacing svg 图标上下颜色
   --ti-lowcode-spacing-tb-color: #4d4d4d;
@@ -266,7 +179,6 @@
   // spacing svg 图标左右hover颜色
   --ti-lowcode-spacing-lr-hover-color: #626262;
   // spacing svg 图标边框颜色
-  --ti-lowcode-spacing-border-color: #333;
   // position direction 字体颜色
   --ti-lowcode-position-direction-color: #ebebeb;
   // position direction 弹框显示时字体背景色
@@ -292,115 +204,35 @@
   --ti-lowcode-breadcrumb-hover-bg: #fff;
   // 弹框中tip提示边框颜色
   --ti-lowcode-dialog-tip-border-color: #d9d9d9;
-  // 弹框字体颜色 && 左侧面板 title 字体颜色
-  --ti-lowcode-dialog-font-color: #ebebeb;
   // 输入框icon图标颜色
   --ti-lowcode-input-icon-color: #737373;
-  // 弹框字体颜色 && 图标颜色 && 输入框 suffix 字体颜色
-  --ti-lowcode-text-color: #6a6a6a;
   // 右侧optionitem的边框色
-  --ti-lowcode-optionitem-border-color: #2b2b2b;
+  --ti-lowcode-optionitem-border-color: var(--te-common-border-default);
   // 右侧optionitem的背景色
-  --ti-lowcode-optionitem-background-color: #363636;
-  //tootip里的input框字体颜色
-  --ti-lowcode-tootip-input-color: #fff;
-  //tootip里的input背景颜色
-  --ti-lowcode-tootip-input-background-color: #363636;
-  //tootip里的input框边框颜色
-  --ti-lowcode-tootip-input-border-color: #2b2b2b;
-  //tootip里的input框箭头颜色
-  --ti-lowcode-tootip-arrow-border-color: #404040;
-  // dialogBox弹框示例框边框色
-  --ti-lowcode-dialog-demo-border-color: #5e5e5e;
+  --ti-lowcode-optionitem-background-color: var(--te-common-bg-default);
   // 关闭 icon 图标hover背景色 && 输入框后置文本hover背景色
-  --ti-lowcode-icon-hover-bg: rgba(255, 255, 255, 0.1);
-  // 说明提示框警告颜色
-  --ti-lowcode-description-warning-color: #facb4b;
-  // 说明提示框错误颜色
-  --ti-lowcode-description-error-color: #ff0000;
-  // switch checked状态边框色
-  --ti-lowcode-switch-checked-border-color: var(--ti-lowcode-common-primary-color);
-  // 文本链接颜色
-  --ti-lowcode-text-link-color: #6bb0ff;
+  --ti-lowcode-icon-hover-bg: rgba(255, 255, 255, 0.1); // 需要确认
   // 大纲树node节点选中背景色
-  --ti-lowcode-node-current-bg: var(--ti-lowcode-common-primary-color);
-  // 大纲树node节点不可拖拽背景色 && 表单校验错误边框色
-  --ti-lowcode-node-nodrag-bg: #ea384c;
-  // 成功状态按钮边框色
-  --ti-lowcode-success-border-color: #2ad986;
-  // 错误提示颜色
-  --ti-lowcode-error-tip-color: #de504e;
+  --ti-lowcode-node-current-bg: var(--te-common-bg-primary-checked);
 
-  // 画布拖拽元素背景色
-  --ti-lowcode-drag-ghost-bg: #888;
-  // 画布拖拽位置线背景色
-  --ti-lowcode-ghost-line-bg: #ffb100;
   // 描述颜色
-  --ti-lowcode-description-color: var(--ti-lowcode-common-text-color-4);
-  // 更多折叠面板头部hover背景色
-  --ti-lowcode-more-collapse-header-hover-color: #5a5a5a;
+  --ti-lowcode-description-color: var(--te-base-green-40);
   // 绑定时icon图标颜色
-  --ti-lowcode-icon-bind-color: #006cff;
-  // 创建字体颜色
-  --ti-lowcode-create-color: #575d6c;
-  // 删除按钮hover背景色 && 表单校验错误背景色
-  --ti-lowcode-delete-button-hover-bg: #c92c3f;
-  // input框focus 获焦时边框颜色
-  --ti-lowcode-input-focus-border-color: var(--ti-lowcode-common-primary-color);
-  // 次要描述字体颜色 && 面包屑label 字体颜色
-  --ti-lowcode-description-minor-color: #ababab;
+  --ti-lowcode-icon-bind-color: var(--te-common-text-checked);
   // 样式设置 label 字体颜色
   --ti-lowcode-style-setting-label-color: var(--te-common-bg-primary-checked);
   // 样式设置 label 背景颜色
-  --ti-lowcode-style-setting-label-bg: rgba(76, 152, 241, 0.15);
-  // 多人协作item项hover背景色
-  --ti-lowcode-user-item-hover-bg: rgba(94, 94, 94, 0.8);
-  // 多人协作人员头像背景色
-  --ti-lowcode-user-header-bg: #919191;
-  // 工具栏提示框字体颜色
-  --ti-lowcode-toolbar-popover-color: #363636;
-  // 工具栏 media 提示框字体颜色
-  --ti-lowcode-media-popover-color: #adb0b8;
+  --ti-lowcode-style-setting-label-bg: var(--te-base-blue-140);
   // 工具栏 media 提示框标题字体颜色
-  --ti-lowcode-media-popover-title-color: #fff;
+  --ti-lowcode-media-popover-title-color: var(--te-common-text-primary);
   // 工具栏icon禁用颜色
-  --ti-lowcode-disabled-color: #757575;
-  // 状态管理详情收缩摩纳哥编辑器icon颜色
-  --ti-lowcode-state-management-screen-icon-color: #fff;
-  // 状态管理搜索无结果显示颜色
-  --ti-lowcode-state-management-query-color: #fff;
+  --ti-lowcode-disabled-color: var(--te-common-text-disabled);
   // 状态管理代码编辑器边框颜色
   --ti-lowcode-state-management-monaco-editor-border-color: transparent;
 
-  // Popover提示框
-  --ti-lowcode-popover-color: var(--ti-lowcode-breadcrumb-color);
-  --ti-lowcode-popover-bg-color: #191919;
-  // 自定义类名lowcode弹框背景色
-  --ti-lowcode-custom-popover-bg-color: #404040;
-  // 自定义类名lowcode弹框字体颜色
-  --ti-lowcode-custom-popover-text-color: #d9d9d9;
-  // 自定义类名lowcode弹框边框颜色
-  --ti-lowcode-custom-popover-border-color: #313131;
-
-  // 滚动条thumb颜色
-  --ti-lowcode-scrollbar-thumb-background-color: rgba(121, 121, 121, 0.4);
-  // 可点击交互的文字颜色
-  --ti-lowcode-common-interaction-text-color: #5e7ce0;
   // 数字输入框组件下拉列表文字颜色
-  --ti-lowcode-numeric-unit-text-color: var(--ti-lowcode-text-color);
-
-  //左侧插件栏hover背景色
-  --ti-plugins-hover-bg-color: #ffffff;
-  //左侧插件栏hover边框色
-  --ti-plugins-hover-border-color: #9e9e9e;
-  // 表格行间背景色
-  --ti-lowcode-new-table-row-sepline-background: #1f1f1f;
+  --ti-lowcode-numeric-unit-text-color: var(--te-common-text-primary);
 
   // 查看指引视频
-  --ti-lowcode-block-video-tip-color: var(--ti-lowcode-base-primary-color-2);
-
-  // 属性设置、事件设置等列表的背景色
-  --ti-lowcode-meta-list-item-border-color: #2b2b2b;
-  // 属性设置、事件设置等列表的背景色
-  --ti-lowcode-meta-list-item-bg-color: #363636;
+  --ti-lowcode-block-video-tip-color: var(--te-common-text-link);
 }
diff --git a/packages/theme/light/base.less b/packages/theme/light/base.less
deleted file mode 100644
index 9b40a5f0d..000000000
--- a/packages/theme/light/base.less
+++ /dev/null
@@ -1,275 +0,0 @@
-:root {
-  // 灰阶
-  --ti-lowcode-base-gray-0: #fff;
-  --ti-lowcode-base-gray-5: #fafafa;
-  --ti-lowcode-base-gray-10: #f5f5f5;
-  --ti-lowcode-base-gray-20: #f0f0f0;
-  --ti-lowcode-base-gray-30: #dbdbdb;
-  --ti-lowcode-base-gray-40: #c2c2c2;
-  --ti-lowcode-base-gray-50: #808080;
-  --ti-lowcode-base-gray-60: #595959;
-  --ti-lowcode-base-gray-70: #333;
-  --ti-lowcode-base-gray-80: #262626;
-  --ti-lowcode-base-gray-90: #191919;
-  --ti-lowcode-base-gray-100: #000;
-  --ti-lowcode-base-gray-101: #e6e6e6;
-
-  // expand-red
-  --ti-lowcode-base-red-1: #ffeae8;
-  --ti-lowcode-base-red-2: #fccdca;
-  --ti-lowcode-base-red-3: #faa9a5;
-  --ti-lowcode-base-red-4: #fa8682;
-  --ti-lowcode-base-red-5: #f76360;
-  --ti-lowcode-base-red-6: #f23030;
-  --ti-lowcode-base-red-7: #cc272a;
-  --ti-lowcode-base-red-8: #a3171c;
-  --ti-lowcode-base-red-9: #78080e;
-  --ti-lowcode-base-red-10: #4d0005;
-  --ti-lowcode-base-red-11: #a64242;
-  --ti-lowcode-base-red-12: #d4827f;
-  --ti-lowcode-base-red-13: #f2c5c2;
-
-  // expand-orange
-  --ti-lowcode-base-orange-1: #fff5e8;
-  --ti-lowcode-base-orange-2: #fcdfb8;
-  --ti-lowcode-base-orange-3: #fcc98b;
-  --ti-lowcode-base-orange-4: #fcb25c;
-  --ti-lowcode-base-orange-5: #ff9a2e;
-  --ti-lowcode-base-orange-6: #ff8800;
-  --ti-lowcode-base-orange-7: #d96900;
-  --ti-lowcode-base-orange-8: #a64d00;
-  --ti-lowcode-base-orange-9: #733400;
-  --ti-lowcode-base-orange-10: #4d2201;
-  --ti-lowcode-base-orange-11: #9e6d3f;
-  --ti-lowcode-base-orange-12: #d6a981;
-  --ti-lowcode-base-orange-13: #f2d8c2;
-
-  // expand-yellow
-  --ti-lowcode-base-yellow-1: #fcf9eb;
-  --ti-lowcode-base-yellow-2: #fcf0c2;
-  --ti-lowcode-base-yellow-3: #fae396;
-  --ti-lowcode-base-yellow-4: #f7d56d;
-  --ti-lowcode-base-yellow-5: #f7c845;
-  --ti-lowcode-base-yellow-6: #fcbe1e;
-  --ti-lowcode-base-yellow-7: #d99b0b;
-  --ti-lowcode-base-yellow-8: #a67711;
-  --ti-lowcode-base-yellow-9: #7a5202;
-  --ti-lowcode-base-yellow-10: #4d3200;
-  --ti-lowcode-base-yellow-11: #9e7e3f;
-  --ti-lowcode-base-yellow-12: #d4b57f;
-  --ti-lowcode-base-yellow-13: #e6d3b8;
-
-  // expand-lemon
-  --ti-lowcode-base-lemon-1: #fcfae8;
-  --ti-lowcode-base-lemon-2: #fcf6c2;
-  --ti-lowcode-base-lemon-3: #fcf092;
-  --ti-lowcode-base-lemon-4: #fae969;
-  --ti-lowcode-base-lemon-5: #f7e04a;
-  --ti-lowcode-base-lemon-6: #f7d916;
-  --ti-lowcode-base-lemon-7: #d9bb16;
-  --ti-lowcode-base-lemon-8: #a38708;
-  --ti-lowcode-base-lemon-9: #756002;
-  --ti-lowcode-base-lemon-10: #4d3d00;
-  --ti-lowcode-base-lemon-11: #9e8f46;
-  --ti-lowcode-base-lemon-12: #d6c581;
-  --ti-lowcode-base-lemon-13: #eddfb2;
-
-  // expand-lime
-  --ti-lowcode-base-lime-1: #f8fae3;
-  --ti-lowcode-base-lime-2: #eff5bf;
-  --ti-lowcode-base-lime-3: #e2ed8e;
-  --ti-lowcode-base-lime-4: #d5e667;
-  --ti-lowcode-base-lime-5: #c6de3e;
-  --ti-lowcode-base-lime-6: #b2d119;
-  --ti-lowcode-base-lime-7: #95b312;
-  --ti-lowcode-base-lime-8: #728c0a;
-  --ti-lowcode-base-lime-9: #576e05;
-  --ti-lowcode-base-lime-10: #3b4d00;
-  --ti-lowcode-base-lime-11: #808c46;
-  --ti-lowcode-base-lime-12: #c1cc7a;
-  --ti-lowcode-base-lime-13: #3b4d00;
-
-  // expand-kelly
-  --ti-lowcode-base-kelly-1: #f2fae6;
-  --ti-lowcode-base-kelly-2: #daf2bb;
-  --ti-lowcode-base-kelly-3: #b9e683;
-  --ti-lowcode-base-kelly-4: #9edb58;
-  --ti-lowcode-base-kelly-5: #7dcc29;
-  --ti-lowcode-base-kelly-6: #5cb300;
-  --ti-lowcode-base-kelly-7: #4b9902;
-  --ti-lowcode-base-kelly-8: #3c8001;
-  --ti-lowcode-base-kelly-9: #2e6600;
-  --ti-lowcode-base-kelly-10: #1f4700;
-  --ti-lowcode-base-kelly-11: #628c38;
-  --ti-lowcode-base-kelly-12: #a2c777;
-  --ti-lowcode-base-kelly-13: #d2e6bb;
-
-  // expand-green
-  --ti-lowcode-base-green-1: #e8fced;
-  --ti-lowcode-base-green-2: #bbf2c8;
-  --ti-lowcode-base-green-3: #82e09a;
-  --ti-lowcode-base-green-4: #51d675;
-  --ti-lowcode-base-green-5: #25c251;
-  --ti-lowcode-base-green-6: #00b336;
-  --ti-lowcode-base-green-7: #029931;
-  --ti-lowcode-base-green-8: #01802b;
-  --ti-lowcode-base-green-9: #006624;
-  --ti-lowcode-base-green-10: #004a1b;
-  --ti-lowcode-base-green-11: #3d995c;
-  --ti-lowcode-base-green-12: #77c78f;
-  --ti-lowcode-base-green-13: #b8e6c7;
-
-  // expand-mint
-  --ti-lowcode-base-mint-1: #e8fcfa;
-  --ti-lowcode-base-mint-2: #bff5ef;
-  --ti-lowcode-base-mint-3: #8be8e0;
-  --ti-lowcode-base-mint-4: #5dded5;
-  --ti-lowcode-base-mint-5: #38d6ce;
-  --ti-lowcode-base-mint-6: #10c7c1;
-  --ti-lowcode-base-mint-7: #0aaba8;
-  --ti-lowcode-base-mint-8: #048c8c;
-  --ti-lowcode-base-mint-9: #046466;
-  --ti-lowcode-base-mint-10: #004547;
-  --ti-lowcode-base-mint-11: #3d9996;
-  --ti-lowcode-base-mint-12: #77c7c2;
-  --ti-lowcode-base-mint-13: #b8e6e1;
-
-  // expand-sky
-  --ti-lowcode-base-sky-1: #e8f8fc;
-  --ti-lowcode-base-sky-2: #c4f2ff;
-  --ti-lowcode-base-sky-3: #9de4fa;
-  --ti-lowcode-base-sky-4: #79d8f7;
-  --ti-lowcode-base-sky-5: #58cbf5;
-  --ti-lowcode-base-sky-6: #33bcf2;
-  --ti-lowcode-base-sky-7: #1f9acf;
-  --ti-lowcode-base-sky-8: #1075a3;
-  --ti-lowcode-base-sky-9: #065278;
-  --ti-lowcode-base-sky-10: #00304a;
-  --ti-lowcode-base-sky-11: #3d7f99;
-  --ti-lowcode-base-sky-12: #7ab8cc;
-  --ti-lowcode-base-sky-13: #b6e5f2;
-
-  // expand-blue
-  --ti-lowcode-base-blue-1: #e3effa;
-  --ti-lowcode-base-blue-2: #c4e1ff;
-  --ti-lowcode-base-blue-3: #99c9ff;
-  --ti-lowcode-base-blue-4: #68abfc;
-  --ti-lowcode-base-blue-5: #4191fa;
-  --ti-lowcode-base-blue-6: #1476ff;
-  --ti-lowcode-base-blue-7: #0f5ed4;
-  --ti-lowcode-base-blue-8: #0845a6;
-  --ti-lowcode-base-blue-9: #022e7a;
-  --ti-lowcode-base-blue-10: #001a4a;
-  --ti-lowcode-base-blue-11: #3d6899;
-  --ti-lowcode-base-blue-12: #7fa6d4;
-  --ti-lowcode-base-blue-13: #b6d4f2;
-
-  // expand-indigo
-  --ti-lowcode-base-indigo-1: #eee8ff;
-  --ti-lowcode-base-indigo-2: #ddd7fa;
-  --ti-lowcode-base-indigo-3: #b19cf7;
-  --ti-lowcode-base-indigo-4: #957af5;
-  --ti-lowcode-base-indigo-5: #6e51e0;
-  --ti-lowcode-base-indigo-6: #512fd6;
-  --ti-lowcode-base-indigo-7: #391eb0;
-  --ti-lowcode-base-indigo-8: #27108f;
-  --ti-lowcode-base-indigo-9: #19056e;
-  --ti-lowcode-base-indigo-10: #0e004d;
-  --ti-lowcode-base-indigo-11: #584d99;
-  --ti-lowcode-base-indigo-12: #847acc;
-  --ti-lowcode-base-indigo-13: #bbb8e6;
-
-  // expand-purple
-  --ti-lowcode-base-purple-1: #f5e8ff;
-  --ti-lowcode-base-purple-2: #e4c5fc;
-  --ti-lowcode-base-purple-3: #d0a1f7;
-  --ti-lowcode-base-purple-4: #b878f0;
-  --ti-lowcode-base-purple-5: #9f53e6;
-  --ti-lowcode-base-purple-6: #832fd6;
-  --ti-lowcode-base-purple-7: #641eb0;
-  --ti-lowcode-base-purple-8: #4c1091;
-  --ti-lowcode-base-purple-9: #370673;
-  --ti-lowcode-base-purple-10: #20004d;
-  --ti-lowcode-base-purple-11: #683d99;
-  --ti-lowcode-base-purple-12: #a07acc;
-  --ti-lowcode-base-purple-13: #cbb8e6;
-
-  // expand-pink
-  --ti-lowcode-base-pink-1: #fce6fb;
-  --ti-lowcode-base-pink-2: #fcc2f9;
-  --ti-lowcode-base-pink-3: #f794f2;
-  --ti-lowcode-base-pink-4: #eb67e6;
-  --ti-lowcode-base-pink-5: #e841e5;
-  --ti-lowcode-base-pink-6: #d91ad9;
-  --ti-lowcode-base-pink-7: #b50fb8;
-  --ti-lowcode-base-pink-8: #8f0a94;
-  --ti-lowcode-base-pink-9: #6b0370;
-  --ti-lowcode-base-pink-10: #47004d;
-  --ti-lowcode-base-pink-11: #993d99;
-  --ti-lowcode-base-pink-12: #c97acc;
-  --ti-lowcode-base-pink-13: #e2b8e6;
-
-  // expand-rose
-  --ti-lowcode-base-rose-1: #fce6ef;
-  --ti-lowcode-base-rose-2: #ffc4de;
-  --ti-lowcode-base-rose-3: #fa9bc9;
-  --ti-lowcode-base-rose-4: #f56cac;
-  --ti-lowcode-base-rose-5: #eb4696;
-  --ti-lowcode-base-rose-6: #e61c81;
-  --ti-lowcode-base-rose-7: #b50e65;
-  --ti-lowcode-base-rose-8: #940a54;
-  --ti-lowcode-base-rose-9: #70033f;
-  --ti-lowcode-base-rose-10: #4d002b;
-  --ti-lowcode-base-rose-11: #993d6e;
-  --ti-lowcode-base-rose-12: #cc7aa6;
-  --ti-lowcode-base-rose-13: #e6b8d2;
-
-  // 公司品牌色
-  --ti-lowcode-base-brand-color: #c7000b;
-
-  // 主色
-  --ti-lowcode-base-primary-color-1: #191919;
-  --ti-lowcode-base-primary-color-2: #1476ff;
-
-  // 背景色
-  --ti-lowcode-base-bg: #f5f5f5;
-  --ti-lowcode-base-bg-1: rgba(0, 0, 0, 0.05);
-  --ti-lowcode-base-bg-2: #fafafa;
-  --ti-lowcode-base-bg-3: #191919;
-  --ti-lowcode-base-bg-4: #595959;
-  --ti-lowcode-base-bg-5: #fff;
-  --ti-lowcode-base-bg-6: #5959591a;
-  --ti-lowcode-base-bg-7: #f6f6f6;
-
-  // 文本色
-  --ti-lowcode-base-text-color: #191919;
-  --ti-lowcode-base-text-color-1: #595959;
-  --ti-lowcode-base-text-color-2: #1476ff;
-  --ti-lowcode-base-text-color-3: #808080;
-  --ti-lowcode-base-text-color-4: #c2c2c2;
-
-  // 文本链接色
-  --ti-lowcode-base-text-link-color: #191919;
-  --ti-lowcode-base-text-link-color-1: #595959;
-  --ti-lowcode-base-text-link-color-2: #c2c2c2;
-  --ti-lowcode-base-text-link-color-3: #fff;
-
-  // 按钮边框色
-  --ti-lowcode-base-secondary-button-border-color: #595959;
-  --ti-lowcode-base-secondary-button-border-hover-color: #c2c2c2;
-  --ti-lowcode-base-default-button-border-color: #c2c2c2;
-  --ti-lowcode-base-default-button-border-hover-color: #191919;
-  --ti-lowcode-base-default-button-border-disable-color: #dbdbdb;
-
-  // 分割线
-  --ti-lowcode-base-split-color-1: rgba(0, 0, 0, 0.08); // 白色背景分割线
-  --ti-lowcode-base-split-color-2: rgba(0, 0, 0, 0.15); // 灰色背景分割线
-
-  // 状态色
-  --ti-lowcode-base-error-color: #f23030;
-  --ti-lowcode-base-warn-color: #ff8800;
-  --ti-lowcode-base-warn-color-1: #f7d916;
-  --ti-lowcode-base-success-color: #5cb300;
-  --ti-lowcode-base-prompt-color: #1476ff;
-  --ti-lowcode-base-invalidate-color: #ebebeb;
-}
diff --git a/packages/theme/light/block.less b/packages/theme/light/block.less
index 0d85bda2c..fbf23c815 100644
--- a/packages/theme/light/block.less
+++ b/packages/theme/light/block.less
@@ -1,54 +1,28 @@
 :root {
-  // 历史备份列表
-  --ti-lowcode-component-block-history-list-item-border-color: var(--ti-lowcode-common-border-color-1); // 组件边框色
-  --ti-lowcode-component-block-history-list-item-hover-bg: var(
-    --ti-lowcode-common-component-hover-bg
-  ); // 组件 hover 背景 色
-  --ti-lowcode-component-block-history-list-item-btn-color: var(
-    --ti-lowcode-common-secondary-text-color
-  ); // 预览还原按钮文字色
-  --ti-lowcode-component-block-history-list-item-btn-hover-color: var(
-    --ti-lowcode-common-text-main-color
-  ); // 预览还原 hover 颜色
-  --ti-lowcode-component-block-history-list-item-btn-hover-bg: var(--ti-lowcode-common-hover-bg-1); // 预览还原背景色
-  --ti-lowcode-component-block-history-list-item-btn-border-color: var(
-    --ti-lowcode-common-secondary-text-color
-  ); // 预览还原边框色
-
   // 区块列表
-  --ti-lowcode-component-block-list-item-color: var(--ti-lowcode-common-text-main-color); // 区块列表颜色
-  --ti-lowcode-component-block-list-shortcut-title-color: var(--ti-lowcode-common-primary-text-color); // 快照标题颜色
-  --ti-lowcode-component-block-list-shortcut-bg: var(--ti-lowcode-common-component-bg); // 快照标题颜色
-  --ti-lowcode-component-block-list-border-color: var(--ti-lowcode-common-border-color-4); // 快照标题颜色
-  --ti-lowcode-component-block-list-item-active-bg: #f5f5f5; // 区块 active 背景色
-  --ti-lowcode-component-block-version-list-item-border-color: var(--ti-lowcode-base-gray-20);
-  --ti-lowcode-component-block-version-list-item-bg: var(--ti-lowcode-base-gray-0);
-  --ti-lowcode-component-block-version-list-version-bg: #1476ff1a;
-  --ti-lowcode-component-block-version-list-version-color: var(--ti-lowcode-common-primary-color);
-  --ti-lowcode-component-block-version-list-panel-title-color: var(--ti-lowcode-common-text-title-color);
-  --ti-lowcode-component-block-version-list-time-color: var(--ti-lowcode-common-text-title-color);
+  --ti-lowcode-component-block-list-item-color: var(--te-common-text-secondary); // 区块列表颜色
+  --ti-lowcode-component-block-list-shortcut-title-color: var(--te-common-text-primary); // 快照标题颜色
+  --ti-lowcode-component-block-list-shortcut-bg: var(--te-common-bg-default); // 快照标题颜色
+  --ti-lowcode-component-block-list-item-active-bg: var(--te-common-bg-container); // 区块 active 背景色
+  --ti-lowcode-component-block-version-list-version-bg: var(--te-common-bg-default);
+  --ti-lowcode-component-block-version-list-version-color: var(--te-common-text-primary);
+  --ti-lowcode-component-block-version-list-panel-title-color: var(--te-common-text-primary);
+  --ti-lowcode-component-block-version-list-time-color: var(--te-common-text-primary);
   --ti-lowcode-component-block-version-list-desc-color: var(--te-common-text-weaken);
-  --ti-lowcode-component-block-version-list-current-version-color: var(--ti-lowcode-base-text-color-2);
-  --ti-lowcode-component-block-setting-popover-bg: var(--ti-lowcode-base-gray-0);
-  --ti-lowcode-component-block-setting-item-hover-bg: var(--ti-lowcode-base-bg-2);
-  --ti-lowcode-component-block-setting-item-text-color: var(--ti-lowcode-base-text-color);
+  --ti-lowcode-component-block-setting-popover-bg: var(--te-common-bg-default);
+  --ti-lowcode-component-block-setting-item-text-color: var(--te-common-text-secondary);
   // 区块管理 - 添加分类
   --ti-lowcode-component-block-list-add-group-btn-bg: transparent;
-  --ti-lowcode-component-block-list-add-group-btn-border: 1px solid var(--ti-lowcode-base-default-button-border-color);
-  --ti-lowcode-component-block-list-setting-btn-color: var(--ti-lowcode-base-default-button-border-hover-color);
-  --ti-lowcode-component-block-list-setting-btn-hover-color: var(--ti-lowcode-base-default-button-border-hover-color);
+  --ti-lowcode-component-block-list-add-group-btn-border: 1px solid var(--te-common-border-default);
+  --ti-lowcode-component-block-list-setting-btn-color: var(--te-common-text-primary);
+  --ti-lowcode-component-block-list-setting-btn-hover-color: var(--te-common-text-primary);
   --ti-lowcode-component-block-list-add-group-btn-border-radius: 6px;
 }
 
-.block-setting-content {
-  --ti-lowcode-block-config-form-item-color: var(--ti-lowcode-base-text-color);
-}
-
 // 区块设置 - 标签
 .block-tag-create {
-  --ti-lowcode-block-config-tag-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-block-config-tag-bg: var(--ti-lowcode-input-bg);
-  --ti-lowcode-block-config-tag-hover-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-block-config-tag-hover-bg: #f2f2f2;
-  --ti-lowcode-block-config-tag-close-color: var(--ti-lowcode-toolbar-icon-color);
+  --ti-lowcode-block-config-tag-color: var(--te-common-text-primary);
+  --ti-lowcode-block-config-tag-bg: var(--te-common-bg-disabled);
+  --ti-lowcode-block-config-tag-hover-color: var(--te-common-text-primary);
+  --ti-lowcode-block-config-tag-hover-bg: var(--te-common-bg-disabled);
 }
diff --git a/packages/theme/light/bridge.less b/packages/theme/light/bridge.less
index 2b23ddc8b..0619a1c4b 100644
--- a/packages/theme/light/bridge.less
+++ b/packages/theme/light/bridge.less
@@ -1,11 +1,6 @@
 .plugin-panel {
   // 资源管理
-  --ti-lowcode-bridge-list-color: var(--ti-lowcode-base-gray-90);
-  --ti-lowcode-bridge-list-bg: var(--ti-lowcode-base-gray-10);
-  --ti-lowcode-birdge-editor-border-color: var(--ti-lowcode-base-gray-20);
-  --ti-lowcode-birdge-input-label-color: var(--ti-lowcode-base-text-color-1);
-
-  // npm工具类中代码预览的主题
-  --ti-lowcode-birdge-code-preview-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-birdge-code-preview-bg-color: #f0f0f0;
+  --ti-lowcode-bridge-list-color: var(--te-common-text-primary);
+  --ti-lowcode-bridge-list-bg: var(--te-common-bg-container);
+  --ti-lowcode-birdge-editor-border-color: var(--te-common-border-default);
 }
diff --git a/packages/theme/light/events.less b/packages/theme/light/events.less
index 34b0345ad..e9ccf9375 100644
--- a/packages/theme/light/events.less
+++ b/packages/theme/light/events.less
@@ -1,40 +1,39 @@
 .setting-advanced-add-custom-event-tip {
-  --ti-lowcode-events-add-custom-event-tips-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-event-add-custom-event-tips-highlight-color: var(--ti-lowcode-base-warn-color);
+  --ti-lowcode-events-add-custom-event-tips-color: var(--te-common-text-primary);
+  --ti-lowcode-event-add-custom-event-tips-highlight-color: var(--te-common-color-warning);
 }
 
 .setting-advanced-bind-event-list {
-  --ti-lowcode-events-bind-event-list-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-events-bind-event-list-item-disabled-color: var(--ti-lowcode-base-text-color-4);
-  --lowcode-events-bind-event-list-item-hover-bg-color: var(--ti-lowcode-base-bg-1);
+  --ti-lowcode-events-bind-event-list-color: var(--te-common-text-primary);
+  --ti-lowcode-events-bind-event-list-item-disabled-color: var(--te-common-text-disabled);
+  --lowcode-events-bind-event-list-item-hover-bg-color: var(--te-common-bg-container);
 }
 
 .bind-action-list {
-  --ti-lowcode-events-bind-action-item-border-color: var(--ti-lowcode-base-split-color-1);
-  --ti-lowcode-events-event-bind-color: var(--ti-lowcode-base-primary-color-2);
-  --ti-lowcode-events-bind-action-item-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-events-bind-action-item-hover-bg-color: var(--ti-lowcode-base-bg-1);
-  --ti-lowcode-events-bind-action-item-linked-bg-color: var(--ti-lowcode-base-success-color);
-  --ti-lowcode-events-bind-action-item-linked-color: var(--ti-lowcode-base-gray-0);
+  --ti-lowcode-events-bind-action-item-border-color: var(--te-common-border-default);
+  --ti-lowcode-events-event-bind-color: var(--te-common-text-checked);
+  --ti-lowcode-events-bind-action-item-color: var(--te-common-text-primary);
+  --ti-lowcode-events-bind-action-item-hover-bg-color: var(--te-common-bg-container);
+  --ti-lowcode-events-bind-action-item-linked-bg-color: var(--te-common-color-success);
+  --ti-lowcode-events-bind-action-item-linked-color: var(--te-common-text-dark-inverse);
   --ti-lowcode-events-empty-action-bg-color: var(--te-common-bg-container);
   --ti-lowcode-events-empty-action-color: var(--te-common-text-weaken);
-  --ti-lowcode-events-custom-icon-color: var(--te-common-text-weaken);
-  --ti-lowcode-events-empty-action-tips-strong-color: var(--ti-lowcode-base-warn-color);
+  --ti-lowcode-events-empty-action-tips-strong-color: var(--te-common-color-warning);
 }
 
 .advanced-config-container {
-  --ti-lowcode-events-advanced-config-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-events-advanced-label-color: var(--ti-lowcode-base-text-color-1);
-  --ti-lowcode-events-advanced-binding-state-bg-color: var(--ti-lowcode-base-primary-color-2);
-  --ti-lowcode-events-advanced-binding-state-color: var(--ti-lowcode-base-gray-0);
+  --ti-lowcode-events-advanced-config-color: var(--te-common-text-primary);
+  --ti-lowcode-events-advanced-label-color: var(--te-common-text-secondary);
+  --ti-lowcode-events-advanced-binding-state-bg-color: var(--te-common-bg-primary-checked);
+  --ti-lowcode-events-advanced-binding-state-color: var(--te-common-text-dark-inverse);
 }
 
 .bind-event-dialog-content {
   --ti-lowcode-bind-event-dialog-color: var(--te-common-text-secondary);
-  --ti-lowcode-bind-event-dialog-content-left-border-color: var(--ti-lowcode-base-split-color-1);
-  --ti-lowcode-bind-event-dialog-content-right-monaco-border-color: var(--ti-lowcode-base-split-color-1);
-  --ti-lowcode-bind-event-dialog-content-left-list-item-active-bg-color: var(--ti-lowcode-base-bg-1);
-  --ti-lowcode-bind-event-dialog-new-action-tip-color: var(--ti-lowcode-base-text-color-1);
-  --ti-lowcode-bind-event-dialog-action-selected-icon-color: var(--ti-lowcode-base-primary-color-2);
-  --ti-lowcode-bind-event-dialog-mark-bg-color: var(--ti-lowcode-base-bg-1);
+  --ti-lowcode-bind-event-dialog-content-left-border-color: var(--te-common-border-default);
+  --ti-lowcode-bind-event-dialog-content-right-monaco-border-color: var(--te-common-border-default);
+  --ti-lowcode-bind-event-dialog-content-left-list-item-active-bg-color: var(--te-common-bg-container);
+  --ti-lowcode-bind-event-dialog-new-action-tip-color: var(--te-common-text-secondary);
+  --ti-lowcode-bind-event-dialog-action-selected-icon-color: var(--te-common-text-checked);
+  --ti-lowcode-bind-event-dialog-mark-bg-color: var(--te-common-bg-container);
 }
diff --git a/packages/theme/light/gpt-dialog.less b/packages/theme/light/gpt-dialog.less
index 14abccd65..4457ec3c9 100644
--- a/packages/theme/light/gpt-dialog.less
+++ b/packages/theme/light/gpt-dialog.less
@@ -3,8 +3,6 @@
   --ti-lowcode-chat-model-text: #191919;
   // chatGPT聊天窗问题模板文字边框颜色
   --ti-lowcode-chat-model-text-border: #cbcbcb;
-  // chatGPT聊天窗提问框图标
-  --ti-lowcode-chat-model-input-icon: #999999;
   // chatGPT聊天窗用户头像边框色
   --ti-lowcode-chat-model-avatar-border: #dfe1e6;
   // chatGPT聊天窗AI聊天文字背景
@@ -55,13 +53,13 @@
   --ti-lowcode-chat-model-tips-bg: #f5f5f5;
 
   // chatGPT加载
-  --ti-lowcode-chat-loading-svg-color: var(--ti-lowcode-common-primary-color);
+  --ti-lowcode-chat-loading-svg-color: #1476ff;
   --ti-lowcode-chat-loading-text-color: #595959;
 }
 
 .chat-model-popover {
   --ti-lowcode-chat-model-popover-bg: #fff;
-  --ti-lowcode-chat-model-popover-color: var(--ti-lowcode-base-text-color);
+  --ti-lowcode-chat-model-popover-color: #191919;
   --ti-lowcode-chat-model-popover-active-bg: #fff;
-  --ti-lowcode-chat-model-popover-active-color: var(--ti-lowcode-base-text-color-2);
+  --ti-lowcode-chat-model-popover-active-color: #1476ff;
 }
diff --git a/packages/theme/light/help.less b/packages/theme/light/help.less
index ec1b448a0..ff0d4b1b6 100644
--- a/packages/theme/light/help.less
+++ b/packages/theme/light/help.less
@@ -1,16 +1,13 @@
 .shepherd-modal-overlay-container,
 .tiny-guide {
-  --ti-lowcode-help-guide-content-text-color: var(--ti-lowcode-base-text-color-1);
-  --ti-lowcode-help-guide-title-text-color: var(--ti-lowcode-base-primary-color-1);
-  --ti-lowcode-help-guide-progress-style-text-color: var(--ti-lowcode-base-primary-color-1);
+  --ti-lowcode-help-guide-content-text-color: var(--te-common-text-secondary);
+  --ti-lowcode-help-guide-title-text-color: var(--te-common-text-primary);
+  --ti-lowcode-help-guide-progress-style-text-color: var(--te-common-text-primary);
   --ti-lowcode-help-guide-mask-bg-color: inherit;
 }
 .help-plugin-box {
-  --ti-lowcode-help-box-bg-color: #ffffff;
-  --ti-lowcode-help-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
-  --ti-lowcode-help-box-title-text-color: #191919;
-  --ti-lowcode-help-box-item-text-color: #595959;
-  --ti-lowcode-help-box-question-border-top: #ebebeb;
-  --ti-lowcode-help-box-question-item-text-color: #1476ff;
-  --ti-lowcode-help-box-item-hover-bg-color: #f5f5f5;
+  --ti-lowcode-help-box-bg-color: var(--te-common-bg-default);
+  --ti-lowcode-help-box-title-text-color: var(--te-common-text-primary);
+  --ti-lowcode-help-box-question-border-top: var(--te-common-border-divider);
+  --ti-lowcode-help-box-item-hover-bg-color: var(--te-common-bg-container);
 }
diff --git a/packages/theme/light/i18n.less b/packages/theme/light/i18n.less
index f04a0b88c..0206288b2 100644
--- a/packages/theme/light/i18n.less
+++ b/packages/theme/light/i18n.less
@@ -1,16 +1,10 @@
 :root {
-  // 国际化表格操作图标颜色
-  --ti-lowcode-i18n-operate-svg-color: var(--ti-lowcode-base-text-color);
   // 国际化表格加载中字体颜色
-  --ti-lowcode-i18n-loading-text-color: #999999;
+  --ti-lowcode-i18n-loading-text-color: var(--te-common-text-weaken);
   // 国际化表格加载中图标颜色
-  --ti-lowcode-i18n-loading-svg-color: var(--ti-lowcode-base-text-color);
+  --ti-lowcode-i18n-loading-svg-color: var(--te-common-text-primary);
   // 国际化边框颜色
-  --ti-lowcode-i18n-border-color: #ebebeb;
+  --ti-lowcode-i18n-border-color: var(--te-common-border-default);
   // 国际化按钮字体颜色
-  --ti-lowcode-i18n-button-color: #191919;
-  // 国际化按钮图标颜色
-  --ti-lowcode-i18n-icon-color: #808080;
-  // 国际化按钮字体边框颜色
-  --ti-lowcode-i18n-button-border-color: #dbdbdb;
+  --ti-lowcode-i18n-button-color: var(--te-common-text-primary);
 }
diff --git a/packages/theme/light/index.less b/packages/theme/light/index.less
index 60c943fad..66a84d889 100644
--- a/packages/theme/light/index.less
+++ b/packages/theme/light/index.less
@@ -1,5 +1,4 @@
 // 主题配置优先于公共配置
-@import './base.less';
 @import './variable.less';
 @import './tutorial.less';
 @import './help.less';
diff --git a/packages/theme/light/life-cycles.less b/packages/theme/light/life-cycles.less
index b967a16b2..8377abf2d 100644
--- a/packages/theme/light/life-cycles.less
+++ b/packages/theme/light/life-cycles.less
@@ -1,7 +1,7 @@
 :root {
   // 生命周期
-  --ti-lowcode-life-cycle-alert-color: #808080;
-  --ti-lowcode-life-cycle-item-hover-bg: var(--ti-lowcode-common-hover-bg-1);
-  --ti-lowcode-life-cycle-item-disable-color: var(--ti-lowcode-base-text-link-color-2);
-  --ti-lowcode-life-cycle-editor-border: var(--ti-lowcode-base-default-button-border-color);
+  --ti-lowcode-life-cycle-alert-color: var(--te-common-text-disabled);
+  --ti-lowcode-life-cycle-item-hover-bg: var(--te-common-bg-container);
+  --ti-lowcode-life-cycle-item-disable-color: var(--te-common-text-disabled);
+  --ti-lowcode-life-cycle-editor-border: var(--te-common-border-default);
 }
diff --git a/packages/theme/light/materials.less b/packages/theme/light/materials.less
index b18119956..b936e84ed 100644
--- a/packages/theme/light/materials.less
+++ b/packages/theme/light/materials.less
@@ -1,30 +1,22 @@
 :root {
   // 带边框的图标按钮边框颜色
-  --ti-lowcode-materials-border-icon-border-color: var(--ti-lowcode-base-default-button-border-color);
-  // 带边框的图标按钮图标颜色
-  --ti-lowcode-materials-border-icon-svg-color: var(--ti-lowcode-base-text-color);
+  --ti-lowcode-materials-border-icon-border-color: var(--te-common-border-default);
   // 带边框的图标按钮悬浮边框颜色
-  --ti-lowcode-materials-border-icon-border-color-hover: var(--ti-lowcode-base-default-button-border-hover-color);
+  --ti-lowcode-materials-border-icon-border-color-hover: var(--te-common-border-active);
   // 带边框的图标按钮背景颜色
-  --ti-lowcode-materials-border-icon-bg-color: var(--ti-lowcode-base-bg-5);
+  --ti-lowcode-materials-border-icon-bg-color: var(--te-common-bg-default);
   // 区块分组下拉选项下边框颜色
-  --ti-lowcode-materials-block-group-item-border-color: var(--ti-lowcode-common-primary-text-color);
+  --ti-lowcode-materials-block-group-item-border-color: var(--te-common-text-primary);
   // 添加区块筛选模块字体颜色
-  --ti-lowcode-materials-block-filter-text-color: var(--ti-lowcode-common-primary-text-color);
+  --ti-lowcode-materials-block-filter-text-color: var(--te-common-text-primary);
   // 添加区块穿梭框面板背景颜色
-  --ti-lowcode-materials-block-transfer-bg-color: var(--ti-lowcode-common-component-bg);
+  --ti-lowcode-materials-block-transfer-bg-color: var(--te-common-bg-default);
   // 添加区块穿梭框面板头部字体颜色
-  --ti-lowcode-materials-block-transfer-header-text-color: var(--ti-lowcode-common-primary-text-color);
-  // 添加区块筛选模块选中字体颜色
-  --ti-lowcode-materials-block-filter-selected-text-color: var(--ti-lowcode-common-primary-text-color);
+  --ti-lowcode-materials-block-transfer-header-text-color: var(--te-common-text-primary);
   // 添加区块穿梭框面板头部背景颜色
   --ti-lowcode-materials-block-transfer-header-bg-color: var(--te-common-bg-container);
-  // 区块分组添加区块筛选项 hover 颜色
-  --ti-lowcode-materials-block-filter-hover-color: var(--ti-lowcode-common-primary-text-color);
   // 组件列表  组件名称颜色
-  --ti-lowcode-materials-component-list-color: var(--ti-lowcode-common-text-main-color);
+  --ti-lowcode-materials-component-list-color: var(--te-common-text-secondary);
   // 删除区块分组气泡弹窗背景色
-  --ti-lowcode-materials-block-group-delete-popover-bg-color: var(--ti-lowcode-common-component-bg);
-  // 删除区块分组气泡弹窗标题色
-  --ti-lowcode-materials-block-group-delete-popover-title-color: var(--ti-lowcode-common-text-title-color);
+  --ti-lowcode-materials-block-group-delete-popover-bg-color: var(--te-common-bg-popover);
 }
diff --git a/packages/theme/light/metaComponent.less b/packages/theme/light/metaComponent.less
index 9fe592bd2..50a234785 100644
--- a/packages/theme/light/metaComponent.less
+++ b/packages/theme/light/metaComponent.less
@@ -1,66 +1,36 @@
 :root {
   // MetaListItem
-  --ti-lowcode-meta-list-item-bg-color: var(--ti-lowcode-base-bg-5);
-  --ti-lowcode-meta-list-item-border-color: rgba(0, 0, 0, 0.08);
+  --ti-lowcode-meta-list-item-bg-color: var(--te-common-bg-default);
+  --ti-lowcode-meta-list-item-border-color: var(--te-common-border-default);
   //
-  --ti-lowcode-meta-list-top-color: var(--ti-lowcode-base-text-color-1);
+  --ti-lowcode-meta-list-top-color: var(--te-common-text-secondary);
   // MetaJsSlot
-  --lowcode-meta-js-slot-color: var(--ti-lowcode-base-text-color-1);
+  --lowcode-meta-js-slot-color: var(--te-common-text-secondary);
 
   // MetaCodeEditor
-  --ti-lowcode-meta-codeEditor-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-meta-codeEditor-hover-color: var(--ti-lowcode-base-text-color);
+  --ti-lowcode-meta-codeEditor-color: var(--te-common-text-primary);
+  --ti-lowcode-meta-codeEditor-hover-color: var(--te-common-text-primary);
   --ti-lowcode-meta-codeEditor-border-color: var(--te-common-border-default);
-  --ti-lowcode-meta-codeEditor-border-hover-color: var(--ti-lowcode-base-default-button-border-hover-color);
+  --ti-lowcode-meta-codeEditor-border-hover-color: var(--te-common-border-active);
   --ti-lowcode-meta-codeEditor-icon-color: var(--te-common-text-weaken);
 }
 
 // config-item label popover tips
 .prop-label-tips-container {
-  --ti-lowcode-meta-config-item-label-tips-desc-color: var(--ti-lowcode-base-text-color-1);
-  --ti-lowcode-meta-config-item-label-tips-title-color: var(--ti-lowcode-base-text-color);
+  --ti-lowcode-meta-config-item-label-tips-desc-color: var(--te-common-text-secondary);
+  --ti-lowcode-meta-config-item-label-tips-title-color: var(--te-common-text-primary);
 }
 
 // configItem
 .properties-item {
-  --ti-lowcode-meta-config-item-error-tips-color: var(--ti-lowcode-base-error-color);
-  --ti-lowcode-meta-config-item-label-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-meta-config-item-bind-color: var(--ti-lowcode-base-gray-0);
-  --ti-lowcode-meta-config-item-bind-bg: var(--ti-lowcode-base-primary-color-2);
-
-  --ti-lowcode-meta-config-item-active-bg: var(--ti-lowcode-common-hover-bg-1);
-  --ti-lowcode-meta-config-item-link-color: var(--ti-lowcode-base-text-color-2);
-}
-
-// MetaBindVariable
-.meta-bind-variable-dialog-box {
-  --ti-lowcode-meta-bind-variable-icon-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-meta-bind-variable-icon-hover-bg-color: var(--ti-lowcode-base-bg-1);
-  --ti-lowcode-meta-bind-variable-content-left-title-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-meta-bind-variable-content-right-title-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-meta-bind-variable-list-wrap-border-color: var(--ti-lowcode-base-default-button-border-color);
-  --ti-lowcode-meta-bind-variable-content-left-list-border-right-color: var(
-    --ti-lowcode-base-default-button-border-color
-  );
-  --ti-lowcode-meta-bind-variable-list-item-hover-bg-color: var(--ti-lowcode-base-bg-1);
-  --ti-lowcode-meta-bind-variable-item-selected-bg-color: var(--ti-lowcode-base-bg-1);
-  --ti-lowcode-meta-bind-variable-item-hover-bg-color: var(--ti-lowcode-base-bg-1);
-  --ti-lowcode-meta-bind-variable-bottom-border-color: var(--ti-lowcode-base-default-button-border-color);
-  --ti-lowcode-meta-bind-variable-top-border-color: var(--ti-lowcode-base-default-button-border-color);
-  --ti-lowcode-meta-bind-variable-bottom-color: var(--ti-lowcode-base-text-color-1);
-  --ti-lowcode-meta-bind-variable-content-left-list-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-meta-bind-variable-item-text-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-meta-bind-variable-header-alert-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-meta-bind-variable-top-color: var(--ti-lowcode-base-text-color);
+  --ti-lowcode-meta-config-item-error-tips-color: var(--te-common-color-error);
+  --ti-lowcode-meta-config-item-bind-color: var(--te-common-text-dark-inverse);
+  --ti-lowcode-meta-config-item-bind-bg: var(--te-common-bg-primary-checked);
+  --ti-lowcode-meta-config-item-active-bg: var(--te-common-bg-container);
 }
 
 // MetaCodeEditor
 .meta-code-editor-dialog-box {
-  --ti-lowcode-meta-code-editor-header-tips-container-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-meta-code-editor-header-collapse-icon-color: var(--ti-lowcode-base-gray-50);
-  --ti-lowcode-meta-code-editor-header-collapse-icon-hover-color: var(--ti-lowcode-base-gray-90);
-  --ti-lowcode-meta-code-editor-header-tips-demo-bg-color: var(--ti-lowcode-base-gray-5);
-  --ti-lowcode-meta-code-editor-header-tips-demo-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-meta-code-editor-source-code-content-border-color: var(--ti-lowcode-base-gray-40);
-  --ti-lowcode-meta-code-editor-err-msg-color: var(--ti-lowcode-base-error-color);
+  --ti-lowcode-meta-code-editor-header-tips-container-color: var(--te-common-text-primary);
+  --ti-lowcode-meta-code-editor-err-msg-color: var(--te-common-color-error);
 }
diff --git a/packages/theme/light/pageManage.less b/packages/theme/light/pageManage.less
index f8b542669..ae246aef2 100644
--- a/packages/theme/light/pageManage.less
+++ b/packages/theme/light/pageManage.less
@@ -1,27 +1,8 @@
 :root {
-  --ti-lowcode-page-manage-title-background-text-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-page-manage-tip-border-color: var(--ti-lowcode-base-gray-50);
-  --ti-lowcode-page-manage-tree-text-background-color: var(--ti-lowcode-common-bg-8);
-  --ti-lowcode-page-manage-tree-node-background-color: var(--ti-lowcode-common-component-bg);
-  --ti-lowcode-page-manage-tree-node-label-color: #191919;
-  --ti-lowcode-page-manage-tip-color: var(--ti-lowcode-base-gray-90);
-  --ti-lowcode-page-manage-input-background-color: var(--ti-lowcode-common-bg-9);
-  --ti-lowcode-page-manage-input-border-color: var(--ti-lowcode-common-text-color-4);
-  --ti-lowcode-page-manage-tips-icon-color: var(--ti-lowcode-common-primary-color);
-  --ti-lowcode-page-manage-content-tips-color: var(--ti-lowcode-common-text-color-5);
-  --ti-lowcode-page-manage-search-border-color: var(--ti-lowcode-base-gray-30);
-  --ti-lowcode-page-manage-tree-color: var(--ti-lowcode-common-text-main-color);
-  --ti-lowcode-page-manage-page-tree-background-active-color: var(--ti-lowcode-common-component-hover-bg);
-  --ti-lowcode-page-manage-page-tree-background-hover-color: var(--ti-lowcode-common-component-hover-bg);
-  --ti-lowcode-page-manage-svg-hover-color: var(--ti-lowcode-base-bg-3);
-  --ti-lowcode-page-manage-text-color: var(--ti-lowcode-base-text-color-1);
-  --ti-lowcode-page-manage-input-head-text-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-page-manage-btn-text-color: var(--ti-lowcode-base-gray-50);
-  --ti-lowcode-page-manage-btn-text-color-2: var(--ti-lowcode-common-text-color-5);
-  --ti-lowcode-page-manage-error-color: var(--ti-lowcode-common-error-color);
-  --ti-lowcode-page-manage-input-group-color: var(--ti-lowcode-base-bg-5);
-  --ti-lowcode-page-manage-input-group-border-color: var(--ti-lowcode-base-default-button-border-color);
-  --ti-lowcode-page-manage-input-group-border-right-color: var(--ti-lowcode-common-component-hover-bg);
-  --ti-lowcode-page-manage-input-output-text-color: var(--ti-lowcode-base-gray-60);
-  --ti-lowcode-page-manage-input-output-text-bg-color: var(--ti-lowcode-base-blue-6);
+  --ti-lowcode-page-manage-title-background-text-color: var(--te-common-text-primary);
+  --ti-lowcode-page-manage-tip-text-color: var(--te-common-text-weaken);
+  --ti-lowcode-page-manage-tree-text-background-color: var(--te-common-bg-default);
+  --ti-lowcode-page-manage-tree-node-background-color: var(--te-common-bg-default);
+  --ti-lowcode-page-manage-text-color: var(--te-common-text-secondary);
+  --ti-lowcode-page-manage-input-head-text-color: var(--te-common-text-primary);
 }
diff --git a/packages/theme/light/plugin-js.less b/packages/theme/light/plugin-js.less
index ad512cd92..bb25ca60d 100644
--- a/packages/theme/light/plugin-js.less
+++ b/packages/theme/light/plugin-js.less
@@ -1,7 +1,5 @@
 // 页面JS 插件面板
 .plugin-page-js-container {
-  --ti-lowcode-plugin-js-bg: var(--ti-lowcode-base-gray-0);
-  --ti-lowcode-plugin-js-head-border-bottom-color: var(--ti-lowcode-base-split-color-1);
-  --ti-lowcode-code-edit-content-border-color: var(--ti-lowcode-base-gray-40);
-  --ti-lowcode-plugin-js-help-link-color: var(--ti-lowcode-base-primary-color-2);
+  --ti-lowcode-plugin-js-bg: var(--te-common-bg-default);
+  --ti-lowcode-plugin-js-help-link-color: var(--te-common-text-link);
 }
diff --git a/packages/theme/light/toolbar.less b/packages/theme/light/toolbar.less
index 057378c2a..251b77d1e 100644
--- a/packages/theme/light/toolbar.less
+++ b/packages/theme/light/toolbar.less
@@ -1,17 +1,12 @@
 .tiny-engine-toolbar {
   // 头部工具栏
-  --ti-lowcode-toolbar-border-bottom-color: var(--ti-lowcode-common-border-color-4);
-  --ti-lowcode-toolbar-media-bg: var(--ti-lowcode-common-component-bg);
-  --ti-lowcode-toolbar-media-setting-border-color: var(--ti-lowcode-common-border-color-1);
-  --ti-lowcode-toolbar-title-color: var(--ti-lowcode-base-gray-90);
-  --ti-lowcode-toolbar-sub-title-color: var(--ti-lowcode-base-gray-60);
+  --ti-lowcode-toolbar-border-bottom-color: var(--te-common-border-divider);
+  --ti-lowcode-toolbar-title-color: var(--te-common-text-primary);
   --ti-lowcode-toolbar-hover-color: var(--te-common-bg-container);
-  --ti-lowcode-toolbar-view-active-bg: rgb(235, 235, 235); // 相当于 规范中定义的 #191919 透明度5%
-  --ti-lowcode-toolbar-left-icon-bg-hover: rgb(240, 240, 240);
-  --ti-lowcode-toolbar-popover-bg: var(--ti-lowcode-base-gray-0);
-  --ti-lowcode-toolbar-active-color: var(--ti-lowcode-base-gray-60);
-  --ti-lowcode-toolbar-user-img-border-color: var(--ti-lowcode-base-gray-20);
-  --ti-lowcode-toolbar-dot-color: var(--ti-lowcode-base-brand-color);
-  --ti-lowcode-toolbar-collapsed-toolbar-bg: #f5f5f5;
-  --ti-lowcode-toolbar-right-line: #ebebeb;
+  --ti-lowcode-toolbar-view-active-bg: var(--te-common-bg-prompt);
+  --ti-lowcode-toolbar-left-icon-bg-hover: var(--te-common-icon-primary);
+  --ti-lowcode-toolbar-active-color: var(--te-common-text-secondary);
+  --ti-lowcode-toolbar-user-img-border-color: var(--te-common-border-divider);
+  --ti-lowcode-toolbar-dot-color: var(--te-common-color-error);
+  --ti-lowcode-toolbar-right-line: var(--te-common-bg-prompt);
 }
diff --git a/packages/theme/light/tree.less b/packages/theme/light/tree.less
index aa0c30b1a..5330c185a 100644
--- a/packages/theme/light/tree.less
+++ b/packages/theme/light/tree.less
@@ -1,8 +1,4 @@
 .outlinebox {
-  --ti-lowcode-tree-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-tree-icon-color: var(--ti-lowcode-base-primary-color-1);
-  --ti-lowcode-tree-icon-hover-color: var(--ti-lowcode-base-text-color-1);
-  --ti-lowcode-tree-selected-color: rgb(110, 81, 224);
-  --ti-lowcode-tree-selected-bg: rgb(240, 237, 252);
-  --ti-lowcode-tree-border-color: #ebebeb;
+  --ti-lowcode-tree-icon-hover-color: var(--te-common-icon-hover);
+  --ti-lowcode-tree-border-color: var(--te-common-border-default); // 亮色主题特有
 }
diff --git a/packages/theme/light/tutorial.less b/packages/theme/light/tutorial.less
index 39f0d5dbc..4e963d5d3 100644
--- a/packages/theme/light/tutorial.less
+++ b/packages/theme/light/tutorial.less
@@ -1,5 +1,5 @@
 #tiny-engine-left-panel {
-  --ti-lowcode-tutorial-primary-text-color: var(--ti-lowcode-base-text-color-1);
-  --ti-lowcode-tutorial-primary-bg-color: var(--ti-lowcode-base-bg-5);
+  --ti-lowcode-tutorial-primary-text-color: var(--te-common-text-secondary);
+  --ti-lowcode-tutorial-primary-bg-color: var(--te-common-bg-default);
   --ti-lowcode-tutorial-hover-bg-color: var(--te-common-bg-container);
 }
diff --git a/packages/theme/light/variable.less b/packages/theme/light/variable.less
index aa5d12c92..080875ade 100644
--- a/packages/theme/light/variable.less
+++ b/packages/theme/light/variable.less
@@ -4,114 +4,65 @@
   --base-min-width: 1280px;
 
   // ------ 主要的公共主题色，前缀为 --ti-lowcode-common -------
-  --ti-lowcode-common-primary-color: var(--ti-lowcode-base-primary-color-2);
-  --ti-lowcode-common-primary-hover-color: var(--ti-lowcode-base-primary-color-2); // hover时，颜色不变
-  --ti-lowcode-common-component-bg: #fff;
-  --ti-lowcode-common-component-hover-bg: #f5f5f5;
-  --ti-lowcode-common-layout-bg: #fff;
-  --ti-lowcode-common-header-bg: #eee;
-  --ti-lowcode-common-primary-text-color: var(--ti-lowcode-base-text-color);
   --ti-lowcode-common-secondary-text-color: #c2c2c2;
-  --ti-lowcode-common-text-title-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-common-text-main-color: var(--ti-lowcode-base-text-color-1);
-  --ti-lowcode-common-text-placeholder-color: var(--ti-lowcode-base-text-color-1);
-  --ti-lowcode-common-text-color-1: #6a6a6a;
-  --ti-lowcode-common-text-color-2: #d9d9d9;
-  --ti-lowcode-common-text-color-3: #fff;
-  --ti-lowcode-common-text-color-4: #50d4ab;
-  --ti-lowcode-common-text-color-5: var(--ti-lowcode-base-text-color-3);
-  --ti-lowcode-common-text-color-6: var(--ti-lowcode-base-text-color-1);
-  --ti-lowcode-common-border-color-1: #dfe1e6;
-  --ti-lowcode-common-border-color-3: #606165;
-  --ti-lowcode-common-border-color-4: #dfe1e6;
-  --ti-lowcode-common-hover-bg-1: #f5f5f5;
   --ti-lowcode-common-third-text-color: #ababab;
-  --ti-lowcode-common-error-color: var(--ti-lowcode-base-error-color);
-  --ti-lowcode-common-empty-text-color: var(--ti-lowcode-base-gray-50);
-
-  --ti-lowcode-info-color: var(--ti-lowcode-base-prompt-color);
-  --ti-lowcode-warning-color: var(--ti-lowcode-base-warn-color);
-  --ti-lowcode-warning-color-1: var(--ti-lowcode-base-warn-color-1);
-  --ti-lowcode-dark-1: #464c59;
 
   // ------ 公共组件的主题色，前缀为 --ti-lowcode-component-组件名 -------
-  --ti-lowcode-component-btn-default-color: var(--ti-lowcode-base-primary-color-1); // 默认按钮颜色
-  --ti-lowcode-component-btn-default-disabled-color: var(--ti-lowcode-common-secondary-text-color); // 默认禁用颜色
-  --ti-lowcode-component-btn-default-hover-color: var(--ti-lowcode-common-text-main-color); // 默认按钮 hover 颜色
-  --ti-lowcode-component-btn-default-border-color: var(--ti-lowcode-base-primary-color-1); // 默认按钮边框色
-  --ti-lowcode-component-btn-default-border-hover-color: var(
-    --ti-lowcode-common-text-main-color
-  ); // 默认按钮 hover 边框色
-  --ti-lowcode-component-search-bg: #fff; // tinysearch  背景色
+
   // svgButton
-  --ti-lowcode-component-svg-button-color: var(--ti-lowcode-base-text-color);
-  --ti-lowcode-component-svg-button-hover-color: var(--ti-lowcode-base-text-color);
+  --ti-lowcode-component-svg-button-color: var(--te-common-text-primary);
+  --ti-lowcode-component-svg-button-hover-color: var(--te-common-text-primary);
   --ti-lowcode-component-svg-button-hover-bg-color: var(--te-common-bg-prompt);
-  --ti-lowcode-component-svg-button-active-color: var(--ti-lowcode-base-text-color);
+  --ti-lowcode-component-svg-button-active-color: var(--te-common-text-primary);
   --ti-lowcode-component-svg-button-active-bg-color: var(--te-common-bg-prompt);
-
-  // 关闭按钮
-  --ti-lowcode-component-close-icon-text-color: var(--ti-lowcode-base-text-color); // 关闭按钮默认颜色
-  --ti-lowcode-component-close-icon-text-hover-color: var(
-    --ti-lowcode-common-primary-text-color
-  ); // 关闭按钮 hover 颜色
-
   // 插件面板
   --ti-lowcode-plugin-panel-title-color: rgb(25, 25, 25); // 插件面板标题色
   --ti-lowcode-plugin-panel-title-font-weight: 700; // 插件面板标题加粗效果
-  --ti-lowcode-plugin-panel-bg: var(--ti-lowcode-common-component-bg); // 插件面板背景色
-  --ti-lowcode-plugin-panel-border-right-color: var(--ti-lowcode-common-border-color-4); // 插件面板右侧边框色
-  --ti-lowcode-plugin-panel-header-border-bottom-color: #ebebeb; // 插件面板头部区域底部边框线颜色
+  --ti-lowcode-plugin-panel-bg: var(--te-common-bg-default); // 插件面板背景色
+  --ti-lowcode-plugin-panel-border-right-color: var(--te-common-border-divider); // 插件面板右侧边框色
+  --ti-lowcode-plugin-panel-header-border-bottom-color: var(
+    --te-common-border-divider
+  ); // 插件面板头部区域底部边框线颜色
 
   // 插件设置面板
-  --ti-lowcode-plugin-setting-panel-bg: var(--ti-lowcode-common-component-bg); // 插件设置面板背景色
+  --ti-lowcode-plugin-setting-panel-bg: var(--te-common-bg-default); // 插件设置面板背景色
 
   // 设置面板
-  --ti-lowcode-component-setting-panel-label-color: var(--ti-lowcode-common-text-main-color);
-  --ti-lowcode-component-setting-panel-icon-color: var(--ti-lowcode-common-text-main-color);
+  --ti-lowcode-component-setting-panel-label-color: var(--te-common-text-secondary);
+  --ti-lowcode-component-setting-panel-icon-color: var(--te-common-text-secondary);
 
   // ------ 各个模块的主题色，前缀为 --ti-lowcode-模块名 -------
 
-  --ti-lowcode-design-plugin-color: var(--ti-lowcode-base-gray-90);
-  --ti-lowcode-design-toolbar-icon-color: #8a8e99;
+  --ti-lowcode-design-plugin-color: var(--te-common-text-weaken);
 
   // 物料-组件列表
-  --ti-lowcode-material-component-list-border-color: var(--ti-lowcode-common-border-color-4);
-  --ti-lowcode-material-component-list-hover-bg: var(--ti-lowcode-common-component-hover-bg);
+  --ti-lowcode-material-component-list-hover-bg: var(--te-common-bg-container);
 
   // 页面管理
-  --ti-lowcode-page-tree-color: var(--ti-lowcode-common-text-main-color);
-  --ti-lowcode-page-tree-hover-color: var(--ti-lowcode-common-primary-text-color);
+  --ti-lowcode-page-tree-color: var(--te-common-text-secondary);
+  --ti-lowcode-page-tree-hover-color: var(--te-common-text-primary);
 
   // 数据源
-  --ti-lowcode-datasource-list-color: var(--ti-lowcode-common-text-main-color);
+  --ti-lowcode-datasource-list-color: var(--te-common-text-secondary);
 
   // 状态管理
-  --ti-lowcode-data-list-color: var(--ti-lowcode-common-text-main-color);
+  --ti-lowcode-data-list-color: var(--te-common-text-secondary);
   // 状态管理面板头部的底部边框色
-  --ti-lowcode-data-header-border-bottom-color: var(--ti-lowcode-common-border-color-4);
-  // 状态管理示例背景色
-  --ti-lowcode-data-example-bg-color: var(--ti-lowcode-dark-1);
-  // 状态管理示例文字色
-  --ti-lowcode-data-example-color: var(--ti-lowcode-common-text-color-2);
+  --ti-lowcode-data-header-border-bottom-color: var(--te-common-border-divider);
   // 添加高级属性文字颜色
   --ti-lowcode-data-advanced-text-color: #252b3a;
   // 添加高级属性 hover 文字颜色
   --ti-lowcode-data-advanced-text-hover-color: #5073e5;
-  // 状态管理按激活背景色
-  --ti-lowcode-data-radio-group-active-bg: var(--ti-lowcode-base-gray-0);
   // 状态管理按背景色
   --ti-lowcode-data-radio-group-bg: transparent;
 
   // 教程
-  --ti-lowcode-tutorial-list-item-color: var(--ti-lowcode-common-text-main-color);
+  --ti-lowcode-tutorial-list-item-color: var(--te-common-text-secondary);
 
   // 头部工具栏背景色
   --ti-lowcode-toolbar-bg: #fafafa;
   // 头部工具栏选中背景色
   --ti-lowcode-toolbar-active-bg: transparent;
-  // 头部工具栏边框色
-  --ti-lowcode-toolbar-border-color: var(--ti-lowcode-base-default-button-border-color);
   // 头部工具栏icon颜色
   --ti-lowcode-toolbar-icon-color: #404040;
   // 头部工具栏icon颜色
@@ -121,34 +72,24 @@
   // 头部工具栏更多more图标hover颜色
   --ti-lowcode-toolbar-more-hover-color: var(--te-common-icon-secondary);
 
-  // 头部工具栏面包屑字体颜色
-  --ti-lowcode-toolbar-breadcrumb-color: var(--ti-lowcode-base-gray-60);
-  // 头部工具栏画布大小文本hover背景色 && 头部弹框背景色 && context-menu 背景色 && 大纲树节点hover背景色 && 日期组件背景色
-  --ti-lowcode-toolbar-view-hover-bg: #e9e9e9;
   // 头部工具栏i18n国际化字体颜色
   --ti-lowcode-toolbar-i18n-color: red;
   // 应用发布弹窗图标颜色
-  --ti-lowcode-toolbar-publish-icon-color: var(--ti-lowcode-common-primary-text-color);
+  --ti-lowcode-toolbar-publish-icon-color: var(--te-common-text-primary);
   // 头部左侧logo颜色
   --ti-lowcode-logo-color: #8a8e99;
   // 头部左侧logo颜色
   --ti-lowcode-logo-active-color: rgba(0, 0, 0, 0.5);
   // 中间画布边框色
   --ti-lowcode-canvas-border-color: #999;
-  // 右侧属性面板tab页签背景色
-  --ti-lowcode-tabs-bg: #ebebeb;
   // 右侧属性面板tab页签边框色
-  --ti-lowcode-tabs-border-color: #ddd;
+  --ti-lowcode-tabs-border-color: var(--te-common-border-default);
   // 右侧属性面板tab页签激活状态背景色
   --ti-lowcode-tabs-active-bg: #f3f3f3;
-  // 右侧属性面板折叠面板展开内容边框色
-  --ti-lowcode-collapse-active-border-color: #333;
-  // 中间画布外框容器背景色
-  --ti-lowcode-canvas-wrap-bg: #e5e5e5;
   // 中间画布拖拽宽度按钮背景色
   --ti-lowcode-canvas-handle-bg: red;
   // 中间画布拖拽宽度按钮背景色
-  --ti-lowcode-canvas-handle-hover-bg: #5e7ce0;
+  --ti-lowcode-canvas-handle-hover-bg: var(--te-common-bg-primary-checked);
   // 中间画布底部面包屑背景色
   --ti-lowcode-breadcrumb-bg: #fff;
   // 中间画布底部面包屑字体颜色
@@ -170,28 +111,10 @@
 
   // collapse 折叠面板激活后字体颜色
   --ti-lowcode-collapse-active-color: #252b3a;
-  // input 框背景色
-  --ti-lowcode-input-bg: #fff;
-  // switch 圆点背景色
-  --ti-lowcode-switch-after-bg: #fff;
-  // switch 圆点 hover 背景色
-  --ti-lowcode-switch-after-hover-bg: #f5f5f5;
-  // switch 圆点 checked 背景色
-  --ti-lowcode-switch-after-checked-bg: #fff;
 
   // -----下拉框相关主题配置-----
-  // 下拉框聚焦时边框颜色
-  --ti-lowcode-select-focus-border-color: var(--ti-lowcode-base-default-button-border-hover-color);
-  // 下拉框选中标签字体颜色
-  --ti-lowcode-select-tags-text-color: var(--ti-lowcode-base-text-color-3);
-  // 下拉框选中标签背景颜色
-  --ti-lowcode-select-tags-bg-color: #5959591a;
-  // 下拉框suffix图标悬浮颜色
-  --ti-lowcode-select-suffix-icon-color-hover: var(--ti-lowcode-base-text-color);
-  // 组件icon颜色
-  --ti-lowcode-component-icon-color: #8d8d8d;
   // 左侧插件激活背景色
-  --ti-lowcode-left-panel-active-bg: #f2f2f2;
+  --ti-lowcode-left-panel-active-bg: var(--te-base-blue-20);
   // 左侧插件激活边框色
   --ti-lowcode-left-panel-active-border-color: #999;
   // 左侧tabs按钮边框色
@@ -200,15 +123,9 @@
   // radio 按钮组激活背景色
   --ti-lowcode-radio-button-active-bg: #9d9d9d;
   // grid 布局设置按钮字体颜色
-  --ti-lowcode-grid-edit-color: #252b3a;
+  --ti-lowcode-grid-edit-color: var(--te-common-text-primary);
   // grid 布局设置按钮背景色
-  --ti-lowcode-grid-edit-bg: #fff;
-  // tooltip字体颜色
-  --ti-lowcode-tooltip-text-color: var(--ti-lowcode-base-text-color);
-  // tooltip背景颜色
-  --ti-lowcode-tooltip-bg-color: var(--ti-lowcode-base-bg-5);
-  // tooltip错误提示背景颜色
-  --ti-lowcode-tooltip-error-bg-color: var(--ti-lowcode-base-bg-5);
+  --ti-lowcode-grid-edit-bg: var(--te-common-bg-default);
 
   // Fit 字体颜色
   --ti-lowcode-fit-label-color: #252b3a;
@@ -223,8 +140,8 @@
   // main menu 背景色
   --ti-lowcode-main-menu-bg: #fff;
   // main menu hover 背景色
-  --ti-lowcode-main-menu-item-hover-bg: var(--ti-lowcode-common-primary-color);
-  --ti-lowcode-main-menu-item-hover-color: var(--ti-lowcode-common-text-color-3);
+  --ti-lowcode-main-menu-item-hover-bg: var(--te-common-bg-primary-checked);
+  --ti-lowcode-main-menu-item-hover-color: var(--te-common-text-dark-inverse);
   // spacing svg 图标上下颜色
   --ti-lowcode-spacing-tb-color: #d1d1d1;
   // spacing svg 图标上下hover颜色
@@ -270,117 +187,34 @@
   --ti-lowcode-breadcrumb-hover-bg: #fff;
   // 弹框中tip提示边框颜色
   --ti-lowcode-dialog-tip-border-color: #575d6c;
-  // 弹框字体颜色 && 左侧面板 title 字体颜色
-  --ti-lowcode-dialog-font-color: #333;
   // 输入框icon图标颜色
   --ti-lowcode-input-icon-color: #737373;
-  // 弹框字体颜色 && 图标颜色 && 输入框 suffix 字体颜色
-  --ti-lowcode-text-color: #6a6a6a;
   // 右侧optionitem的边框色
-  --ti-lowcode-optionitem-border-color: #9f9f9f;
+  --ti-lowcode-optionitem-border-color: var(--te-common-border-default);
   // 右侧optionitem的背景色
-  --ti-lowcode-optionitem-background-color: #e5e5e5;
-  //tootip里的input框字体颜色
-  --ti-lowcode-tootip-input-color: #fff;
-  //tootip里的input背景颜色
-  --ti-lowcode-tootip-input-background-color: #363636;
-  //tootip里的input框边框颜色
-  --ti-lowcode-tootip-input-border-color: #b9b9b9;
-  //tootip里的input框箭头颜色
-  --ti-lowcode-tootip-arrow-border-color: #404040;
-  // dialogBox弹框示例框边框色
-  --ti-lowcode-dialog-demo-border-color: #5e5e5e;
+  --ti-lowcode-optionitem-background-color: var(--te-common-bg-default);
   // 关闭 icon 图标hover背景色 && 输入框后置文本hover背景色
-  --ti-lowcode-icon-hover-bg: rgba(255, 255, 255, 0.1);
-  // 说明提示框警告颜色
-  --ti-lowcode-description-warning-color: #facb4b;
-  // 说明提示框错误颜色
-  --ti-lowcode-description-error-color: #ff0000;
-  // switch checked状态边框色
-  --ti-lowcode-switch-checked-border-color: var(--ti-lowcode-common-primary-color);
-  // 文本链接颜色
-  --ti-lowcode-text-link-color: #6bb0ff;
+  --ti-lowcode-icon-hover-bg: rgba(255, 255, 255, 0.1); // 需要确认
   // 大纲树node节点选中背景色
-  --ti-lowcode-node-current-bg: var(--ti-lowcode-common-primary-color);
-  // 大纲树node节点不可拖拽背景色 && 表单校验错误边框色
-  --ti-lowcode-node-nodrag-bg: #ea384c;
-  // 成功状态按钮边框色
-  --ti-lowcode-success-border-color: #2ad986;
-  // 错误提示颜色
-  --ti-lowcode-error-tip-color: var(--ti-lowcode-base-error-color);
-  // 画布拖拽元素背景色
-  --ti-lowcode-drag-ghost-bg: #888;
-  // 画布拖拽位置线背景色
-  --ti-lowcode-ghost-line-bg: #ffb100;
+  --ti-lowcode-node-current-bg: var(--te-common-bg-primary-checked);
   // 描述颜色
-  --ti-lowcode-description-color: var(--ti-lowcode-common-text-color-4);
-  // 更多折叠面板头部hover背景色
-  --ti-lowcode-more-collapse-header-hover-color: #afafaf;
+  --ti-lowcode-description-color: var(--te-base-green-40);
   // 绑定时icon图标颜色
-  --ti-lowcode-icon-bind-color: #006cff;
-  // 创建字体颜色
-  --ti-lowcode-create-color: #575d6c;
-  // 删除按钮hover背景色 && 表单校验错误背景色
-  --ti-lowcode-delete-button-hover-bg: #c92c3f;
-  // input框focus 获焦时边框颜色
-  --ti-lowcode-input-focus-border-color: var(--ti-lowcode-base-default-button-border-hover-color);
-  // 次要描述字体颜色 && 面包屑label 字体颜色
-  --ti-lowcode-description-minor-color: #ababab;
+  --ti-lowcode-icon-bind-color: var(--te-common-text-checked);
   // 样式设置 label 字体颜色
   --ti-lowcode-style-setting-label-color: var(--te-common-bg-primary-checked);
   // 样式设置 label 背景颜色
-  --ti-lowcode-style-setting-label-bg: var(--te-base-blue-25);
-  // 多人协作item项hover背景色
-  --ti-lowcode-user-item-hover-bg: #f3f3f5;
-  // 多人协作人员头像背景色
-  --ti-lowcode-user-header-bg: #919191;
-  // 工具栏提示框字体颜色
-  --ti-lowcode-toolbar-popover-color: #363636;
-  // 工具栏 media 提示框字体颜色
-  --ti-lowcode-media-popover-color: var(--ti-lowcode-base-gray-60);
+  --ti-lowcode-style-setting-label-bg: var(--te-base-blue-140);
   // 工具栏 media 提示框标题字体颜色
-  --ti-lowcode-media-popover-title-color: #191919;
+  --ti-lowcode-media-popover-title-color: var(--te-common-text-primary);
   // 工具栏icon禁用颜色
-  --ti-lowcode-disabled-color: #c2c2c2;
-  // 状态管理详情收缩摩纳哥编辑器icon颜色
-  --ti-lowcode-state-management-screen-icon-color: #404040;
-  // 状态管理搜索无结果显示颜色
-  --ti-lowcode-state-management-query-color: #404040;
+  --ti-lowcode-disabled-color: var(--te-common-text-disabled);
   // 状态管理代码编辑器边框颜色
-  --ti-lowcode-state-management-monaco-editor-border-color: var(--ti-lowcode-base-gray-40);
-
-  // Popover提示框
-  --ti-lowcode-popover-color: var(--ti-lowcode-base-text-color);
-  // popover 弹框背景色
-  --ti-lowcode-popover-bg-color: #fff;
-  // 自定义类名lowcode弹框背景色
-  --ti-lowcode-custom-popover-bg-color: #fff;
-  // 自定义类名lowcode弹框字体颜色
-  --ti-lowcode-custom-popover-text-color: #191919;
-  // 自定义类名lowcode弹框边框颜色
-  --ti-lowcode-custom-popover-border-color: #fff;
+  --ti-lowcode-state-management-monaco-editor-border-color: var(--te-common-border-hover);
 
-  // 滚动条thumb颜色
-  --ti-lowcode-scrollbar-thumb-background-color: #e7e8e9;
-  // 可点击交互的文字颜色
-  --ti-lowcode-common-interaction-text-color: #5e7ce0;
   // 数字输入框组件下拉列表文字颜色
-  --ti-lowcode-numeric-unit-text-color: var(--ti-lowcode-text-color);
-
-  //左侧插件栏hover背景色
-  --ti-plugins-hover-bg-color: #fff;
-  //左侧插件栏hover边框色
-  --ti-plugins-hover-border-color: #9e9e9e;
-  //左侧插件栏hover文字色
-  --ti-plugins-hover-text-color: #4d4d4d;
-  // 表格行间背景色
-  --ti-lowcode-new-table-row-sepline-background: #f0f0f0;
+  --ti-lowcode-numeric-unit-text-color: var(--te-common-text-primary);
 
   // 查看指引视频
-  --ti-lowcode-block-video-tip-color: var(--ti-lowcode-base-primary-color-2);
-
-  // 右侧optionitem的边框色
-  --ti-lowcode-optionitem-border-color: rgba(0, 0, 0, 0.08);
-  // 右侧optionitem的背景色
-  --ti-lowcode-optionitem-background-color: #fff;
+  --ti-lowcode-block-video-tip-color: var(--te-common-text-link);
 }