diff --git a/src/less/base/single/button/button.less b/src/less/base/single/button/button.less
index 4f4b65d33..810b91058 100644
--- a/src/less/base/single/button/button.less
+++ b/src/less/base/single/button/button.less
@@ -7,8 +7,8 @@ body .bi-button, #body .bi-button {
     .border-radius(0px);
   }
   .border-radius(2px);
-  border: 1px solid @color-bi-border-highlight;
-  background-color: @color-bi-background-highlight;
+  border: 1px solid @color-bi-border-button;
+  background-color: @color-bi-background-button;
   .box-sizing(border-box);
   text-align: center;
   vertical-align: middle;
diff --git a/src/less/base/single/button/switch.less b/src/less/base/single/button/switch.less
index 7a65f2889..d08c780de 100644
--- a/src/less/base/single/button/switch.less
+++ b/src/less/base/single/button/switch.less
@@ -2,26 +2,26 @@
 
 .bi-switch{
   .border-radius(40px 40px 40px 40px);
-  background-color: @color-bi-background-dark-gray;
+  background-color: @color-bi-background-switch;
   &.active {
-    background-color: @color-bi-background-highlight;
+    background-color: @color-bi-background-active-switch;
   }
   & .circle-button{
     .border-radius(9px 9px 9px 9px);
   }
   &.disabled {
-    background-color: @color-bi-background-disabled;
+    background-color: @color-bi-background-disabled-switch;
   }
 }
 
 .bi-theme-dark {
   .bi-switch{
-    background-color: @color-bi-background-dark-gray-theme-dark;
+    background-color: @color-bi-background-switch-theme-dark;
     &.active {
-      background-color: @color-bi-background-highlight;
+      background-color: @color-bi-background-active-switch-theme-dark;
     }
     &.disabled {
-      background-color: @color-bi-background-disabled-theme-dark;
+      background-color: @color-bi-background-disabled-switch-theme-dark;
     }
   }
 }
\ No newline at end of file
diff --git a/src/less/base/single/input/checkbox.less b/src/less/base/single/input/checkbox.less
index 96507bfd2..abdd7b761 100644
--- a/src/less/base/single/input/checkbox.less
+++ b/src/less/base/single/input/checkbox.less
@@ -3,7 +3,7 @@
 .bi-checkbox {
   & .checkbox-content, &.checkbox-content {
     .border-radius(2px);
-    border: 1px solid @color-bi-border-dark-line;
+    border: 1px solid @color-bi-border-checkbox;
     box-sizing: border-box;
     &:after {
       position: absolute;
@@ -20,12 +20,12 @@
       content: '';
     }
     &.hover, &:hover {
-      border-color: @color-bi-border-highlight;
+      border-color: @color-bi-border-hover-active-checkbox;
     }
   }
   &.active, &:active {
     & .checkbox-content, &.checkbox-content{
-      border-color: @color-bi-border-highlight;
+      border-color: @color-bi-border-hover-active-checkbox;
       &:after {
         border-color: @color-bi-border-default;
         opacity: 1;
@@ -34,15 +34,15 @@
   }
   &.disabled {
     & .checkbox-content, &.checkbox-content {
-      background-color: @color-bi-background-disabled;
-      border-color: @color-bi-border-disabled;
+      background-color: @color-bi-background-disabled-checkbox;
+      border-color: @color-bi-border-disabled-checkbox;
     }
     & .checkbox-content:after, &.checkbox-content:after {
       opacity: 0;
     }
     &.active {
       & .checkbox-content, &.checkbox-content {
-        background-color: @color-bi-background-dark-gray;
+        background-color: @color-bi-background-disabled-active-checkbox;
         &:after {
           opacity: 1;
         }
@@ -54,24 +54,24 @@
 .bi-theme-dark {
   .bi-checkbox {
     & .checkbox-content, &.checkbox-content {
-      border-color: @color-bi-border-dark-line-theme-dark;
+      border-color: @color-bi-border-checkbox-theme-dark;
       &.hover, &:hover {
-        border-color: @color-bi-border-highlight;
+        border-color: @color-bi-border-hover-active-checkbox-theme-dark;
       }
     }
     &.active, &:active {
       & .checkbox-content, &.checkbox-content {
-        border-color: @color-bi-border-highlight;
+        border-color: @color-bi-border-hover-active-checkbox-theme-dark;
       }
     }
     &.disabled {
       & .checkbox-content, &.checkbox-content {
-        background-color: @color-bi-background-disabled-theme-dark;
+        background-color: @color-bi-background-disabled-checkbox-theme-dark;
       }
       &.active {
         & .checkbox-content, &.checkbox-content {
-          background-color: @color-bi-background-dark-gray-theme-dark;
-          border-color: @color-bi-border-disabled-theme-dark;
+          background-color: @color-bi-background-disabled-active-checkbox-theme-dark;
+          border-color: @color-bi-border-disabled-checkbox-theme-dark;
         }
       }
     }
diff --git a/src/less/base/single/input/radio.less b/src/less/base/single/input/radio.less
index 2e2cda48a..6fb3008c3 100644
--- a/src/less/base/single/input/radio.less
+++ b/src/less/base/single/input/radio.less
@@ -3,18 +3,18 @@
 .bi-radio {
   & .radio-content, &.radio-content {
     .border-radius(8px);
-    border: 1px solid @color-bi-border-dark-line;
+    border: 1px solid @color-bi-border-radio;
     .box-sizing(border-box);
     &:after {
       content: "";
     }
     &.hover, &:hover {
-      border-color: @color-bi-border-highlight;
+      border-color: @color-bi-border-hover-active-radio;
     }
   }
   &:active, &.active {
     & .radio-content, &.radio-content {
-      border-color:  @color-bi-border-highlight;
+      border-color:  @color-bi-border-hover-active-radio;
       &:after {
         width: 6px;
         height: 6px;
@@ -23,24 +23,24 @@
         top: 50%;
         left: 50%;
         .border-radius(3px);
-        background-color: @color-bi-background-default;
+        background-color: @color-bi-background-radio;
         .transform(translate(-50%, -50%));
       }
     }
   }
   &.disabled {
     & .radio-content, &.radio-content {
-      background-color: @color-bi-background-disabled;
-      border-color: @color-bi-border-disabled;
+      background-color: @color-bi-background-disabled-radio;
+      border-color: @color-bi-border-disabled-radio;
     }
     & .radio-content:after, &.radio-content:after {
       background-color: transparent;
     }
     &.active {
       & .radio-content, &.radio-content {
-        background-color: @color-bi-background-dark-gray;
+        background-color: @color-bi-background-disabled-active-radio;
         &:after {
-          background-color: @color-bi-background-default;
+          background-color: @color-bi-background-radio;
         }
       }
     }
@@ -50,27 +50,27 @@
 .bi-theme-dark {
   .bi-radio {
     & .radio-content, &.radio-content {
-      border-color: @color-bi-border-dark-line-theme-dark;
+      border-color: @color-bi-border-radio-theme-dark;
       &.hover, &:hover {
-        border-color: @color-bi-border-highlight;
+        border-color: @color-bi-border-hover-active-radio-theme-dark;
       }
     }
     &.active, &:active {
       & .radio-content, &.radio-content {
-        border-color: @color-bi-border-highlight;
+        border-color:@color-bi-border-hover-active-radio-theme-dark;
       }
     }
     &.disabled {
       & .radio-content, &.radio-content {
-        background-color: @color-bi-background-disabled-theme-dark;
+        background-color: @color-bi-background-disabled-radio-theme-dark;
         &.hover, &:hover {
-          border-color: @color-bi-border-dark-line-theme-dark;
+          border-color: @color-bi-border-radio-theme-dark;
         }
       }
       &.active {
         & .radio-content, &.radio-content {
-          background-color: @color-bi-background-dark-gray-theme-dark;
-          border-color: @color-bi-border-disabled-theme-dark;
+          background-color: @color-bi-background-disabled-active-radio-theme-dark;
+          border-color: @color-bi-border-disabled-radio-theme-dark;
         }
       }
     }
diff --git a/src/less/lib/constant.less b/src/less/lib/constant.less
index ecea10f85..ed51d3895 100644
--- a/src/less/lib/constant.less
+++ b/src/less/lib/constant.less
@@ -20,11 +20,25 @@
 @opacity-15: 0.15;
 @opacity-20: 0.2;
 
-//色板
+// 色板
+// 品牌
+@color-brand-blue-100: #2C60DB;
+@color-brand-blue-90: fade(@color-brand-blue-100, 90);
+@color-brand-blue-80: fade(@color-brand-blue-100, 80);
+@color-brand-blue-60: fade(@color-brand-blue-100, 60);
+@color-brand-blue-50: fade(@color-brand-blue-100, 50);
+@color-brand-blue-40: fade(@color-brand-blue-100, 40);
+@color-brand-blue-30: fade(@color-brand-blue-100, 30);
+@color-brand-blue-20: fade(@color-brand-blue-100, 20);
+@color-brand-blue-10: fade(@color-brand-blue-100, 10);
+@color-brand-blue-5: fade(@color-brand-blue-100, 5);
+
 //green
 @color-bi-green-100: #13cd66;
+@color-bi-green-90: fade(@color-bi-green-100, 90);
 @color-bi-green-80: fade(@color-bi-green-100, 80);
 @color-bi-green-60: fade(@color-bi-green-100, 60);
+@color-bi-green-50: fade(@color-bi-green-100, 50);
 @color-bi-green-40: fade(@color-bi-green-100, 40);
 @color-bi-green-30: fade(@color-bi-green-100, 30);
 @color-bi-green-20: fade(@color-bi-green-100, 20);
@@ -32,19 +46,23 @@
 @color-bi-green-5: fade(@color-bi-green-100, 5);
 
 //cyan
-@color-bi-green-100: #13cd66;
-@color-bi-green-80: fade(@color-bi-green-100, 80);
-@color-bi-green-60: fade(@color-bi-green-100, 60);
-@color-bi-green-40: fade(@color-bi-green-100, 40);
-@color-bi-green-30: fade(@color-bi-green-100, 30);
-@color-bi-green-20: fade(@color-bi-green-100, 20);
-@color-bi-green-10: fade(@color-bi-green-100, 10);
-@color-bi-green-5: fade(@color-bi-green-100, 5);
+@color-bi-sea-green-100: #3FB4AB;
+@color-bi-sea-green-90: fade(@color-bi-sea-green-100, 90);
+@color-bi-sea-green-80: fade(@color-bi-sea-green-100, 80);
+@color-bi-sea-green-60: fade(@color-bi-sea-green-100, 60);
+@color-bi-sea-green-50: fade(@color-bi-sea-green-100, 50);
+@color-bi-sea-green-40: fade(@color-bi-sea-green-100, 40);
+@color-bi-sea-green-30: fade(@color-bi-sea-green-100, 30);
+@color-bi-sea-green-20: fade(@color-bi-sea-green-100, 20);
+@color-bi-sea-green-10: fade(@color-bi-sea-green-100, 10);
+@color-bi-sea-green-5: fade(@color-bi-sea-green-100, 5);
 
 //blue
 @color-bi-blue-100: #3685f2;
+@color-bi-blue-90: fade(@color-bi-blue-100, 90);
 @color-bi-blue-80: fade(@color-bi-blue-100, 80);
 @color-bi-blue-60: fade(@color-bi-blue-100, 60);
+@color-bi-blue-50: fade(@color-bi-blue-100, 50);
 @color-bi-blue-40: fade(@color-bi-blue-100, 40);
 @color-bi-blue-30: fade(@color-bi-blue-100, 30);
 @color-bi-blue-20: fade(@color-bi-blue-100, 20);
@@ -52,19 +70,23 @@
 @color-bi-blue-5: fade(@color-bi-blue-100, 5);
 
 //light-blue
-@color-bi-light-blue-100: #eaf2fd;
-@color-bi-light-blue-80: fade(@color-bi-light-blue-100, 80);
-@color-bi-light-blue-60: fade(@color-bi-light-blue-100, 60);
-@color-bi-light-blue-40: fade(@color-bi-light-blue-100, 40);
-@color-bi-light-blue-30: fade(@color-bi-light-blue-100, 30);
-@color-bi-light-blue-20: fade(@color-bi-light-blue-100, 20);
-@color-bi-light-blue-10: fade(@color-bi-light-blue-100, 10);
-@color-bi-light-blue-5: fade(@color-bi-light-blue-100, 5);
+@color-bi-sky-blue-100: #eaf2fd;
+@color-bi-sky-blue-90: fade(@color-bi-sky-blue-100, 90);
+@color-bi-sky-blue-80: fade(@color-bi-sky-blue-100, 80);
+@color-bi-sky-blue-60: fade(@color-bi-sky-blue-100, 60);
+@color-bi-sky-blue-50: fade(@color-bi-sky-blue-100, 50);
+@color-bi-sky-blue-40: fade(@color-bi-sky-blue-100, 40);
+@color-bi-sky-blue-30: fade(@color-bi-sky-blue-100, 30);
+@color-bi-sky-blue-20: fade(@color-bi-sky-blue-100, 20);
+@color-bi-sky-blue-10: fade(@color-bi-sky-blue-100, 10);
+@color-bi-sky-blue-5: fade(@color-bi-sky-blue-100, 5);
 
 // orange
 @color-bi-orange-100: #faaa39;
+@color-bi-orange-90: fade(@color-bi-orange-100, 90);
 @color-bi-orange-80: fade(@color-bi-orange-100, 80);
 @color-bi-orange-60: fade(@color-bi-orange-100, 60);
+@color-bi-orange-50: fade(@color-bi-orange-100, 50);
 @color-bi-orange-40: fade(@color-bi-orange-100, 40);
 @color-bi-orange-30: fade(@color-bi-orange-100, 30);
 @color-bi-orange-20: fade(@color-bi-orange-100, 20);
@@ -73,8 +95,10 @@
 
 // red
 @color-bi-red-100: #e65251;
+@color-bi-red-90: fade(@color-bi-red-100, 90);
 @color-bi-red-80: fade(@color-bi-red-100, 80);
 @color-bi-red-60: fade(@color-bi-red-100, 60);
+@color-bi-red-50: fade(@color-bi-red-100, 50);
 @color-bi-red-40: fade(@color-bi-red-100, 40);
 @color-bi-red-30: fade(@color-bi-red-100, 30);
 @color-bi-red-20: fade(@color-bi-red-100, 20);
@@ -89,22 +113,68 @@
 @color-bi-yellow-20: fade(@font-color-yellow-100, 20);
 @color-bi-yellow-5: fade(@font-color-yellow-100, 5);
 
-//font color
-@font-color-black: #232e40;
+// black
+@color-bi-black-100: #232e40;
+@color-bi-black-90: fade(@color-bi-black-100, 90);
+@color-bi-black-80: fade(@color-bi-black-100, 80);
+@color-bi-black-60: fade(@color-bi-black-100, 60);
+@color-bi-black-50: fade(@color-bi-black-100, 50);
+@color-bi-black-40: fade(@color-bi-black-100, 40);
+@color-bi-black-30: fade(@color-bi-black-100, 30);
+@color-bi-black-20: fade(@color-bi-black-100, 20);
+@color-bi-black-10: fade(@color-bi-black-100, 10);
+@color-bi-black-5: fade(@color-bi-black-100, 5);
+
+// white
+@color-bi-white-100: #FFFFFF;
+@color-bi-white-90: fade(@color-bi-white-100, 90);
+@color-bi-white-80: fade(@color-bi-white-100, 80);
+@color-bi-white-60: fade(@color-bi-white-100, 60);
+@color-bi-white-50: fade(@color-bi-white-100, 50);
+@color-bi-white-40: fade(@color-bi-white-100, 40);
+@color-bi-white-30: fade(@color-bi-white-100, 30);
+@color-bi-white-20: fade(@color-bi-white-100, 20);
+@color-bi-white-10: fade(@color-bi-white-100, 10);
+@color-bi-white-5: fade(@color-bi-white-100, 5);
+
+@color-bi-black: @color-bi-black-100;
+@color-bi-black-theme-dark: #F7F9FC;
+@color-bi-state-gray: #2E3A4D;
+@color-bi-state-gray-theme-dark: #D6E0EC;
+@color-bi-light-state-gray: #647185;
+@color-bi-light-state-gray-theme-dark: #AFB7C6;
+@color-bi-dim-gray: #9EA6B2;
+@color-bi-dim-gray-theme-dark: #878d9f;
+@color-bi-gray: #C4C9D1;
+@color-bi-gray-theme-dark: #6B7084;
+@color-bi-dark-gray: #D0D4DA;
+@color-bi-dark-gray-theme-dark: #606479;
+@color-bi-sliver: #E7E8EB;
+@color-bi-sliver-theme-dark: #363E55;
+@color-bi-light-gray: #647185;
+@color-bi-light-gray-theme-dark: #afb7c6;
+@color-bi-gainsboro: #F5F6F9;
+@color-bi-gainsboro-theme-dark: #191F35;
+@color-bi-white: @color-bi-white-100;
+@color-bi-white-theme-dark: #20263B;
+
+
+  //font color
+@font-color-black: @color-bi-black;
 @font-color-normal: #3d4d66;
 @font-color-normal-theme-dark: #d6e0dc;
-@font-color-light-gray: #647185;
-@font-color-light-gray-theme-dark: #afb7c6;
-@font-color-disabled: #9ea6b2;
-@font-color-disabled-theme-dark: #878d9f;
-@font-color-tips: #9ea6b2;
-@font-color-tips-theme-dark: #6b7084;
-@font-color-light-disabled: #d0d4da;
-@font-color-light-disabled-theme-dark: #606479;
+@font-color-light-gray: @color-bi-light-gray;
+@font-color-light-gray-theme-dark: @color-bi-light-gray-theme-dark;
+@font-color-disabled: @color-bi-dim-gray;
+@font-color-disabled-theme-dark: @color-bi-dim-gray-theme-dark;
+@font-color-tips: @color-bi-dim-gray;
+@font-color-tips-theme-dark: @color-bi-gray-theme-dark;
+@font-color-light-disabled: @color-bi-dark-gray;
+@font-color-light-disabled-theme-dark: @color-bi-dark-gray-theme-dark;
 @font-color-gray: #999999;
-@font-color-white: #ffffff;
-@font-color-white-theme-dark: #20263b;
-@font-color-light-highlight: @color-bi-light-blue-100;
+@font-color-white: @color-bi-white;
+@font-color-white-theme-dark: @color-bi-white-theme-dark;
+@font-color-light-highlight: @color-bi-sky-blue-100;
 @font-color-medium-highlight: #d7e7fc;
 @font-color-highlight: @color-bi-blue-100;
 @font-color-blue: #23beef;
@@ -115,15 +185,15 @@
 @font-color-yellow: @font-color-yellow-100;
 
 //background color
-@background-color-black: #232E40;
-@background-color-black-theme-dark: #606479;
+@background-color-black: @color-bi-black;
+@background-color-black-theme-dark: @color-bi-dark-gray-theme-dark;
 @background-color-light-black: #3d4d66;
 @background-color-light-black-theme-dark: #d6e0dc;
-@background-color-default: #ffffff;
-@background-color-default-theme-dark: #20263b;
+@background-color-default: @color-bi-white;
+@background-color-default-theme-dark: @color-bi-white-theme-dark;
 @background-color-normal: #f7f8fa;
 @background-color-normal-theme-dark: #191b2b;
-@background-color-light-highlight: @color-bi-light-blue-100;
+@background-color-light-highlight: @color-bi-sky-blue-100;
 @background-color-medium-highlight: #d7e7fc;
 @background-color-highlight: @color-bi-blue-100;
 @background-color-blue: #23beef;
@@ -132,13 +202,13 @@
 @background-color-light-gray: #f2f4f7;
 @background-color-light-gray-theme-dark: #292f45;
 @background-color-medium-gray: #e8eaed;
-@background-color-medium-gray-theme-dark: #363e55;
-@background-color-dark-gray: #d0d4da;
-@background-color-dark-gray-theme-dark: #606479;
+@background-color-medium-gray-theme-dark: @color-bi-sliver-theme-dark;
+@background-color-dark-gray: @color-bi-dark-gray;
+@background-color-dark-gray-theme-dark: @color-bi-dark-gray-theme-dark;
 @background-color-disabled: #f2f4f7;
 @background-color-disabled-theme-dark: #292f45;
-@background-color-light-disabled: #9ea6b2;
-@background-color-light-disabled-theme-dark: #878d9f;
+@background-color-light-disabled: @color-bi-dim-gray;
+@background-color-light-disabled-theme-dark: @color-bi-dim-gray-theme-dark;
 @background-color-yellow: @font-color-yellow-100;
 
 @background-color-negative: @color-bi-red-100;
@@ -149,33 +219,33 @@
 
 @background-color-dark-success: @color-bi-green-100;
 @background-color-light-success: #e1f4e7;
-@background-color-normal-success: #647185;
+@background-color-normal-success: @color-bi-light-gray;
 
 //border color
-@border-color-default: #ffffff;
-@border-color-black: #232e40;
+@border-color-default: @color-bi-white;
+@border-color-black: @color-bi-black;
 @border-color-line: #e8eaed;
-@border-color-line-theme-dark: #363e55;
+@border-color-line-theme-dark: @color-bi-sliver-theme-dark;
 @border-color-light-line: #f2f4f7;
 @border-color-light-line-theme-dark: #292f45;
-@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-dark-gray-line: @color-bi-dark-gray;
+@border-color-dark-gray-line-theme-dark: @color-bi-dark-gray-theme-dark;
+@border-color-dark-line: @color-bi-dim-gray;
+@border-color-dark-line-theme-dark: @color-bi-dim-gray-theme-dark;
 @border-color-highlight: @color-bi-blue-100;
 
 @border-color-success: @color-bi-green-100;
 @border-color-warning: #fbb03b;
 @border-color-negative: @color-bi-red-100;
 @border-color-light-negative: #f4cbcb;
-@border-color-normal-success: #647185;
+@border-color-normal-success: @color-bi-light-gray;
 
 //split color
 @border-color-disabled: #e8eaed;
-@border-color-disabled-theme-dark: #363e55;
+@border-color-disabled-theme-dark: @color-bi-sliver-theme-dark;
 
 //scroll color
-@scroll-color: #232e40;
-@scroll-color-theme-dark: #ffffff;
-@scroll-thumb-color: #232e40;
-@scroll-thumb-color-theme-dark: #232e40;
+@scroll-color: @color-bi-black;
+@scroll-color-theme-dark: @color-bi-white;
+@scroll-thumb-color: @color-bi-black;
+@scroll-thumb-color-theme-dark: @color-bi-black;
diff --git a/src/less/lib/theme.less b/src/less/lib/theme.less
index 412fef77a..8019b219a 100644
--- a/src/less/lib/theme.less
+++ b/src/less/lib/theme.less
@@ -50,3 +50,42 @@
 @color-bi-text-card: @color-bi-text-normal;
 @color-bi-text-card-theme-dark: @color-bi-text-theme-dark;
 
+// 控件
+// 按钮
+@color-bi-border-button: @color-bi-border-highlight;
+@color-bi-background-button: @color-bi-background-highlight;
+// 单选按钮
+@color-bi-border-radio: @color-bi-border-dark-line;
+@color-bi-border-radio-theme-dark: @color-bi-border-dark-line-theme-dark;
+@color-bi-border-disabled-radio: @color-bi-border-disabled;
+@color-bi-border-disabled-radio-theme-dark: @color-bi-border-disabled-theme-dark;
+@color-bi-border-hover-active-radio: @color-bi-border-highlight;
+@color-bi-border-hover-active-radio-theme-dark: @color-bi-border-highlight;
+@color-bi-background-radio: @color-bi-background-default;
+@color-bi-background-disabled-radio: @color-bi-background-disabled;
+@color-bi-background-disabled-radio-theme-dark: @color-bi-background-disabled-theme-dark;
+@color-bi-background-disabled-active-radio: @color-bi-background-dark-gray;
+@color-bi-background-disabled-active-radio-theme-dark: @color-bi-background-dark-gray-theme-dark;
+// 复选按钮
+@color-bi-border-checkbox: @color-bi-border-dark-line;
+@color-bi-border-checkbox-theme-dark: @color-bi-border-dark-line-theme-dark;
+@color-bi-border-disabled-checkbox: @color-bi-border-disabled;
+@color-bi-border-disabled-checkbox-theme-dark: @color-bi-border-disabled-theme-dark;
+@color-bi-border-hover-active-checkbox: @color-bi-border-highlight;
+@color-bi-border-hover-active-checkbox-theme-dark: @color-bi-border-highlight;
+@color-bi-background-disabled-checkbox: @color-bi-background-disabled;
+@color-bi-background-disabled-checkbox-theme-dark: @color-bi-background-disabled-theme-dark;
+@color-bi-background-disabled-active-checkbox: @color-bi-background-dark-gray;
+@color-bi-background-disabled-active-checkbox-theme-dark: @color-bi-background-dark-gray-theme-dark;
+// 开关
+@color-bi-background-switch: @color-bi-background-dark-gray;
+@color-bi-background-switch-theme-dark: @color-bi-background-dark-gray-theme-dark;
+@color-bi-background-active-switch: @color-bi-background-highlight;
+@color-bi-background-active-switch-theme-dark: @color-bi-background-highlight;
+@color-bi-background-disabled-switch: @color-bi-background-disabled;
+@color-bi-background-disabled-switch-theme-dark: @color-bi-background-disabled-theme-dark;
+// 滑块
+@color-bi-background-slider-button: @color-bi-background-default;
+@color-bi-background-hover-slider-button: @color-bi-background-normal;
+@color-bi-border-disabled-slider-button: @color-bi-border-disabled;
+@color-bi-background-hover-disabled-slider-button: @color-bi-background-normal;
diff --git a/src/less/widget/singleslider/slider/widget.slider.less b/src/less/widget/singleslider/slider/widget.slider.less
index 745994c4c..a0f8559ca 100644
--- a/src/less/widget/singleslider/slider/widget.slider.less
+++ b/src/less/widget/singleslider/slider/widget.slider.less
@@ -6,23 +6,23 @@
     border-width: 2px;
     border-style: solid;
     .border-radius(8px);
-    background-color: @color-bi-background-default;
+    background-color: @color-bi-background-slider-button;
     height: 12px;
     width: 12px;
     top: 6px;
     left: -8px;
     &:hover, &.hover {
       .border-radius(10px);
-      background-color: @color-bi-background-normal;
+      background-color: @color-bi-background-hover-slider-button;
       width: 16px;
       height: 16px;
       top: 4px;
       left: -10px;
     }
     &.disabled {
-      border-color: @color-bi-border-disabled;
+      border-color: @color-bi-border-disabled-slider-button;
       &:hover, &.hover {
-        background-color: @color-bi-background-normal;
+        background-color: @color-bi-background-hover-disabled-slider-button;
         width: 12px;
         height: 12px;
         top: 6px;