diff --git a/bi/base.css b/bi/base.css
index 62a81ec82a..f423941b21 100644
--- a/bi/base.css
+++ b/bi/base.css
@@ -131,7 +131,12 @@
   cursor: text;
   width: 100%;
   height: 100%;
-  color: black;
+  color: #1a1a1a;
+  background-color: #ffffff;
+}
+.bi-theme-dark .CodeMirror {
+  color: #ffffff;
+  background-color: #242640;
 }
 /* PADDING */
 .CodeMirror-lines {
@@ -168,7 +173,10 @@
 }
 /* CURSOR */
 .CodeMirror div.CodeMirror-cursor {
-  border-left: 1px solid black;
+  border-left: 1px solid #1a1a1a;
+}
+.bi-theme-dark .CodeMirror div.CodeMirror-cursor {
+  border-left: 1px solid #ffffff;
 }
 /* Shown when moving in bi-directional text */
 .CodeMirror div.CodeMirror-secondarycursor {
@@ -307,7 +315,7 @@
 }
 .cm-s-default span[class*="fieldName"] {
   color: white;
-  padding: 1px ;
+  padding: 1px;
   margin: 1px 0px;
   background: #3f8ce8;
 }
@@ -359,7 +367,6 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
 .CodeMirror {
   position: relative;
   overflow: hidden;
-  background: white;
 }
 .CodeMirror-scroll {
   overflow: scroll !important;
@@ -627,15 +634,10 @@ li.CodeMirror-hint-active {
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
 .bi-panel {
-  border: 1px solid #a3d6e8;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
 }
-.bi-panel .panel-title {
-  background-color: #d8f2fd;
-  border-bottom: 1px solid #a3d6e8;
-}
 .bi-panel .panel-title .panel-title-text {
   cursor: text;
   font-size: 14px;
@@ -697,7 +699,7 @@ li.CodeMirror-hint-active {
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
-  border: 1px solid #3f8ce8;
+  border: 1px solid #178cdf;
   background-color: #3f8ce8;
   text-align: center;
   vertical-align: middle;
@@ -849,9 +851,6 @@ li.CodeMirror-hint-active {
 .bi-textarea-editor .textarea-editor-content {
   border: none;
 }
-.bi-textarea-editor .textarea-editor-content.textarea-editor-focus {
-  border: 1px solid #3f8ce8;
-}
 /****添加计算宽度的--运算符直接需要space****/
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
diff --git a/bi/base.js b/bi/base.js
index 418b26bc47..aea1b5f036 100644
--- a/bi/base.js
+++ b/bi/base.js
@@ -496,11 +496,15 @@ BI.Text = BI.inherit(BI.Single, {
             type: "bi.layout",
             cls: "bi-text"
         });
-        this.text.element.appendTo(this.element);
+        BI.createWidget({
+            type: "bi.default",
+            element: this,
+            items: [this.text]
+        });
         if (BI.isKey(o.text)) {
-            this.text.element.text(o.text);
+            this.setText(o.text);
         } else if (BI.isKey(o.value)) {
-            this.text.element.text(o.value);
+            this.setText(o.value);
         }
         if (o.hgap + o.lgap > 0) {
             this.text.element.css({
@@ -562,7 +566,7 @@ BI.Text = BI.inherit(BI.Single, {
     setValue: function (text) {
         BI.Text.superclass.setValue.apply(this, arguments);
         if (!this.isReadOnly()) {
-            this.text.element.text(text);
+            this.setText(text);
         }
     },
 
@@ -1061,7 +1065,7 @@ BI.ButtonGroup = BI.inherit(BI.Widget, {
     //如果是一个简单的layout
     _isSimpleLayout: function () {
         var o = this.options;
-        return o.layouts.length === 1 && !BI.isArray(o.layouts.items[0])
+        return o.layouts.length === 1 && !BI.isArray(o.items[0])
     },
 
     doBehavior: function () {
@@ -17838,7 +17842,7 @@ BI.TextAreaEditor = BI.inherit(BI.Single, {
             tagName: "textarea",
             width: "100%",
             height: "100%",
-            cls: "textarea-editor-content display-block"
+            cls: "textarea-editor-content display-block bi-card"
         });
         this.content.element.css({"resize": "none"});
         BI.createWidget({
diff --git a/bi/case.js b/bi/case.js
index 15d30f687b..12dde9b59c 100644
--- a/bi/case.js
+++ b/bi/case.js
@@ -7250,7 +7250,7 @@ BI.shortcut("bi.list_pane", BI.ListPane);/**
 BI.Panel = BI.inherit(BI.Widget,{
     _defaultConfig : function(){
         return BI.extend(BI.Panel.superclass._defaultConfig.apply(this,arguments),{
-            baseCls: "bi-panel",
+            baseCls: "bi-panel bi-border",
             title:"",
             titleButtons:[],
             el:{},
@@ -7301,7 +7301,7 @@ BI.Panel = BI.inherit(BI.Widget,{
         return {
             el: {
                 type: "bi.left_right_vertical_adapt",
-                cls: "panel-title bi-tips",
+                cls: "panel-title bi-tips bi-border-bottom bi-background",
                 height: 30,
                 items: {
                     left: [this.text],
diff --git a/bi/core.css b/bi/core.css
index 94009bb681..5044d7d898 100644
--- a/bi/core.css
+++ b/bi/core.css
@@ -3000,11 +3000,14 @@
   color: #666666;
 }
 .bi-resizer {
-  background: #d8f3fe;
-  opacity: 0.8;
-  filter: alpha(opacity=80);
+  background: #1a1a1a;
+  opacity: 0.2;
+  filter: alpha(opacity=20);
   z-index: 1000000000;
 }
+.bi-theme-dark .bi-resizer {
+  background: #ffffff;
+}
 .bi-z-index-mask {
   background-color: #1a1a1a;
   opacity: 0.5;
diff --git a/bi/widget.css b/bi/widget.css
index 320e2cd579..df905928dc 100644
--- a/bi/widget.css
+++ b/bi/widget.css
@@ -1,11 +1,6 @@
 /****添加计算宽度的--运算符直接需要space****/
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
-.bi-arrangement-block {
-  background: #e85050;
-  opacity: 0.8;
-  filter: alpha(opacity=80);
-}
 /****添加计算宽度的--运算符直接需要space****/
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
diff --git a/bi/widget.js b/bi/widget.js
index d465a423f8..bfce10a762 100644
--- a/bi/widget.js
+++ b/bi/widget.js
@@ -921,7 +921,7 @@ BI.ArrangementBlock = BI.inherit(BI.Widget, {
 
     _defaultConfig: function () {
         return BI.extend(BI.ArrangementBlock.superclass._defaultConfig.apply(this, arguments), {
-            baseCls: "bi-arrangement-block"
+            baseCls: "bi-arrangement-block bi-resizer"
         });
     },
 
diff --git a/docs/base.css b/docs/base.css
index 62a81ec82a..f423941b21 100644
--- a/docs/base.css
+++ b/docs/base.css
@@ -131,7 +131,12 @@
   cursor: text;
   width: 100%;
   height: 100%;
-  color: black;
+  color: #1a1a1a;
+  background-color: #ffffff;
+}
+.bi-theme-dark .CodeMirror {
+  color: #ffffff;
+  background-color: #242640;
 }
 /* PADDING */
 .CodeMirror-lines {
@@ -168,7 +173,10 @@
 }
 /* CURSOR */
 .CodeMirror div.CodeMirror-cursor {
-  border-left: 1px solid black;
+  border-left: 1px solid #1a1a1a;
+}
+.bi-theme-dark .CodeMirror div.CodeMirror-cursor {
+  border-left: 1px solid #ffffff;
 }
 /* Shown when moving in bi-directional text */
 .CodeMirror div.CodeMirror-secondarycursor {
@@ -307,7 +315,7 @@
 }
 .cm-s-default span[class*="fieldName"] {
   color: white;
-  padding: 1px ;
+  padding: 1px;
   margin: 1px 0px;
   background: #3f8ce8;
 }
@@ -359,7 +367,6 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
 .CodeMirror {
   position: relative;
   overflow: hidden;
-  background: white;
 }
 .CodeMirror-scroll {
   overflow: scroll !important;
@@ -627,15 +634,10 @@ li.CodeMirror-hint-active {
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
 .bi-panel {
-  border: 1px solid #a3d6e8;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
 }
-.bi-panel .panel-title {
-  background-color: #d8f2fd;
-  border-bottom: 1px solid #a3d6e8;
-}
 .bi-panel .panel-title .panel-title-text {
   cursor: text;
   font-size: 14px;
@@ -697,7 +699,7 @@ li.CodeMirror-hint-active {
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
-  border: 1px solid #3f8ce8;
+  border: 1px solid #178cdf;
   background-color: #3f8ce8;
   text-align: center;
   vertical-align: middle;
@@ -849,9 +851,6 @@ li.CodeMirror-hint-active {
 .bi-textarea-editor .textarea-editor-content {
   border: none;
 }
-.bi-textarea-editor .textarea-editor-content.textarea-editor-focus {
-  border: 1px solid #3f8ce8;
-}
 /****添加计算宽度的--运算符直接需要space****/
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
diff --git a/docs/base.js b/docs/base.js
index 418b26bc47..aea1b5f036 100644
--- a/docs/base.js
+++ b/docs/base.js
@@ -496,11 +496,15 @@ BI.Text = BI.inherit(BI.Single, {
             type: "bi.layout",
             cls: "bi-text"
         });
-        this.text.element.appendTo(this.element);
+        BI.createWidget({
+            type: "bi.default",
+            element: this,
+            items: [this.text]
+        });
         if (BI.isKey(o.text)) {
-            this.text.element.text(o.text);
+            this.setText(o.text);
         } else if (BI.isKey(o.value)) {
-            this.text.element.text(o.value);
+            this.setText(o.value);
         }
         if (o.hgap + o.lgap > 0) {
             this.text.element.css({
@@ -562,7 +566,7 @@ BI.Text = BI.inherit(BI.Single, {
     setValue: function (text) {
         BI.Text.superclass.setValue.apply(this, arguments);
         if (!this.isReadOnly()) {
-            this.text.element.text(text);
+            this.setText(text);
         }
     },
 
@@ -1061,7 +1065,7 @@ BI.ButtonGroup = BI.inherit(BI.Widget, {
     //如果是一个简单的layout
     _isSimpleLayout: function () {
         var o = this.options;
-        return o.layouts.length === 1 && !BI.isArray(o.layouts.items[0])
+        return o.layouts.length === 1 && !BI.isArray(o.items[0])
     },
 
     doBehavior: function () {
@@ -17838,7 +17842,7 @@ BI.TextAreaEditor = BI.inherit(BI.Single, {
             tagName: "textarea",
             width: "100%",
             height: "100%",
-            cls: "textarea-editor-content display-block"
+            cls: "textarea-editor-content display-block bi-card"
         });
         this.content.element.css({"resize": "none"});
         BI.createWidget({
diff --git a/docs/case.js b/docs/case.js
index 15d30f687b..12dde9b59c 100644
--- a/docs/case.js
+++ b/docs/case.js
@@ -7250,7 +7250,7 @@ BI.shortcut("bi.list_pane", BI.ListPane);/**
 BI.Panel = BI.inherit(BI.Widget,{
     _defaultConfig : function(){
         return BI.extend(BI.Panel.superclass._defaultConfig.apply(this,arguments),{
-            baseCls: "bi-panel",
+            baseCls: "bi-panel bi-border",
             title:"",
             titleButtons:[],
             el:{},
@@ -7301,7 +7301,7 @@ BI.Panel = BI.inherit(BI.Widget,{
         return {
             el: {
                 type: "bi.left_right_vertical_adapt",
-                cls: "panel-title bi-tips",
+                cls: "panel-title bi-tips bi-border-bottom bi-background",
                 height: 30,
                 items: {
                     left: [this.text],
diff --git a/docs/core.css b/docs/core.css
index 94009bb681..5044d7d898 100644
--- a/docs/core.css
+++ b/docs/core.css
@@ -3000,11 +3000,14 @@
   color: #666666;
 }
 .bi-resizer {
-  background: #d8f3fe;
-  opacity: 0.8;
-  filter: alpha(opacity=80);
+  background: #1a1a1a;
+  opacity: 0.2;
+  filter: alpha(opacity=20);
   z-index: 1000000000;
 }
+.bi-theme-dark .bi-resizer {
+  background: #ffffff;
+}
 .bi-z-index-mask {
   background-color: #1a1a1a;
   opacity: 0.5;
diff --git a/docs/resource.css b/docs/resource.css
index 0d86e5aacb..ef4dd0ada7 100644
--- a/docs/resource.css
+++ b/docs/resource.css
@@ -6424,6 +6424,35 @@ i {
   overflow: hidden;
   background: url("third/farbtastic/marker.png") no-repeat;
 }
+/****添加计算宽度的--运算符直接需要space****/
+/****** common color(常用颜色,可用于普遍场景) *****/
+/**** custom color(自定义颜色,用于特定场景) ****/
+.bi-display-tree .ztree * {
+  color: #999999;
+}
+.bi-display-tree .ztree li span.button.switch.center_open {
+  background-image: url("/icon/tree-vertical-line-3.png");
+}
+.bi-display-tree .ztree li span.button.switch.roots_open {
+  background-image: url("/icon/tree-vertical-line-2.png");
+}
+.bi-display-tree .ztree li span.button.switch.bottom_open {
+  background-image: url("/icon/tree-vertical-line-4.png");
+}
+.bi-display-tree .ztree li a,
+.bi-display-tree .ztree li span {
+  cursor: default !important;
+}
+.bi-display-tree .ztree li a:hover {
+  text-decoration: none;
+}
+.bi-display-tree .ztree li a.curSelectedNode {
+  padding-top: 1px;
+  border: none;
+  background-color: inherit;
+  opacity: 1;
+  filter: alpha(opacity=100);
+}
 /*-------------------------------------
 zTree Style
 
@@ -6715,32 +6744,3 @@ ul.ztree.zTreeDragUL {
 	padding:0;
 	background:none;
 }*/
-/****添加计算宽度的--运算符直接需要space****/
-/****** common color(常用颜色,可用于普遍场景) *****/
-/**** custom color(自定义颜色,用于特定场景) ****/
-.bi-display-tree .ztree * {
-  color: #999999;
-}
-.bi-display-tree .ztree li span.button.switch.center_open {
-  background-image: url("/icon/tree-vertical-line-3.png");
-}
-.bi-display-tree .ztree li span.button.switch.roots_open {
-  background-image: url("/icon/tree-vertical-line-2.png");
-}
-.bi-display-tree .ztree li span.button.switch.bottom_open {
-  background-image: url("/icon/tree-vertical-line-4.png");
-}
-.bi-display-tree .ztree li a,
-.bi-display-tree .ztree li span {
-  cursor: default !important;
-}
-.bi-display-tree .ztree li a:hover {
-  text-decoration: none;
-}
-.bi-display-tree .ztree li a.curSelectedNode {
-  padding-top: 1px;
-  border: none;
-  background-color: inherit;
-  opacity: 1;
-  filter: alpha(opacity=100);
-}
diff --git a/docs/widget.css b/docs/widget.css
index 320e2cd579..df905928dc 100644
--- a/docs/widget.css
+++ b/docs/widget.css
@@ -1,11 +1,6 @@
 /****添加计算宽度的--运算符直接需要space****/
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
-.bi-arrangement-block {
-  background: #e85050;
-  opacity: 0.8;
-  filter: alpha(opacity=80);
-}
 /****添加计算宽度的--运算符直接需要space****/
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
diff --git a/docs/widget.js b/docs/widget.js
index d465a423f8..bfce10a762 100644
--- a/docs/widget.js
+++ b/docs/widget.js
@@ -921,7 +921,7 @@ BI.ArrangementBlock = BI.inherit(BI.Widget, {
 
     _defaultConfig: function () {
         return BI.extend(BI.ArrangementBlock.superclass._defaultConfig.apply(this, arguments), {
-            baseCls: "bi-arrangement-block"
+            baseCls: "bi-arrangement-block bi-resizer"
         });
     },
 
diff --git a/src/base/combination/group.button.js b/src/base/combination/group.button.js
index 22e42c3064..d303feeebd 100644
--- a/src/base/combination/group.button.js
+++ b/src/base/combination/group.button.js
@@ -117,7 +117,7 @@ BI.ButtonGroup = BI.inherit(BI.Widget, {
     //如果是一个简单的layout
     _isSimpleLayout: function () {
         var o = this.options;
-        return o.layouts.length === 1 && !BI.isArray(o.layouts.items[0])
+        return o.layouts.length === 1 && !BI.isArray(o.items[0])
     },
 
     doBehavior: function () {
diff --git a/src/base/single/editor/editor.textarea.js b/src/base/single/editor/editor.textarea.js
index 1c0afb0448..daa12f8a84 100644
--- a/src/base/single/editor/editor.textarea.js
+++ b/src/base/single/editor/editor.textarea.js
@@ -19,7 +19,7 @@ BI.TextAreaEditor = BI.inherit(BI.Single, {
             tagName: "textarea",
             width: "100%",
             height: "100%",
-            cls: "textarea-editor-content display-block"
+            cls: "textarea-editor-content display-block bi-card"
         });
         this.content.element.css({"resize": "none"});
         BI.createWidget({
diff --git a/src/base/single/text.js b/src/base/single/text.js
index aefeed51c2..0781957308 100644
--- a/src/base/single/text.js
+++ b/src/base/single/text.js
@@ -29,11 +29,15 @@ BI.Text = BI.inherit(BI.Single, {
             type: "bi.layout",
             cls: "bi-text"
         });
-        this.text.element.appendTo(this.element);
+        BI.createWidget({
+            type: "bi.default",
+            element: this,
+            items: [this.text]
+        });
         if (BI.isKey(o.text)) {
-            this.text.element.text(o.text);
+            this.setText(o.text);
         } else if (BI.isKey(o.value)) {
-            this.text.element.text(o.value);
+            this.setText(o.value);
         }
         if (o.hgap + o.lgap > 0) {
             this.text.element.css({
@@ -95,7 +99,7 @@ BI.Text = BI.inherit(BI.Single, {
     setValue: function (text) {
         BI.Text.superclass.setValue.apply(this, arguments);
         if (!this.isReadOnly()) {
-            this.text.element.text(text);
+            this.setText(text);
         }
     },
 
diff --git a/src/case/layer/layer.multiselect.js b/src/case/layer/layer.multipopup.js
similarity index 100%
rename from src/case/layer/layer.multiselect.js
rename to src/case/layer/layer.multipopup.js
diff --git a/src/case/layer/panel.js b/src/case/layer/panel.js
index 0cd49ba03a..5e0f751900 100644
--- a/src/case/layer/panel.js
+++ b/src/case/layer/panel.js
@@ -6,7 +6,7 @@
 BI.Panel = BI.inherit(BI.Widget,{
     _defaultConfig : function(){
         return BI.extend(BI.Panel.superclass._defaultConfig.apply(this,arguments),{
-            baseCls: "bi-panel",
+            baseCls: "bi-panel bi-border",
             title:"",
             titleButtons:[],
             el:{},
@@ -57,7 +57,7 @@ BI.Panel = BI.inherit(BI.Widget,{
         return {
             el: {
                 type: "bi.left_right_vertical_adapt",
-                cls: "panel-title bi-tips",
+                cls: "panel-title bi-tips bi-border-bottom bi-background",
                 height: 30,
                 items: {
                     left: [this.text],
diff --git a/src/css/base/formula/codemirror.css b/src/css/base/formula/codemirror.css
index 973249668a..7142bfbe82 100644
--- a/src/css/base/formula/codemirror.css
+++ b/src/css/base/formula/codemirror.css
@@ -8,7 +8,12 @@
   cursor: text;
   width: 100%;
   height: 100%;
-  color: black;
+  color: #1a1a1a;
+  background-color: #ffffff;
+}
+.bi-theme-dark .CodeMirror {
+  color: #ffffff;
+  background-color: #242640;
 }
 /* PADDING */
 .CodeMirror-lines {
@@ -45,7 +50,10 @@
 }
 /* CURSOR */
 .CodeMirror div.CodeMirror-cursor {
-  border-left: 1px solid black;
+  border-left: 1px solid #1a1a1a;
+}
+.bi-theme-dark .CodeMirror div.CodeMirror-cursor {
+  border-left: 1px solid #ffffff;
 }
 /* Shown when moving in bi-directional text */
 .CodeMirror div.CodeMirror-secondarycursor {
@@ -184,7 +192,7 @@
 }
 .cm-s-default span[class*="fieldName"] {
   color: white;
-  padding: 1px ;
+  padding: 1px;
   margin: 1px 0px;
   background: #3f8ce8;
 }
@@ -236,7 +244,6 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
 .CodeMirror {
   position: relative;
   overflow: hidden;
-  background: white;
 }
 .CodeMirror-scroll {
   overflow: scroll !important;
diff --git a/src/css/base/layer/panel.css b/src/css/base/layer/panel.css
index d6f90350f2..a1ef3cc422 100644
--- a/src/css/base/layer/panel.css
+++ b/src/css/base/layer/panel.css
@@ -2,15 +2,10 @@
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
 .bi-panel {
-  border: 1px solid #a3d6e8;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
 }
-.bi-panel .panel-title {
-  background-color: #d8f2fd;
-  border-bottom: 1px solid #a3d6e8;
-}
 .bi-panel .panel-title .panel-title-text {
   cursor: text;
   font-size: 14px;
diff --git a/src/css/base/single/button/button.css b/src/css/base/single/button/button.css
index 5374fceaf0..72c8297eec 100644
--- a/src/css/base/single/button/button.css
+++ b/src/css/base/single/button/button.css
@@ -5,7 +5,7 @@
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
-  border: 1px solid #3f8ce8;
+  border: 1px solid #178cdf;
   background-color: #3f8ce8;
   text-align: center;
   vertical-align: middle;
diff --git a/src/css/base/single/editor/editor.textarea.css b/src/css/base/single/editor/editor.textarea.css
index b1b07e8b6f..13e82616ce 100644
--- a/src/css/base/single/editor/editor.textarea.css
+++ b/src/css/base/single/editor/editor.textarea.css
@@ -12,6 +12,3 @@
 .bi-textarea-editor .textarea-editor-content {
   border: none;
 }
-.bi-textarea-editor .textarea-editor-content.textarea-editor-focus {
-  border: 1px solid #3f8ce8;
-}
diff --git a/src/css/core/utils/common.css b/src/css/core/utils/common.css
index 5fcb59873b..9798047f77 100644
--- a/src/css/core/utils/common.css
+++ b/src/css/core/utils/common.css
@@ -98,11 +98,14 @@
   color: #666666;
 }
 .bi-resizer {
-  background: #d8f3fe;
-  opacity: 0.8;
-  filter: alpha(opacity=80);
+  background: #1a1a1a;
+  opacity: 0.2;
+  filter: alpha(opacity=20);
   z-index: 1000000000;
 }
+.bi-theme-dark .bi-resizer {
+  background: #ffffff;
+}
 .bi-z-index-mask {
   background-color: #1a1a1a;
   opacity: 0.5;
@@ -258,7 +261,7 @@
 .bi-theme-dark .bi-list-item-select:hover,
 .bi-theme-dark .bi-list-item-select.hover {
   color: #3f8ce8;
-  background-color: #eff1f4;
+  background-color: #191b2b;
 }
 .bi-theme-dark .bi-list-item-select:active,
 .bi-theme-dark .bi-list-item-select.active {
@@ -280,3 +283,23 @@
 .bi-theme-dark .bi-list-item-select.disabled:active .bi-high-light {
   color: #666666 !important;
 }
+.bi-list-item-choose:active,
+.bi-list-item-choose.active {
+  color: #ffffff;
+  background-color: #3f8ce8;
+}
+.bi-list-item-choose:active .bi-high-light,
+.bi-list-item-choose.active .bi-high-light {
+  color: #ffffff;
+}
+.bi-list-item-choose.disabled,
+.bi-list-item-choose.disabled:hover,
+.bi-list-item-choose.disabled:active {
+  color: #cccccc !important;
+  background-color: transparent !important;
+}
+.bi-list-item-choose.disabled .bi-high-light,
+.bi-list-item-choose.disabled:hover .bi-high-light,
+.bi-list-item-choose.disabled:active .bi-high-light {
+  color: #cccccc !important;
+}
diff --git a/src/css/resource/widget/display.tree.css b/src/css/resource/third/ztree/display.tree.css
similarity index 100%
rename from src/css/resource/widget/display.tree.css
rename to src/css/resource/third/ztree/display.tree.css
diff --git a/src/css/widget/arrangement/arrangement.block.css b/src/css/widget/arrangement/arrangement.block.css
index 69b801736b..2f6491e13f 100644
--- a/src/css/widget/arrangement/arrangement.block.css
+++ b/src/css/widget/arrangement/arrangement.block.css
@@ -1,8 +1,3 @@
 /****添加计算宽度的--运算符直接需要space****/
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
-.bi-arrangement-block {
-  background: #e85050;
-  opacity: 0.8;
-  filter: alpha(opacity=80);
-}
diff --git a/src/less/base/formula/codemirror.less b/src/less/base/formula/codemirror.less
index 5332431139..7c8fc31175 100644
--- a/src/less/base/formula/codemirror.less
+++ b/src/less/base/formula/codemirror.less
@@ -6,9 +6,17 @@
   /* Set height, width, borders, and global font properties here */
   font-family: monospace;
   cursor: text;
-//  .border-radius(4px);
+  //  .border-radius(4px);
   .size(100%, 100%);
-  color: black;
+  color: @color-bi-text-black;
+  background-color: @color-bi-background-default;
+}
+
+.bi-theme-dark {
+  .CodeMirror {
+    color: @color-bi-text;
+    background-color: @color-bi-background-default-theme-dark;
+  }
 }
 
 /* PADDING */
@@ -16,6 +24,7 @@
 .CodeMirror-lines {
   padding: 4px 0; /* Vertical padding around content */
 }
+
 .CodeMirror pre {
   padding: 0 4px; /* Horizontal padding of content */
 }
@@ -31,7 +40,10 @@
   background-color: #f7f7f7;
   white-space: nowrap;
 }
-.CodeMirror-linenumbers {}
+
+.CodeMirror-linenumbers {
+}
+
 .CodeMirror-linenumber {
   padding: 0 3px 0 5px;
   min-width: 20px;
@@ -40,23 +52,37 @@
   white-space: nowrap;
 }
 
-.CodeMirror-guttermarker { color: black; }
-.CodeMirror-guttermarker-subtle { color: #999; }
+.CodeMirror-guttermarker {
+  color: black;
+}
+
+.CodeMirror-guttermarker-subtle {
+  color: #999;
+}
 
 /* CURSOR */
 
 .CodeMirror div.CodeMirror-cursor {
-  border-left: 1px solid black;
+  border-left: 1px solid @color-bi-border-black;
+}
+
+.bi-theme-dark {
+  .CodeMirror div.CodeMirror-cursor {
+    border-left: 1px solid @color-bi-border-default;
+  }
 }
+
 /* Shown when moving in bi-directional text */
 .CodeMirror div.CodeMirror-secondarycursor {
   border-left: 1px solid silver;
 }
+
 .CodeMirror.cm-fat-cursor div.CodeMirror-cursor {
   width: auto;
   border: 0;
   background: #7e7;
 }
+
 .CodeMirror.cm-fat-cursor div.CodeMirror-cursors {
   z-index: 1;
 }
@@ -68,26 +94,51 @@
   -moz-animation: blink 1.06s steps(1) infinite;
   animation: blink 1.06s steps(1) infinite;
 }
+
 @-moz-keyframes blink {
-  0% { background: #7e7; }
-  50% { background: none; }
-  100% { background: #7e7; }
+  0% {
+    background: #7e7;
+  }
+  50% {
+    background: none;
+  }
+  100% {
+    background: #7e7;
+  }
 }
+
 @-webkit-keyframes blink {
-  0% { background: #7e7; }
-  50% { background: none; }
-  100% { background: #7e7; }
+  0% {
+    background: #7e7;
+  }
+  50% {
+    background: none;
+  }
+  100% {
+    background: #7e7;
+  }
 }
+
 @keyframes blink {
-  0% { background: #7e7; }
-  50% { background: none; }
-  100% { background: #7e7; }
+  0% {
+    background: #7e7;
+  }
+  50% {
+    background: none;
+  }
+  100% {
+    background: #7e7;
+  }
 }
 
 /* Can style cursor different in overwrite (non-insert) mode */
-div.CodeMirror-overwrite div.CodeMirror-cursor {}
+div.CodeMirror-overwrite div.CodeMirror-cursor {
+}
 
-.cm-tab { display: inline-block; text-decoration: inherit; }
+.cm-tab {
+  display: inline-block;
+  text-decoration: inherit;
+}
 
 .CodeMirror-ruler {
   border-left: 1px solid #ccc;
@@ -96,73 +147,164 @@ div.CodeMirror-overwrite div.CodeMirror-cursor {}
 
 /* DEFAULT THEME */
 
-.cm-s-default .cm-header {color: blue;}
-.cm-s-default .cm-quote {color: #090;}
-.cm-negative {color: #d44;}
-.cm-positive {color: #292;}
-.cm-header, .cm-strong {font-weight: bold;}
-.cm-em {font-style: italic;}
-.cm-link {text-decoration: underline;}
-.cm-strikethrough {text-decoration: line-through;}
+.cm-s-default .cm-header {
+  color: blue;
+}
+
+.cm-s-default .cm-quote {
+  color: #090;
+}
+
+.cm-negative {
+  color: #d44;
+}
+
+.cm-positive {
+  color: #292;
+}
+
+.cm-header, .cm-strong {
+  font-weight: bold;
+}
+
+.cm-em {
+  font-style: italic;
+}
+
+.cm-link {
+  text-decoration: underline;
+}
+
+.cm-strikethrough {
+  text-decoration: line-through;
+}
 
 //.cm-s-default .cm-keyword {color: #708;}
-.cm-s-default .cm-atom {color: #219;}
-.cm-s-default .cm-number {color: #164;}
-.cm-s-default .cm-def {color: #00f;}
+.cm-s-default .cm-atom {
+  color: #219;
+}
+
+.cm-s-default .cm-number {
+  color: #164;
+}
+
+.cm-s-default .cm-def {
+  color: #00f;
+}
+
 .cm-s-default .cm-variable,
 .cm-s-default .cm-punctuation,
 .cm-s-default .cm-property,
-.cm-s-default .cm-operator {}
-.cm-s-default .cm-variable-2 {color: #05a;}
-.cm-s-default .cm-variable-3 {color: #085;}
-.cm-s-default .cm-comment {color: #a50;}
-.cm-s-default .cm-string {color: #a11;}
-.cm-s-default .cm-string-2 {color: #f50;}
-.cm-s-default .cm-meta {color: #555;}
-.cm-s-default .cm-qualifier {color: #555;}
-.cm-s-default .cm-builtin {color: #30a;}
-.cm-s-default .cm-bracket {color: #997;}
-.cm-s-default .cm-tag {color: #170;}
-.cm-s-default .cm-attribute {color: #00c;}
-.cm-s-default .cm-hr {color: #999;}
-.cm-s-default .cm-link {color: #00c;}
-.cm-s-default span[class*="fieldName"]{
+.cm-s-default .cm-operator {
+}
+
+.cm-s-default .cm-variable-2 {
+  color: #05a;
+}
+
+.cm-s-default .cm-variable-3 {
+  color: #085;
+}
+
+.cm-s-default .cm-comment {
+  color: #a50;
+}
+
+.cm-s-default .cm-string {
+  color: #a11;
+}
+
+.cm-s-default .cm-string-2 {
+  color: #f50;
+}
+
+.cm-s-default .cm-meta {
+  color: #555;
+}
+
+.cm-s-default .cm-qualifier {
+  color: #555;
+}
+
+.cm-s-default .cm-builtin {
+  color: #30a;
+}
+
+.cm-s-default .cm-bracket {
+  color: #997;
+}
+
+.cm-s-default .cm-tag {
+  color: #170;
+}
+
+.cm-s-default .cm-attribute {
+  color: #00c;
+}
+
+.cm-s-default .cm-hr {
+  color: #999;
+}
+
+.cm-s-default .cm-link {
+  color: #00c;
+}
+
+.cm-s-default span[class*="fieldName"] {
   color: white;
-  padding: 1px ;
+  padding: 1px;
   margin: 1px 0px;
   background: @color-bi-text-highlight;
 
 }
 
-.cm-s-default span[class*="start"]{
+.cm-s-default span[class*="start"] {
   .border-radius(3px 0px 0px 3px);
-  margin-left :3px;
+  margin-left: 3px;
 }
 
-.cm-s-default span[class*="end"]{
+.cm-s-default span[class*="end"] {
   .border-radius(0px 3px 3px 0px);
-  margin-right :3px;
+  margin-right: 3px;
 }
 
-.cm-s-default span[class*="start end"]{
+.cm-s-default span[class*="start end"] {
   .border-radius(3px);
 }
 
-.cm-s-default span[class*="#"]{
+.cm-s-default span[class*="#"] {
   color: @color-bi-text-highlight;
 }
 
-.cm-s-default .cm-error {color: #f00;}
-.cm-invalidchar {color: #f00;}
+.cm-s-default .cm-error {
+  color: #f00;
+}
 
-.CodeMirror-composing { border-bottom: 2px solid; }
+.cm-invalidchar {
+  color: #f00;
+}
+
+.CodeMirror-composing {
+  border-bottom: 2px solid;
+}
 
 /* Default styles for common addons */
 
-div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
-div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
-.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
-.CodeMirror-activeline-background {background: #e8f2ff;}
+div.CodeMirror span.CodeMirror-matchingbracket {
+  color: #0f0;
+}
+
+div.CodeMirror span.CodeMirror-nonmatchingbracket {
+  color: #f22;
+}
+
+.CodeMirror-matchingtag {
+  background: rgba(255, 150, 0, .3);
+}
+
+.CodeMirror-activeline-background {
+  background: #e8f2ff;
+}
 
 /* STOP */
 
@@ -172,19 +314,20 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
 .CodeMirror {
   position: relative;
   overflow: hidden;
-  background: white;
 }
 
 .CodeMirror-scroll {
   overflow: scroll !important; /* Things will break if this is overridden */
   /* 30px is the magic margin used to hide the element's real scrollbars */
   /* See overflow: hidden in .CodeMirror */
-  margin-bottom: -30px; margin-right: -30px;
+  margin-bottom: -30px;
+  margin-right: -30px;
   padding-bottom: 30px;
   height: 100%;
   outline: none; /* Prevent dragging from highlighting the element */
   position: relative;
 }
+
 .CodeMirror-sizer {
   position: relative;
   border-right: 30px solid transparent;
@@ -198,46 +341,60 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
   z-index: 6;
   display: none;
 }
+
 .CodeMirror-vscrollbar {
-  right: 0; top: 0;
+  right: 0;
+  top: 0;
   overflow-x: hidden;
   overflow-y: scroll;
 }
+
 .CodeMirror-hscrollbar {
-  bottom: 0; left: 0;
+  bottom: 0;
+  left: 0;
   overflow-y: hidden;
   overflow-x: scroll;
 }
+
 .CodeMirror-scrollbar-filler {
-  right: 0; bottom: 0;
+  right: 0;
+  bottom: 0;
 }
+
 .CodeMirror-gutter-filler {
-  left: 0; bottom: 0;
+  left: 0;
+  bottom: 0;
 }
 
 .CodeMirror-gutters {
-  position: absolute; left: 0; top: 0;
+  position: absolute;
+  left: 0;
+  top: 0;
   z-index: 3;
 }
+
 .CodeMirror-gutter {
   white-space: normal;
   height: 100%;
   display: inline-block;
   margin-bottom: -30px;
   /* Hack to make IE7 behave */
-  *zoom:1;
-  *display:inline;
+  *zoom: 1;
+  *display: inline;
 }
+
 .CodeMirror-gutter-wrapper {
   position: absolute;
   z-index: 4;
   height: 100%;
 }
+
 .CodeMirror-gutter-elt {
   position: absolute;
   cursor: default;
   z-index: 4;
 }
+
 .CodeMirror-gutter-wrapper {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -248,9 +405,12 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
   cursor: text;
   min-height: 1px; /* prevents collapsing before first draw */
 }
+
 .CodeMirror pre {
   /* Reset some styles that the rest of the page might have set */
-  -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
+  -moz-border-radius: 0;
+  -webkit-border-radius: 0;
+  border-radius: 0;
   border-width: 0;
   background: transparent;
   font-family: inherit;
@@ -265,6 +425,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
   overflow: visible;
   -webkit-tap-highlight-color: transparent;
 }
+
 .CodeMirror-wrap pre {
   word-wrap: break-word;
   white-space: pre-wrap;
@@ -273,7 +434,10 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
 
 .CodeMirror-linebackground {
   position: absolute;
-  left: 0; right: 0; top: 0; bottom: 0;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
   z-index: 0;
 }
 
@@ -308,7 +472,10 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
   overflow: hidden;
   visibility: hidden;
 }
-.CodeMirror-measure pre { position: static; }
+
+.CodeMirror-measure pre {
+  position: static;
+}
 
 .CodeMirror div.CodeMirror-cursor {
   position: absolute;
@@ -321,15 +488,30 @@ div.CodeMirror-cursors {
   position: relative;
   z-index: 3;
 }
+
 .CodeMirror-focused div.CodeMirror-cursors {
   visibility: visible;
 }
 
-.CodeMirror-selected { background: #d9d9d9; }
-.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
-.CodeMirror-crosshair { cursor: crosshair; }
-.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
-.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
+.CodeMirror-selected {
+  background: #d9d9d9;
+}
+
+.CodeMirror-focused .CodeMirror-selected {
+  background: #d7d4f0;
+}
+
+.CodeMirror-crosshair {
+  cursor: crosshair;
+}
+
+.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection {
+  background: #d7d4f0;
+}
+
+.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection {
+  background: #d7d4f0;
+}
 
 .cm-searching {
   background: #ffa;
@@ -337,10 +519,14 @@ div.CodeMirror-cursors {
 }
 
 /* IE7 hack to prevent it from returning funny offsetTops on the spans */
-.CodeMirror span { *vertical-align: text-bottom; }
+.CodeMirror span {
+  *vertical-align: text-bottom;
+}
 
 /* Used to force a border model for a node */
-.cm-force-border { padding-right: .1px; }
+.cm-force-border {
+  padding-right: .1px;
+}
 
 @media print {
   /* Hide the cursor when printing */
@@ -350,10 +536,14 @@ div.CodeMirror-cursors {
 }
 
 /* See issue #2901 */
-.cm-tab-wrap-hack:after { content: ''; }
+.cm-tab-wrap-hack:after {
+  content: '';
+}
 
 /* Help users use markselection to safely style text background */
-span.CodeMirror-selectedtext { background: none; }
+span.CodeMirror-selectedtext {
+  background: none;
+}
 
 /*addon: show-hint*/
 .CodeMirror-hints {
@@ -365,9 +555,9 @@ span.CodeMirror-selectedtext { background: none; }
   margin: 0;
   padding: 2px;
 
-  -webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
-  -moz-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
-  box-shadow: 2px 3px 5px rgba(0,0,0,.2);
+  -webkit-box-shadow: 2px 3px 5px rgba(0, 0, 0, .2);
+  -moz-box-shadow: 2px 3px 5px rgba(0, 0, 0, .2);
+  box-shadow: 2px 3px 5px rgba(0, 0, 0, .2);
   border-radius: 3px;
   border: 1px solid silver;
 
diff --git a/src/less/base/layer/panel.less b/src/less/base/layer/panel.less
index 2fc691f080..25fd8f2807 100644
--- a/src/less/base/layer/panel.less
+++ b/src/less/base/layer/panel.less
@@ -1,11 +1,8 @@
 @import "../../bibase";
 
 .bi-panel{
-  border: 1px solid @border-color-light-blue;
   .border-radius(2px);
   .panel-title{
-    background-color: @background-color-light-blue;
-    border-bottom: 1px solid @border-color-light-blue;
     & .panel-title-text{
       cursor: text;
       font-size: @font-size-14;
diff --git a/src/less/base/single/button/button.less b/src/less/base/single/button/button.less
index cdfa8077e8..8602d52a7b 100644
--- a/src/less/base/single/button/button.less
+++ b/src/less/base/single/button/button.less
@@ -2,8 +2,8 @@
 
 .bi-button {
   .border-radius(2px);
-  border: 1px solid @color-bi-text-highlight;
-  background-color: @color-bi-text-highlight;
+  border: 1px solid @color-bi-border-highlight;
+  background-color: @color-bi-background-highlight;
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
diff --git a/src/less/base/single/editor/editor.textarea.less b/src/less/base/single/editor/editor.textarea.less
index 35da109e60..ce6b013578 100644
--- a/src/less/base/single/editor/editor.textarea.less
+++ b/src/less/base/single/editor/editor.textarea.less
@@ -7,8 +7,5 @@
     & {
       border: none;
     }
-    &.textarea-editor-focus{
-      border: 1px solid @color-bi-border-outline;
-    }
   }
 }
\ No newline at end of file
diff --git a/src/less/core/utils/common.less b/src/less/core/utils/common.less
index 304a35112c..e815d6a3c4 100644
--- a/src/less/core/utils/common.less
+++ b/src/less/core/utils/common.less
@@ -141,11 +141,17 @@
 
 //resize
 .bi-resizer {
-  background: @color-bi-background-virtual-blue;
-  .opacity(0.8);
+  background: @color-bi-background-black;
+  .opacity(0.2);
   z-index: @zIndex-tip;
 }
 
+.bi-theme-dark {
+  .bi-resizer {
+    background: @color-bi-background-default;
+  }
+}
+
 .bi-z-index-mask {
   background-color: @color-bi-background-black;
   .opacity(0.5);
@@ -337,7 +343,7 @@
   .bi-list-item-select {
     &:hover, &.hover {
       color: @color-bi-text-highlight;
-      background-color: @color-bi-background-normal;
+      background-color: @color-bi-background-normal-theme-dark;
     }
     &:active, &.active {
       color: @color-bi-text;
@@ -356,4 +362,23 @@
       }
     }
   }
+}
+
+.bi-list-item-choose {
+  &:active, &.active {
+    color: @color-bi-text;
+    background-color: @color-bi-background-highlight;
+    & .bi-high-light {
+      color: @color-bi-text;
+    }
+  }
+  &.disabled {
+    &, &:hover, &:active {
+      color: @color-bi-text-disabled !important;
+      background-color: transparent !important;
+      & .bi-high-light {
+        color: @color-bi-text-disabled !important;
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/less/lib/colors.less b/src/less/lib/colors.less
index 14db9dc9a5..f89590aec9 100644
--- a/src/less/lib/colors.less
+++ b/src/less/lib/colors.less
@@ -124,6 +124,10 @@
 @color-target-background: @background-color-light-green;
 @color-dimension-region-border: @border-color-light-blue;
 @color-target-region-border: @border-color-light-green;
+@color-dimension-background-theme-dark: @background-color-light-blue-theme-dark;
+@color-target-background-theme-dark: @background-color-light-green-theme-dark;
+@color-dimension-region-border-theme-dark: @border-color-light-blue-theme-dark;
+@color-target-region-border-theme-dark: @border-color-light-green-theme-dark;
 
 //etl operator
 @color-etl-operator: @background-color-light-blue;
@@ -151,8 +155,7 @@
 
 @color-login-info-fields-group-background: @background-color-light-blue;
 //mask颜色
-@color-bi-button-mask : @color-bi-background-black;
-
+@color-bi-button-mask: @color-bi-background-black;
 
 // 数据连接底色 10种 --start--
 @color-bi-data-link-button-color1: @data-link-color1;
diff --git a/src/less/lib/constant.less b/src/less/lib/constant.less
index fcceb29828..50ae11399c 100644
--- a/src/less/lib/constant.less
+++ b/src/less/lib/constant.less
@@ -15,15 +15,15 @@
 @opacity-20: 0.2;
 
 //font color
-@font-color-black: #1a1a1a;
-@font-color-normal: #666666;
-@font-color-normal-theme-dark: #cccccc;
-@font-color-disabled: #cccccc;
-@font-color-disabled-theme-dark: #666666;
-@font-color-tips: #999999;
+@font-color-black: #1a1a1a;//
+@font-color-normal: #666666;//
+@font-color-normal-theme-dark: #cccccc;//
+@font-color-disabled: #cccccc;//
+@font-color-disabled-theme-dark: #666666;//
+@font-color-tips: #999999;//
 @font-color-dark: #d4dadd;
 @font-color-gray: #999999;
-@font-color-white: #ffffff;
+@font-color-white: #ffffff;//
 @font-color-highlight: #3f8ce8;
 @font-color-success: #0c6d23;
 @font-color-warning: #e85050;
@@ -36,19 +36,23 @@
 @icon-color-active: #3f8ce8;
 
 //background color
-@background-color-black: #1a1a1a;
+@background-color-black: #1a1a1a;//
 @background-color-light: #eaeaea;
-@background-color-default: #ffffff;
-@background-color-default-theme-dark: #242640;
-@background-color-normal: #eff1f4;
-@background-color-normal-theme-dark: #191B2B;
+@background-color-default: #ffffff;//
+@background-color-default-theme-dark: #242640;//
+@background-color-normal: #eff1f4;//
+@background-color-normal-theme-dark: #191B2B;//
 @background-color-active: #f4f4f4;
 @background-color-highlight: #3f8ce8;
 @background-color-dark: #d4dadd;
 @background-color-disabled: #c4c6c6;
 @background-color-alert: #fddddd;
-@background-color-light-blue: #d8f2fd;
-@background-color-light-green: #e1f4e7;
+
+@background-color-light-blue: #d8f2fd;//
+@background-color-light-green: #e1f4e7;//
+@background-color-light-blue-theme-dark: #008ae9;//
+@background-color-light-green-theme-dark: #04b1c2;//
+
 @background-color-orange: #fef6de;
 @background-color-green: #eefbff;
 @background-color-yellow: #f9a744;
@@ -78,8 +82,10 @@
 @border-color-error: #f4cbcb;
 @border-color-normal-success: #eddea2;
 
-@border-color-light-blue: #a3d6e8;
-@border-color-light-green: #9fd3ae;
+@border-color-light-blue: #d8f2fd;//
+@border-color-light-green: #e1f4e7;//
+@border-color-light-blue-theme-dark: #008ae9;//
+@border-color-light-green-theme-dark: #04b1c2;//
 
 @border-color-dark: #c4c6c6;
 
diff --git a/src/less/resource/widget/display.tree.less b/src/less/resource/third/ztree/display.tree.less
similarity index 96%
rename from src/less/resource/widget/display.tree.less
rename to src/less/resource/third/ztree/display.tree.less
index d7acb51324..2cecf9672b 100644
--- a/src/less/resource/widget/display.tree.less
+++ b/src/less/resource/third/ztree/display.tree.less
@@ -1,4 +1,4 @@
-@import "../../bibase";
+@import "../../../bibase";
 
 .bi-display-tree{
   .ztree * {
diff --git a/src/less/widget/arrangement/arrangement.block.less b/src/less/widget/arrangement/arrangement.block.less
index c8ce416990..b9fe6d143c 100644
--- a/src/less/widget/arrangement/arrangement.block.less
+++ b/src/less/widget/arrangement/arrangement.block.less
@@ -1,6 +1,4 @@
 @import "../../bibase";
 
-.bi-arrangement-block{
-  background:@color-bi-background-failure;
-  .opacity(0.8);
+.bi-arrangement-block {
 }
\ No newline at end of file
diff --git a/src/widget/arrangement/arrangement.block.js b/src/widget/arrangement/arrangement.block.js
index 3e56415269..f2e9833709 100644
--- a/src/widget/arrangement/arrangement.block.js
+++ b/src/widget/arrangement/arrangement.block.js
@@ -9,7 +9,7 @@ BI.ArrangementBlock = BI.inherit(BI.Widget, {
 
     _defaultConfig: function () {
         return BI.extend(BI.ArrangementBlock.superclass._defaultConfig.apply(this, arguments), {
-            baseCls: "bi-arrangement-block"
+            baseCls: "bi-arrangement-block bi-resizer"
         });
     },