diff --git a/src/less/base/combo/combo.bubble.less b/src/less/base/combo/combo.bubble.less
index b8ca94ed1..337077402 100644
--- a/src/less/base/combo/combo.bubble.less
+++ b/src/less/base/combo/combo.bubble.less
@@ -7,7 +7,7 @@
     line-height: 0;
     .z-index-layer(@zIndex-popup);
     //  ie10一下无背景色会鼠标穿透
-    .background-color(@background-color-default, 0);
+    .background-color(@color-bi-background-default, 0);
   }
   & .bubble-combo-triangle-left {
     z-index: 1;
diff --git a/src/less/base/combo/combo.less b/src/less/base/combo/combo.less
index ab380ec4a..a4203f7ec 100644
--- a/src/less/base/combo/combo.less
+++ b/src/less/base/combo/combo.less
@@ -29,7 +29,7 @@
   &.disabled {
     &.bi-combo-hover, &:hover {
       &.bi-border {
-        border-color: @border-color-line;
+        border-color: @color-bi-border-line;
       }
     }
   }
@@ -40,7 +40,7 @@
     &.disabled {
       &.bi-combo-hover, &:hover {
         &.bi-border {
-          border-color: @border-color-line-theme-dark;
+          border-color: @color-bi-border-line-theme-dark;
         }
       }
     }
diff --git a/src/less/base/single/button/button.less b/src/less/base/single/button/button.less
index 890220837..4f4b65d33 100644
--- a/src/less/base/single/button/button.less
+++ b/src/less/base/single/button/button.less
@@ -174,7 +174,7 @@ body .bi-button, #body .bi-button {
   &.button-common, &.button-success, &.button-warning, &.button-error {
     &:after {
       content: "";
-      background-color: @color-bi-button-mask;
+      background-color: @color-bi-background-button-mask;
       .border-radius(10px);
       display: block;
       width: 100%;
@@ -283,4 +283,4 @@ body .bi-button, #body .bi-button {
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/less/base/single/tip/tip.bubble.less b/src/less/base/single/tip/tip.bubble.less
index ec3704fab..ea40fd784 100644
--- a/src/less/base/single/tip/tip.bubble.less
+++ b/src/less/base/single/tip/tip.bubble.less
@@ -5,26 +5,26 @@
   .border-radius(2px);
 
   &.bubble-error{
-    background: @color-bi-background-light-failure;
+    background: @color-bi-background-bubble-error;
     color: @color-bi-text-failure;
   }
 
   .bi-theme-dark &.bubble-error {
-    background: @color-bi-background-dark-failure;
+    background: @color-bi-background-bubble-error-theme-dark;
   }
 
   &.bubble-common{
-    background: @color-bi-background-light-highlight;
+    background: @color-bi-background-bubble-normal;
     color: @color-bi-text-highlight;
   }
 
   &.bubble-success{
-    background: @color-bi-background-light-success;
+    background: @color-bi-background-bubble-success;
     color: @color-bi-text-success;
   }
 
   &.bubble-warning{
-    background: @color-bi-background-light-warning;
+    background: @color-bi-background-bubble-warning;
     color: @color-bi-text-redmark;
   }
 }
diff --git a/src/less/base/single/tip/tip.toast.less b/src/less/base/single/tip/tip.toast.less
index 1bdc43d78..ef682969a 100644
--- a/src/less/base/single/tip/tip.toast.less
+++ b/src/less/base/single/tip/tip.toast.less
@@ -6,18 +6,18 @@
   min-width: 150px;
   .border-radius(2px);
   &.toast-success{
-    background: @color-bi-background-success;
+    background: @color-bi-background-toast-success;
   }
   &.toast-warning{
-    background: @color-bi-background-warning;
+    background: @color-bi-background-toast-warning;
   }
   &.toast-error{
-    background: @color-bi-background-failure;
+    background: @color-bi-background-toast-error;
   }
   &.toast-normal, &.toast-common{
-    background: @color-bi-background-highlight;
+    background: @color-bi-background-toast-normal;
   }
   & .toast-icon{
-    font-size: 16px;
+    font-size: @font-size-16;
   }
 }
diff --git a/src/less/base/single/tip/tip.tooltip.less b/src/less/base/single/tip/tip.tooltip.less
index c9bfc3de9..44a3d664c 100644
--- a/src/less/base/single/tip/tip.tooltip.less
+++ b/src/less/base/single/tip/tip.tooltip.less
@@ -8,12 +8,12 @@
   font-size: 12px;
   color: @color-bi-text;
   &.tooltip-success{
-    background: @color-bi-tooltip-success-background;
-    border: 1px solid @color-bi-tooltip-success-background;
+    background: @color-bi-background-tooltip-success;
+    border: 1px solid @color-bi-border-tooltip-success;
 
   }
   &.tooltip-warning{
-    background: @color-bi-background-failure;
-    border: 1px solid @color-bi-tooltip-failure-border;
+    background: @color-bi-background-tooltip-success;
+    border: 1px solid @color-bi-border-tooltip-failure;
   }
-}
\ No newline at end of file
+}
diff --git a/src/less/base/tree/tree.expander.less b/src/less/base/tree/tree.expander.less
index e4355b37e..85a928cd4 100644
--- a/src/less/base/tree/tree.expander.less
+++ b/src/less/base/tree/tree.expander.less
@@ -2,7 +2,7 @@
 .bi-tree-expander-popup.line:before {
   position: absolute;
   content: "";
-  border-left: 1px dashed #D0D4DA;
+  border-left: 1px dashed @color-bi-border-dark-gray-line;
   height: 100%;
   left: 11px;
 }
diff --git a/src/less/core/utils/common.less b/src/less/core/utils/common.less
index 22832e25f..facfb9054 100644
--- a/src/less/core/utils/common.less
+++ b/src/less/core/utils/common.less
@@ -66,73 +66,73 @@
 //基本背景
 .bi-background {
   background-color: @color-bi-background-normal;
-  color: @color-bi-text-normal;
+  color: @color-bi-text-background;
   & .bi-input {
-    color: @color-bi-text-normal;
+    color: @color-bi-text-background;
   }
   & .bi-textarea {
-    color: @color-bi-text-normal;
+    color: @color-bi-text-background;
   }
 }
 
 .bi-theme-dark {
   .bi-background {
     background-color: @color-bi-background-normal-theme-dark;
-    color: @color-bi-text-theme-dark;
+    color: @color-bi-text-background-theme-dark;
     & .bi-input {
-      color: @color-bi-text-theme-dark;
+      color: @color-bi-text-background-theme-dark;
     }
     & .bi-textarea {
-      color: @color-bi-text-theme-dark;
+      color: @color-bi-text-background-theme-dark;
     }
   }
 }
 
 .bi-header-background {
-  background-color: @color-bi-background-light-gray;
-  color: @color-bi-text-light-gray;
+  background-color: @color-bi-background-header-background;
+  color: @color-bi-text-header-background;
   & .bi-input {
-    color: @color-bi-text-light-gray;
+    color: @color-bi-text-header-background;
   }
   & .bi-textarea {
-    color: @color-bi-text-light-gray;
+    color: @color-bi-text-header-background;
   }
 }
 
 .bi-theme-dark {
   .bi-header-background {
-    background-color: @color-bi-background-light-gray-theme-dark;
-    color: @color-bi-text-light-gray-theme-dark;
+    background-color: @color-bi-background-header-background-theme-dark;
+    color: @color-bi-text-header-background-theme-dark;
     & .bi-input {
-      color: @color-bi-text-light-gray-theme-dark;
+      color: @color-bi-text-header-background-theme-dark;
     }
     & .bi-textarea {
-      color: @color-bi-text-light-gray-theme-dark;
+      color: @color-bi-text-header-background-theme-dark;
     }
   }
 }
 
 //card
 .bi-card {
-  background-color: @color-bi-background-default;
-  color: @color-bi-text-normal;
+  background-color: @color-bi-background-card;
+  color: @color-bi-text-card;
   & .bi-input {
-    color: @color-bi-text-normal;
+    color: @color-bi-text-card;
   }
   & .bi-textarea {
-    color: @color-bi-text-normal;
+    color: @color-bi-text-card;
   }
 }
 
 .bi-theme-dark {
   .bi-card {
-    background-color: @color-bi-background-default-theme-dark;
-    color: @color-bi-text-theme-dark;
+    background-color: @color-bi-background-card-theme-dark;
+    color: @color-bi-text-card-theme-dark;
     & .bi-input {
-      color: @color-bi-text-theme-dark;
+      color: @color-bi-text-card-theme-dark;
     }
     & .bi-textarea {
-      color: @color-bi-text-theme-dark;
+      color: @color-bi-text-card-theme-dark;
     }
   }
 }
@@ -415,25 +415,25 @@
 
 // 水印
 .bi-water-mark {
-  color: @font-color-tips;
+  color: @color-bi-text-water-mark;
   cursor: text;
   .user-select-disable();
   & .bi-input {
-    color: @font-color-tips;
+    color: @color-bi-text-water-mark;
   }
   & .bi-textarea {
-    color: @font-color-tips;
+    color: @color-bi-text-water-mark;
   }
 }
 
 .bi-theme-dark {
   .bi-water-mark {
-    color: @font-color-tips-theme-dark;
+    color: @color-bi-text-water-mark-theme-dark;
     & .bi-input {
-      color: @font-color-tips-theme-dark;
+      color: @color-bi-text-water-mark-theme-dark;
     }
     & .bi-textarea {
-      color: @font-color-tips-theme-dark;
+      color: @color-bi-text-water-mark-theme-dark;
     }
   }
 }
diff --git a/src/less/index.less b/src/less/index.less
index 5f0b88dc2..5bf77d7b2 100644
--- a/src/less/index.less
+++ b/src/less/index.less
@@ -3,4 +3,5 @@
 @import "typographic";
 @import "visual";
 @import "var";
-@import "lib/colors";
\ No newline at end of file
+@import "lib/colors";
+@import "lib/theme";
diff --git a/src/less/lib/colors.less b/src/less/lib/colors.less
index 28a3aaf7c..81f9e5197 100644
--- a/src/less/lib/colors.less
+++ b/src/less/lib/colors.less
@@ -1,6 +1,6 @@
 @import "constant";
 
-// 色彩库,从constant.less中获取相关颜色,不要出现#xxxxxx
+// 通用色彩库。从constant.less中获取相关颜色,不要出现#xxxxxx
 
 //默认字体颜色
 @color-bi-text-normal: @font-color-normal;
@@ -32,6 +32,8 @@
 @color-bi-icon-disabled-theme-dark: @font-color-light-disabled-theme-dark;
 //提示字体颜色
 @color-bi-text-tips: @font-color-tips;
+//深色主题提示字体颜色
+@color-bi-text-tips-theme-dark: @font-color-tips-theme-dark;
 //成功字体颜色
 @color-bi-text-success: @font-color-success;
 //失败字体颜色
@@ -104,6 +106,10 @@
 @color-bi-border-line: @border-color-line;
 //深色主题边框线色
 @color-bi-border-line-theme-dark: @border-color-line-theme-dark;
+//深灰色边框线
+@color-bi-border-dark-gray-line: @border-color-dark-gray-line;
+//深灰色主题深色边框线
+@color-bi-border-dark-gray-line-theme-dark: @border-color-dark-gray-line-theme-dark;
 //深色边框线
 @color-bi-border-dark-line: @border-color-dark-line;
 //深色主题深色边框线
@@ -121,17 +127,6 @@
 //边框提亮
 @color-bi-border-highlight: @border-color-highlight;
 
-//tooltip
-//成功背景
-@color-bi-tooltip-success-background: @background-color-normal-success;
-//成功边框
-@color-bi-tooltip-success-border: @border-color-normal-success;
-//失败边框
-@color-bi-tooltip-failure-border: @border-color-negative;
-
-//mask颜色
-@color-bi-button-mask: @color-bi-background-black;
-
 //颜色百分比
 //green
 @color-bi-green-80: fade(@font-color-success, 80);
diff --git a/src/less/lib/constant.less b/src/less/lib/constant.less
index eed7d0336..53e46ad3b 100644
--- a/src/less/lib/constant.less
+++ b/src/less/lib/constant.less
@@ -1,8 +1,5 @@
-//常量库
-
-//classified
-
-//
+// 基础配色方案，业务无关
+//font size
 @font-size-12: 12px;
 @font-size-13: 13px;
 @font-size-14: 14px;
@@ -92,8 +89,10 @@
 @border-color-line-theme-dark: #363e55;
 @border-color-light-line: #f2f4f7;
 @border-color-light-line-theme-dark: #292f45;
-@border-color-dark-line: #9EA6B2;
-@border-color-dark-line-theme-dark: #878D9F;
+@border-color-dark-gray-line: #d0d4da;
+@border-color-dark-gray-line-theme-dark: #606479;
+@border-color-dark-line: #9ea6b2;
+@border-color-dark-line-theme-dark: #878d9f;
 @border-color-highlight: #3685f2;
 
 @border-color-warning: #fbb03b;
@@ -111,5 +110,3 @@
 @scroll-color-theme-dark: #ffffff;
 @scroll-thumb-color: #232e40;
 @scroll-thumb-color-theme-dark: #232e40;
-
-@water-mark-color-theme-dark: #878d9f;
diff --git a/src/less/lib/theme.less b/src/less/lib/theme.less
new file mode 100644
index 000000000..fa59952d2
--- /dev/null
+++ b/src/less/lib/theme.less
@@ -0,0 +1,52 @@
+@import "colors";
+
+// 专属组件色彩库，通用配色中有的用通用配色，否则选constant自定义配色
+
+//tooltip
+//成功背景(专属配色)
+@color-bi-background-tooltip-success: @background-color-normal-success;
+//成功边框(专属配色)
+@color-bi-border-tooltip-success: @border-color-normal-success;
+//失败背景
+@color-bi-background-tooltip-success: @color-bi-background-failure;
+//失败边框
+@color-bi-border-tooltip-failure: @color-bi-border-failure;
+
+//按钮的mask颜色
+@color-bi-background-button-mask: @color-bi-background-black;
+
+//水印字体颜色
+@color-bi-text-water-mark: @color-bi-text-tips;
+@color-bi-text-water-mark-theme-dark: @color-bi-text-tips-theme-dark;
+
+//toast
+@color-bi-background-toast-success: @color-bi-background-success;
+@color-bi-background-toast-warning: @color-bi-background-warning;
+@color-bi-background-toast-error: @color-bi-background-failure;
+@color-bi-background-toast-normal: @color-bi-background-highlight;
+
+//bubble
+@color-bi-background-bubble-success: @color-bi-background-light-success;
+@color-bi-background-bubble-warning: @color-bi-background-light-warning;
+@color-bi-background-bubble-error: @color-bi-background-light-failure;
+@color-bi-background-bubble-error-theme-dark: @color-bi-background-dark-failure;
+@color-bi-background-bubble-normal: @color-bi-background-light-highlight;
+
+//bi-background背景
+@color-bi-background-background: @color-bi-background-normal;
+@color-bi-background-background-theme-dark: @color-bi-background-normal-theme-dark;
+@color-bi-text-background: @color-bi-text-normal;
+@color-bi-text-background-theme-dark: @color-bi-text-theme-dark;
+
+//bi-header-background背景
+@color-bi-background-header-background: @color-bi-background-light-gray;
+@color-bi-background-header-background-theme-dark: @color-bi-background-light-gray-theme-dark;
+@color-bi-text-header-background: @color-bi-text-light-gray;
+@color-bi-text-header-background-theme-dark: @color-bi-text-light-gray-theme-dark;
+
+//bi-card卡片
+@color-bi-background-card: @color-bi-background-default;
+@color-bi-background-card-theme-dark: @color-bi-background-default-theme-dark;
+@color-bi-text-card: @color-bi-text-normal;
+@color-bi-text-card-theme-dark: @color-bi-text-theme-dark;
+
diff --git a/src/less/widget/dynamicdatecombo/dynamicdatetime.combo.less b/src/less/widget/dynamicdatecombo/dynamicdatetime.combo.less
index 7aad9f6df..d15ab68dc 100644
--- a/src/less/widget/dynamicdatecombo/dynamicdatetime.combo.less
+++ b/src/less/widget/dynamicdatecombo/dynamicdatetime.combo.less
@@ -2,6 +2,6 @@
 
 .bi-dynamic-date-combo {
   & .date-font {
-    font-size: 16px;
+    font-size: @font-size-16;
   }
-}
\ No newline at end of file
+}
diff --git a/src/less/widget/multilayerselecttree/multilayerselecttree.combo.less b/src/less/widget/multilayerselecttree/multilayerselecttree.combo.less
index 6a43b1d0f..4a725cd98 100644
--- a/src/less/widget/multilayerselecttree/multilayerselecttree.combo.less
+++ b/src/less/widget/multilayerselecttree/multilayerselecttree.combo.less
@@ -2,7 +2,7 @@
 @val: transform .3s ease;
 .bi-multilayer-select-tree-combo {
   & .trigger-icon-button{
-    font-size: 16px;
+    font-size: @font-size-16;
   }
   // 此combo的trigger_button是absolute上去的，与bi-combo在同一层级，独立写一下
   & .bi-combo.bi-combo-popup + .bi-trigger-icon-button {
@@ -17,4 +17,4 @@
       .transition(@val);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/less/widget/multilayersingletree/multilayersingletree.combo.less b/src/less/widget/multilayersingletree/multilayersingletree.combo.less
index ec139af05..a589309fd 100644
--- a/src/less/widget/multilayersingletree/multilayersingletree.combo.less
+++ b/src/less/widget/multilayersingletree/multilayersingletree.combo.less
@@ -2,7 +2,7 @@
 @val: transform .3s ease;
 .bi-multilayer-single-tree-combo {
   & .trigger-icon-button{
-    font-size: 16px;
+    font-size: @font-size-16;
   }
   // 此combo的trigger_button是absolute上去的，与bi-combo在同一层级，独立写一下
   & .bi-combo.bi-combo-popup + .bi-trigger-icon-button {
@@ -17,4 +17,4 @@
       .transition(@val);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/less/widget/multiselect/multiselect.insert.combo.less b/src/less/widget/multiselect/multiselect.insert.combo.less
index c8c55f8f7..ed721fce8 100644
--- a/src/less/widget/multiselect/multiselect.insert.combo.less
+++ b/src/less/widget/multiselect/multiselect.insert.combo.less
@@ -2,7 +2,7 @@
 @val: transform .3s ease;
 .bi-multi-select-insert-combo{
   & .multi-select-trigger-icon-button{
-    font-size: 16px;
+    font-size: @font-size-16;
   }
   // 此combo的trigger_button是absolute上去的，与bi-combo在同一层级，独立写一下
   & .bi-combo.bi-combo-popup + .bi-trigger-icon-button {
@@ -17,4 +17,4 @@
       .transition(@val);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/less/widget/multitree/multi.tree.combo.less b/src/less/widget/multitree/multi.tree.combo.less
index 230c0171f..73db11ef5 100644
--- a/src/less/widget/multitree/multi.tree.combo.less
+++ b/src/less/widget/multitree/multi.tree.combo.less
@@ -2,7 +2,7 @@
 @val: transform .3s ease;
 .bi-multi-tree-combo{
   & .multi-select-trigger-icon-button{
-    font-size: 16px;
+    font-size: @font-size-16;
   }
   // 此combo的trigger_button是absolute上去的，与bi-combo在同一层级，独立写一下
   & .bi-combo.bi-combo-popup + .bi-trigger-icon-button {
@@ -17,4 +17,4 @@
       .transition(@val);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/less/widget/numbereditor/number.editor.less b/src/less/widget/numbereditor/number.editor.less
index 8272c808b..6a86c5372 100644
--- a/src/less/widget/numbereditor/number.editor.less
+++ b/src/less/widget/numbereditor/number.editor.less
@@ -3,9 +3,9 @@
 .bi-number-editor {
   .border-radius(2px);
   & .pull-down-font {
-    font-size: 12px;
+    font-size: @font-size-12;
   }
   & .pull-up-font {
-    font-size: 12px;
+    font-size: @font-size-12;
   }
-}
\ No newline at end of file
+}
diff --git a/src/less/widget/searchmultiselect/searchmultiselect.less b/src/less/widget/searchmultiselect/searchmultiselect.less
index 99613ac2a..f924f044b 100644
--- a/src/less/widget/searchmultiselect/searchmultiselect.less
+++ b/src/less/widget/searchmultiselect/searchmultiselect.less
@@ -2,7 +2,7 @@
 
 .bi-search-multi-text-value-combo{
   & .multi-select-trigger-icon-button{
-    font-size: 16px;
+    font-size: @font-size-16;
   }
   &.combo-error {
     & .bi-multi-select-searcher {
@@ -11,4 +11,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/less/widget/singleselect/singleselect.combo.less b/src/less/widget/singleselect/singleselect.combo.less
index b45d4902d..c32f46b04 100644
--- a/src/less/widget/singleselect/singleselect.combo.less
+++ b/src/less/widget/singleselect/singleselect.combo.less
@@ -2,7 +2,7 @@
 @val: transform .3s ease;
 .bi-single-select-combo{
   & .single-select-trigger-icon-button{
-    font-size: 16px;
+    font-size: @font-size-16;
   }
   // 此combo的trigger_button是absolute上去的，与bi-combo在同一层级，独立写一下
   & .bi-combo.bi-combo-popup + .bi-trigger-icon-button {
@@ -17,4 +17,4 @@
       .transition(@val);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/less/widget/timecombo/timecombo.less b/src/less/widget/timecombo/timecombo.less
index e1ed24438..6ed973121 100644
--- a/src/less/widget/timecombo/timecombo.less
+++ b/src/less/widget/timecombo/timecombo.less
@@ -3,6 +3,6 @@
 .bi-time-trigger{
   & .show-text {
     //  ie10一下无背景色会鼠标穿透
-    .background-color(@background-color-default, 0);
+    .background-color(@color-bi-background-default, 0);
   }
-}
\ No newline at end of file
+}