diff --git a/packages/designer/src/builtin-simulator/bem-tools/borders.less b/packages/designer/src/builtin-simulator/bem-tools/borders.less
index 2cdc9fb40..43fba6a2b 100644
--- a/packages/designer/src/builtin-simulator/bem-tools/borders.less
+++ b/packages/designer/src/builtin-simulator/bem-tools/borders.less
@@ -17,7 +17,7 @@
   }
   & > &-status {
     margin-left: 5px;
-    color: #3c3c3c;
+    color: var(--color-text, #3c3c3c);
     transform: translateY(-100%);
     font-weight: lighter;
   }
@@ -46,7 +46,7 @@
     opacity: 1;
     max-height: 100%;
     overflow: hidden;
-    color: white;
+    color: var(--color-icon-reverse, white);
     &:hover {
       background: var(--color-brand-light, #006cff);
     }
@@ -56,8 +56,8 @@
     display: inline-block;
     width: 8px;
     height: 8px;
-    border: 1px solid #197aff;
-    background: #fff;
+    border: 1px solid var(--color-brand, #197aff);
+    background: var(--color-block-background-normal, #fff);
     pointer-events: auto;
     z-index: 2;
   }
@@ -73,11 +73,9 @@
     &:after {
       content: "";
       display: block;
-      border: 1px solid #197aff;
-      background: #fff;
-      // background: #738397;
+      border: 1px solid var(--color-brand, #197aff);
+      background: var(--color-block-background-normal, #fff);
       border-radius: 2px;
-      // animation: flashing 1.5s infinite linear;
     }
 
     &.e,
@@ -85,7 +83,6 @@
       cursor: ew-resize;
       &:after {
         width: 4px;
-        // height: calc(100% - 20px);
         min-height: 50%;
       }
     }
@@ -94,62 +91,24 @@
     &.s {
       cursor: ns-resize;
       &:after {
-        // width: calc(100% - 20px);
         min-width: 50%;
         height: 4px;
       }
     }
   }
 
-  // &&-hovering {
   &&-detecting {
     z-index: 1;
     border-style: dashed;
-    background: rgba(0,121,242,.04);
-
-    &.x-loop {
-      border-color: rgba(138, 93, 226, 0.8);
-      background: rgba(138, 93, 226, 0.04);
-
-      >.@{scope}-title {
-        color: rgba(138, 93, 226, 1.0);
-      }
-    }
-
-    &.x-condition {
-      border-color: rgba(255, 99, 8, 0.8);
-      background: rgba(255, 99, 8, 0.04);
-      >.@{scope}-title {
-        color: rgb(255, 99, 8);
-      }
-    }
+    background: var(--color-block-background-light, rgba(0,121,242,.04));
   }
 
   &&-selecting {
     z-index: 2;
     border-width: 2px;
 
-    &.x-loop {
-      border-color: rgba(147, 112, 219, 1.0);
-      background: rgba(147, 112, 219, 0.04);
-
-      >@{scope}-title {
-        color: rgba(147, 112, 219, 1.0);
-      }
-      &.highlight {
-        background: transparent;
-      }
-    }
-
-    &.x-condition {
-      border-color: rgb(255, 99, 8);
-      >@{scope}-title {
-        color: rgb(255, 99, 8);
-      }
-    }
-
     &.dragging {
-      background: rgba(182, 178, 178, 0.8);
+      background: var(--color-layer-mask-background, rgba(182, 178, 178, 0.8));
       border: none;
     }
   }
diff --git a/packages/designer/src/builtin-simulator/bem-tools/insertion.less b/packages/designer/src/builtin-simulator/bem-tools/insertion.less
index 770d3893c..c51e73106 100644
--- a/packages/designer/src/builtin-simulator/bem-tools/insertion.less
+++ b/packages/designer/src/builtin-simulator/bem-tools/insertion.less
@@ -23,6 +23,6 @@
   }
 
   &.invalid {
-    background-color: red;
+    background-color: var(--color-function-error, red);
   }
 }
diff --git a/packages/designer/src/builtin-simulator/host.less b/packages/designer/src/builtin-simulator/host.less
index 5e230c400..7130c4297 100644
--- a/packages/designer/src/builtin-simulator/host.less
+++ b/packages/designer/src/builtin-simulator/host.less
@@ -31,7 +31,7 @@
     max-height: calc(100% - 32px);
     max-width: calc(100% - 32px);
     transform: translateX(-50%);
-    box-shadow: 0 2px 10px 0 rgba(31,56,88,.15);
+    box-shadow: 0 2px 10px 0 var(--color-block-background-shallow, rgba(31,56,88,.15));
   }
 
   &-device-iphonex { // 增加默认的小程序的壳
@@ -44,7 +44,7 @@
     background: url(https://img.alicdn.com/tfs/TB1b4DHilFR4u4jSZFPXXanzFXa-750-1574.png) no-repeat top;
     background-size: 375px 812px;
     border-radius: 44px;
-    box-shadow: rgba(0, 0, 0, 0.1) 0 36px 42px;
+    box-shadow: var(--color-block-background-shallow, rgba(0, 0, 0, 0.1)) 0 36px 42px;
     .@{scope}-canvas-viewport {
       width: auto;
       top: 50px;
@@ -78,7 +78,7 @@
     bottom: 16px;
     left: 16px;
     width: auto;
-    box-shadow: 0 1px 4px 0 rgba(31, 50, 88, 0.125);
+    box-shadow: 0 1px 4px 0 var(--color-block-background-shallow, rgba(31, 50, 88, 0.125));
   }
 
   &-content {
diff --git a/packages/designer/src/builtin-simulator/node-selector/index.less b/packages/designer/src/builtin-simulator/node-selector/index.less
index c0335734e..01552a251 100644
--- a/packages/designer/src/builtin-simulator/node-selector/index.less
+++ b/packages/designer/src/builtin-simulator/node-selector/index.less
@@ -48,7 +48,7 @@
     margin-top: 2px;
     &-content {
       padding-left: 6px;
-      background: #78869a;
+      background: var(--color-layer-tooltip-background, #78869a);
       display: inline-flex;
       border-radius: 3px;
       align-items: center;
diff --git a/packages/designer/src/designer/drag-ghost/ghost.less b/packages/designer/src/designer/drag-ghost/ghost.less
index 7ab61b41d..1d9c03552 100644
--- a/packages/designer/src/designer/drag-ghost/ghost.less
+++ b/packages/designer/src/designer/drag-ghost/ghost.less
@@ -7,8 +7,8 @@
   flex-direction: column;
   align-items: center;
   pointer-events: none;
-  background-color: rgba(0, 0, 0, 0.4);
-  box-shadow: 0 0 6px grey;
+  background-color: var(--color-block-background-deep-dark, rgba(0, 0, 0, 0.4));
+  box-shadow: 0 0 6px var(--color-block-background-shallow, grey);
   transform: translate(-10%, -50%);
   .lc-ghost {
     .lc-ghost-title {
diff --git a/packages/designer/src/less-variables.less b/packages/designer/src/less-variables.less
index c44fc196e..017e432ce 100644
--- a/packages/designer/src/less-variables.less
+++ b/packages/designer/src/less-variables.less
@@ -99,19 +99,19 @@
 @brand-link-hover: #2e76a6;
 
 // F1-1-7 A10
-@brand-danger-alpha-7: rgba(240, 70, 49, 0.9);
+@brand-danger-alpha-7: rgba(240, 70, 49, 0.1);
 // F1-1-8 A6
 @brand-danger-alpha-8: rgba(240, 70, 49, 0.8);
 // F2-1-2 A80
 @brand-warning-alpha-2: rgba(250, 189, 14, 0.8);
 // F2-1-7 A10
-@brand-warning-alpha-7: rgba(250, 189, 14, 0.9);
+@brand-warning-alpha-7: rgba(250, 189, 14, 0.1);
 // F3-1-2 A80
 @brand-success-alpha-2: rgba(102, 188, 92, 0.8);
 // F3-1-7 A10
-@brand-success-alpha-7: rgba(102, 188, 92, 0.9);
+@brand-success-alpha-7: rgba(102, 188, 92, 0.1);
 // F4-1-7 A10
-@brand-link-alpha-7: rgba(102, 188, 92, 0.9);
+@brand-link-alpha-7: rgba(102, 188, 92, 0.1);
 
 // 文本色
 @text-primary-color: @dark-alpha-3;
diff --git a/packages/editor-core/src/widgets/tip/style.less b/packages/editor-core/src/widgets/tip/style.less
index 21b60b9b5..aa5327f3d 100644
--- a/packages/editor-core/src/widgets/tip/style.less
+++ b/packages/editor-core/src/widgets/tip/style.less
@@ -156,7 +156,7 @@
   opacity: 0;
   border-radius: 3px;
   padding: 6px 8px;
-  text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
+  text-shadow: 0 -1px var(--color-field-label, rgba(0, 0, 0, 0.3));
   font-size: var(--font-size-text);
   line-height: 14px;
   max-width: 200px;
@@ -178,19 +178,19 @@
     height: 8px;
     &:after {
       border: 6px solid transparent;
-      border-top-color: rgba(0, 0, 0, 0.7);
+      border-top-color: var(--color-layer-tooltip-background, rgba(0, 0, 0, 0.7));
     }
   }
   &.lc-theme-black {
-    background: rgba(0, 0, 0, 0.7);
+    background: var(--color-icon-pane, rgba(0, 0, 0, 0.7));
     .lc-arrow:after {
-      border-top-color: rgba(0, 0, 0, 0.7);
+      border-top-color: var(--color-layer-tooltip-background, rgba(0, 0, 0, 0.7));
     }
   }
   &.lc-theme-green {
-    background: #57a672;
+    background: var(--color-function-success-dark, #57a672);
     .lc-arrow:after {
-      border-top-color: #57a672;
+      border-top-color: var(--color-function-success-dark, #57a672);
     }
   }
   &.lc-visible {
diff --git a/packages/editor-core/src/widgets/title/title.less b/packages/editor-core/src/widgets/title/title.less
index e9d076552..f6747ef47 100644
--- a/packages/editor-core/src/widgets/title/title.less
+++ b/packages/editor-core/src/widgets/title/title.less
@@ -21,7 +21,7 @@
     cursor: help;
     text-decoration-line: underline;
     text-decoration-style: dashed;
-    text-decoration-color: rgba(31, 56, 88, .3);
+    text-decoration-color: var(--color-text-light, rgba(31, 56, 88, .3));
   }
   line-height: initial !important;
   word-break: break-all;
diff --git a/packages/editor-skeleton/src/components/field/fields.tsx b/packages/editor-skeleton/src/components/field/fields.tsx
index b773995e3..21ae93eb2 100644
--- a/packages/editor-skeleton/src/components/field/fields.tsx
+++ b/packages/editor-skeleton/src/components/field/fields.tsx
@@ -203,40 +203,6 @@ export class Field extends Component<FieldProps> {
  */
 function createValueState(/* valueState?: number, onClear?: (e: React.MouseEvent) => void */) {
   return null;
-
-  /*
-  let tip: any = null;
-  let className = 'lc-valuestate';
-  let icon: any = null;
-  if (valueState) {
-    if (valueState < 0) {
-      // multiple value 橘黄色点： tip：多种值，点击清除
-      tip = intlNode('Multiple Value, Click to Clear');
-      className += ' valuestate-multiple';
-      icon = <IconClear size={6} />;
-    } else if (valueState === 10) {
-      // isset  orangered tip: 必填项
-      tip = intlNode('Required');
-      className += ' valuestate-required';
-      onClear = undefined;
-    } else if (valueState > 0) {
-      // isset  蓝点 tip: 已设置值，点击清除
-      tip = intlNode('Setted Value, Click to Clear');
-      className += ' valuestate-isset';
-      icon = <IconClear size={6} />;
-    }
-  } else {
-    onClear = undefined;
-    // unset 占位空间
-  }
-
-  return (
-    <i className={className} onClick={onClear}>
-      {icon}
-      {tip && <Tip>{tip}</Tip>}
-    </i>
-  );
-  */
 }
 
 export interface PopupFieldProps extends FieldProps {
diff --git a/packages/editor-skeleton/src/components/field/index.less b/packages/editor-skeleton/src/components/field/index.less
index 249abef57..8c1facfba 100644
--- a/packages/editor-skeleton/src/components/field/index.less
+++ b/packages/editor-skeleton/src/components/field/index.less
@@ -14,54 +14,6 @@
     .lc-field-title {
       display: flex;
       align-items: center;
-      .lc-valuestate {
-        height: 6px;
-        width: 6px;
-        min-width: 6px;
-        border-radius: 100%;
-        margin-right: 2px;
-        pointer-events: none;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        color: white;
-        > svg {
-          display: none;
-        }
-        &.valuestate-multiple {
-          background-color: rgb(232, 145, 83);
-          pointer-events: auto;
-          &:hover {
-            background-color: rgb(223, 139, 30);
-            cursor: pointer;
-            transform: scale(2);
-            transform-origin: center;
-            > svg {
-              display: block;
-            }
-          }
-        }
-        &.valuestate-isset {
-          background-color: rgba(124, 177, 238, 0.6);
-          pointer-events: auto;
-          &:hover {
-            background-color: rgb(45, 126, 219);
-            cursor: pointer;
-            transform: scale(2);
-            transform-origin: center;
-            > svg {
-              display: block;
-            }
-          }
-        }
-        &.valuestate-required {
-          background-color: rgb(250, 82, 76);
-          pointer-events: auto;
-          &:hover {
-            background-color: rgb(224, 46, 40);
-          }
-        }
-      }
     }
     .lc-field-icon {
       transform-origin: center;
@@ -92,11 +44,7 @@
 
   &.lc-block-field, &.lc-accordion-field, &.lc-entry-field {
     display: block;
-    &:first-child {
-      > .lc-field-head {
-        // border-top: none;
-      }
-    }
+
     > .lc-field-head {
       height: 32px;
       display: flex;
@@ -110,7 +58,7 @@
       user-select: none;
 
       > .lc-field-icon {
-        color: #8f9bb3;
+        color: var(--color-icon-normal, #8f9bb3);
       }
     }
 
@@ -128,10 +76,6 @@
         }
       }
     }
-
-    // + .lc-inline-field {
-    //   border-top: 1px solid var(--color-line-normal);
-    // }
   }
 
   &.lc-entry-field {
@@ -163,15 +107,11 @@
     > .lc-field-head {
       cursor: pointer;
     }
-    
+
     &.lc-field-is-collapsed {
       margin-bottom: 6px;
     }
 
-    // collapsed
-    // &:last-child.lc-field-is-collapsed{
-    //   border-bottom: 1px solid var(--color-line-normal);
-    // }
     &.lc-field-is-collapsed {
       > .lc-field-head .lc-field-icon {
         transform: rotate(180deg);
@@ -180,56 +120,5 @@
         display: none;
       }
     }
-
-    // 邻近的保持上下距离
-    + .lc-field {
-      // margin-top: @y-gap;
-    }
-  }
-
-  // 2rd level reset
-  .lc-field-body {
-    // .lc-inline-field {
-    //   &:first-child {
-    //     padding-top: 0;
-    //   }
-    //   + .lc-accordion-field, +.lc-block-field {
-    //     margin-top: @y-gap;
-    //   }
-    // }
-
-    // .lc-field {
-    //   border-top: none !important;
-    // }
-
-    // .lc-accordion-field, .lc-block-field {
-    //   > .lc-field-head {
-    //     padding-left: @x-gap;
-    //     background: var(--color-block-background-light);
-    //     border-bottom: none;
-    //     border-top: none;
-    //     > .lc-field-icon {
-    //       // margin-right: @x-gap/2;
-    //       margin-right: 0;
-    //     }
-    //   }
-
-    //   > .lc-field-body {
-    //     padding: 8px;
-    //   }
-    // }
-
-    // 3rd level field title width should short
-    // .lc-field-body .lc-inline-field {
-    //   > .lc-field-head {
-    //     width: 50px;
-    //     .lc-title-label {
-    //       width: 50px;
-    //     }
-    //   }
-    // }
-    // >.lc-block-setter {
-    //   flex: 1;
-    // }
   }
 }
diff --git a/packages/editor-skeleton/src/components/settings/style.less b/packages/editor-skeleton/src/components/settings/style.less
index 57a7c9357..4599ed55c 100644
--- a/packages/editor-skeleton/src/components/settings/style.less
+++ b/packages/editor-skeleton/src/components/settings/style.less
@@ -33,14 +33,6 @@
     position: relative;
     margin-bottom: 4px;
     position: absolute;
-
-    .lc-setting-stage-back-icon {
-      position: absolute;
-      left: 8px;
-      top: 8px;
-      color: #8f9bb3;
-      cursor: pointer;
-    }
   }
 
   .lc-settings-notice {
diff --git a/packages/editor-skeleton/src/layouts/theme.less b/packages/editor-skeleton/src/layouts/theme.less
index 53afb6932..13fc19c84 100644
--- a/packages/editor-skeleton/src/layouts/theme.less
+++ b/packages/editor-skeleton/src/layouts/theme.less
@@ -16,6 +16,7 @@
   --color-icon-hover: @normal-alpha-3;
   --color-icon-active: @brand-color-1;
   --color-icon-reverse: @white-alpha-1;
+  --color-icon-disabled: @normal-alpha-6;
   --color-icon-pane: @dark-alpha-3;
 
   --color-line-normal: @normal-alpha-7;
@@ -27,6 +28,7 @@
   --color-text-light: lighten(@dark-alpha-3, 10%);
   --color-text-reverse: @white-alpha-2;
   --color-text-regular: @normal-alpha-2;
+  --color-text-disabled: @gray-light;
 
   --color-field-label: @dark-alpha-4;
   --color-field-text: @dark-alpha-3;
@@ -48,6 +50,8 @@
   --color-function-error: @brand-danger;
   --color-function-error-dark: darken(@brand-danger, 10%);
   --color-function-error-light: lighten(@brand-danger, 10%);
+  --color-function-purple: rgb(144, 94, 190);
+  --color-function-brown: #7b605b;
 
   --color-pane-background: @white-alpha-1;
   --color-block-background-normal: @white-alpha-1;
@@ -55,6 +59,10 @@
   --color-block-background-shallow: @normal-alpha-8;
   --color-block-background-dark: @normal-alpha-7;
   --color-block-background-disabled: @normal-alpha-6;
+  --color-block-background-active: @brand-color-1-7;
+  --color-block-background-warning: @brand-warning-alpha-7;
+  --color-block-background-error: @brand-danger-alpha-7;
+  --color-block-background-success: @brand-success-alpha-7;
   --color-block-background-deep-dark: @normal-5;
   --color-layer-mask-background: @dark-alpha-7;
   --color-layer-tooltip-background: rgba(44,47,51,0.8);
diff --git a/packages/editor-skeleton/src/layouts/workbench.less b/packages/editor-skeleton/src/layouts/workbench.less
index 38cbcfae0..58123ea46 100644
--- a/packages/editor-skeleton/src/layouts/workbench.less
+++ b/packages/editor-skeleton/src/layouts/workbench.less
@@ -60,7 +60,7 @@ body {
 
     .lc-help-tip {
       margin-left: 4px;
-      color: rgba(0, 0, 0, 0.4);
+      color: var(--color-icon-normal, rgba(0, 0, 0, 0.4));
       cursor: pointer;
     }
   }
@@ -68,7 +68,7 @@ body {
     height: 48px;
     font-size: 16px;
     padding: 0 15px;
-    color: #0f1726;
+    color: var(--color-title, #0f1726);
     font-weight: bold;
   }
 
@@ -79,39 +79,6 @@ body {
     left: 0;
     right: 0;
     overflow: visible;
-    /*
-    .my-tabs {
-      width: 100%;
-      height: 100%;
-      position: relative;
-      .tabs-title {
-        display: flex;
-        height: var(--pane-title-height);
-        > .tab-title {
-          cursor: pointer;
-          padding: 0;
-          flex: 1;
-          min-width: 0;
-          justify-content: center;
-          border-bottom: 2px solid transparent;
-          &.actived {
-            cursor: default;
-            color: var(--color-text-avtived);
-            border-bottom-color: #3896ee;
-          }
-        }
-      }
-      .tabs-content {
-        position: absolute;
-        top: var(--pane-title-height);
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: calc(100% - var(--pane-title-height));
-        overflow: hidden;
-      }
-    }
-    */
   }
   .lc-outline-tree-container {
     border-top: 1px solid var(--color-line-normal, rgba(31, 56, 88, 0.1));
@@ -234,8 +201,7 @@ body {
       display: flex;
       justify-content: center;
       align-items: center;
-      // background: rgba(31,56,88,0.04);
-      border-bottom: 1px solid #edeff3;
+      border-bottom: 1px solid var(--color-line-normal, #edeff3);
       .lc-tab-title {
         flex: 1;
         height: 32px;
@@ -246,8 +212,8 @@ body {
         cursor: pointer;
         font-size: 12px;
         &.actived {
-          color: #0079f2;
-          border-bottom-color: #0079f2;
+          color: var(--color-brand, #0079f2);
+          border-bottom-color: var(--color-brand, #0079f2);
         }
       }
     }
@@ -293,7 +259,7 @@ body {
       // min-width: var(--dock-fixed-pane-width);
       left: calc(var(--left-area-width) + 1px);
       background-color: var(--color-left-float-pane-background, var(--color-pane-background));
-      box-shadow: 4px 6px 6px 0 rgba(31, 50, 88, 0.08);
+      box-shadow: 4px 6px 6px 0 var(--color-block-background-shallow, rgba(31, 50, 88, 0.08));
       z-index: 820;
       display: none;
       // padding-top: 36px;
@@ -340,7 +306,7 @@ body {
             cursor: pointer;
           }
           &.actived {
-            color: #0079f2;
+            color: var(--color-brand, #0079f2);
           }
           &.disabled {
             opacity: 0.4;
diff --git a/packages/editor-skeleton/src/less-variables.less b/packages/editor-skeleton/src/less-variables.less
index c44fc196e..017e432ce 100644
--- a/packages/editor-skeleton/src/less-variables.less
+++ b/packages/editor-skeleton/src/less-variables.less
@@ -99,19 +99,19 @@
 @brand-link-hover: #2e76a6;
 
 // F1-1-7 A10
-@brand-danger-alpha-7: rgba(240, 70, 49, 0.9);
+@brand-danger-alpha-7: rgba(240, 70, 49, 0.1);
 // F1-1-8 A6
 @brand-danger-alpha-8: rgba(240, 70, 49, 0.8);
 // F2-1-2 A80
 @brand-warning-alpha-2: rgba(250, 189, 14, 0.8);
 // F2-1-7 A10
-@brand-warning-alpha-7: rgba(250, 189, 14, 0.9);
+@brand-warning-alpha-7: rgba(250, 189, 14, 0.1);
 // F3-1-2 A80
 @brand-success-alpha-2: rgba(102, 188, 92, 0.8);
 // F3-1-7 A10
-@brand-success-alpha-7: rgba(102, 188, 92, 0.9);
+@brand-success-alpha-7: rgba(102, 188, 92, 0.1);
 // F4-1-7 A10
-@brand-link-alpha-7: rgba(102, 188, 92, 0.9);
+@brand-link-alpha-7: rgba(102, 188, 92, 0.1);
 
 // 文本色
 @text-primary-color: @dark-alpha-3;
diff --git a/packages/plugin-outline-pane/src/views/style.less b/packages/plugin-outline-pane/src/views/style.less
index 406a5b5da..37f51a170 100644
--- a/packages/plugin-outline-pane/src/views/style.less
+++ b/packages/plugin-outline-pane/src/views/style.less
@@ -54,17 +54,17 @@
 
   .tree-node-modal {
     margin: 5px;
-    border: 1px solid rgba(31, 56, 88, 0.2);
+    border: 1px solid var(--color-field-border, rgba(31, 56, 88, 0.2));
     border-radius: 3px;
-    box-shadow: 0 1px 4px 0 rgba(31, 56, 88, 0.15);
+    box-shadow: 0 1px 4px 0 var(--color-block-background-shallow, rgba(31, 56, 88, 0.15));
 
     .tree-node-modal-title {
       position: relative;
-      background: rgba(31, 56, 88, 0.04);
+      background: var(--color-block-background-light, rgba(31, 56, 88, 0.04));
       padding: 0 10px;
       height: 32px;
       line-height: 32px;
-      border-bottom: 1px solid rgba(31, 56, 88, 0.2);
+      border-bottom: 1px solid var(--color-field-border, rgba(31, 56, 88, 0.2));
 
       .tree-node-modal-title-visible-icon {
         position: absolute;
@@ -89,7 +89,7 @@
       left: 6px;
     }
     .tree-node-modal-radio-active {
-      color: #006cff;
+      color: var(--color-brand, #006cff);
     }
   }
 
@@ -108,7 +108,7 @@
 
   &:hover {
     .tree-node-branches::before {
-      border-left-color: #ddd;
+      border-left-color: var(--color-line-darken, #ddd);
     }
   }
 
@@ -120,20 +120,20 @@
     transform: translateZ(0);
     transition: all 0.2s ease-in-out;
     &.invalid {
-      border-color: red;
-      background-color: rgba(240, 154, 154, 0.719);
+      border-color: var(--color-function-error, red);
+      background-color: var(--color-block-background-error, rgba(240, 154, 154, 0.719));
     }
   }
 
   .condition-group-container {
-    border-bottom: 1px solid #7b605b;
+    border-bottom: 1px solid var(--color-function-brown, #7b605b);
     position: relative;
 
     &:before {
       position: absolute;
       display: block;
       width: 0;
-      border-left: 0.5px solid #7b605b;
+      border-left: 0.5px solid var(--color-function-brown, #7b605b);
       height: 100%;
       top: 0;
       left: 0;
@@ -142,26 +142,26 @@
     }
     > .condition-group-title {
       text-align: center;
-      background-color: #7b605b;
+      background-color: var(--color-function-brown, #7b605b);
       height: 14px;
       > .lc-title {
         font-size: 12px;
         transform: scale(0.8);
         transform-origin: top;
-        color: white;
-        text-shadow: 0 0 2px black;
+        color: var(--color-text-reverse, white);
+        text-shadow: 0 0 2px var(--color-block-background-shallow, black);
         display: block;
       }
     }
   }
   .tree-node-slots {
-    border-bottom: 1px solid rgb(144, 94, 190);
+    border-bottom: 1px solid var(--color-function-purple, rgb(144, 94, 190));
     position: relative;
     &::before {
       position: absolute;
       display: block;
       width: 0;
-      border-left: 0.5px solid rgb(144, 94, 190);
+      border-left: 0.5px solid var(--color-function-purple, rgb(144, 94, 190));
       height: 100%;
       top: 0;
       left: 0;
@@ -170,25 +170,25 @@
     }
     > .tree-node-slots-title {
       text-align: center;
-      background-color: rgb(144, 94, 190);
+      background-color: var(--color-function-purple, rgb(144, 94, 190));
       height: 14px;
       > .lc-title {
         font-size: 12px;
         transform: scale(0.8);
         transform-origin: top;
-        color: white;
+        color: var(--color-text-reverse, white);
         text-shadow: 0 0 2px black;
         display: block;
       }
     }
     &.insertion-at-slots {
       padding-bottom: @treeNodeHeight;
-      border-bottom-color: rgb(182, 55, 55);
+      border-bottom-color: var(--color-function-error-dark, rgb(182, 55, 55));
       > .tree-node-slots-title {
-        background-color: rgb(182, 55, 55);
+        background-color: var(--color-function-error-dark, rgb(182, 55, 55));
       }
       &::before {
-        border-left-color: rgb(182, 55, 55);
+        border-left-color: var(--color-function-error-dark, rgb(182, 55, 55));
       }
     }
   }
@@ -326,13 +326,13 @@
         align-items: center;
         line-height: 0;
         &.cond {
-          color: rgb(179, 52, 6);
+          color: var(--color-function-error, rgb(179, 52, 6));
         }
         &.loop {
-          color: rgb(103, 187, 187);
+          color: var(--color-function-success, rgb(103, 187, 187));
         }
         &.slot {
-          color: rgb(211, 90, 211);
+          color: var(--color-function-purple, rgb(211, 90, 211));
         }
       }
     }
@@ -366,7 +366,7 @@
 
     &.hidden {
       .tree-node-title-label {
-        color: #9b9b9b;
+        color: var(--color-text-disabled, #9b9b9b);
       }
       & > .tree-node-title > .tree-node-hide-btn {
         opacity: 0.8;
diff --git a/packages/utils/src/create-icon.tsx b/packages/utils/src/create-icon.tsx
index 0f2500529..0a5d6c1ff 100644
--- a/packages/utils/src/create-icon.tsx
+++ b/packages/utils/src/create-icon.tsx
@@ -18,7 +18,11 @@ export function createIcon(
   }
   if (typeof icon === 'string') {
     if (URL_RE.test(icon)) {
-      return <img src={icon} {...props} />;
+      return createElement('img', {
+        src: icon,
+        class: props?.className,
+        ...props,
+      });
     }
     return <Icon type={icon} {...props} />;
   }
diff --git a/packages/workspace/src/less-variables.less b/packages/workspace/src/less-variables.less
index c44fc196e..017e432ce 100644
--- a/packages/workspace/src/less-variables.less
+++ b/packages/workspace/src/less-variables.less
@@ -99,19 +99,19 @@
 @brand-link-hover: #2e76a6;
 
 // F1-1-7 A10
-@brand-danger-alpha-7: rgba(240, 70, 49, 0.9);
+@brand-danger-alpha-7: rgba(240, 70, 49, 0.1);
 // F1-1-8 A6
 @brand-danger-alpha-8: rgba(240, 70, 49, 0.8);
 // F2-1-2 A80
 @brand-warning-alpha-2: rgba(250, 189, 14, 0.8);
 // F2-1-7 A10
-@brand-warning-alpha-7: rgba(250, 189, 14, 0.9);
+@brand-warning-alpha-7: rgba(250, 189, 14, 0.1);
 // F3-1-2 A80
 @brand-success-alpha-2: rgba(102, 188, 92, 0.8);
 // F3-1-7 A10
-@brand-success-alpha-7: rgba(102, 188, 92, 0.9);
+@brand-success-alpha-7: rgba(102, 188, 92, 0.1);
 // F4-1-7 A10
-@brand-link-alpha-7: rgba(102, 188, 92, 0.9);
+@brand-link-alpha-7: rgba(102, 188, 92, 0.1);
 
 // 文本色
 @text-primary-color: @dark-alpha-3;