add

bi/base.css

@@ -6,9 +6,6 @@
   -webkit-box-shadow: 0px 0px 2px 1px #d4dadd inset;
   -moz-box-shadow: 0px 0px 2px 1px #d4dadd inset;
 }
-.bi-color-chooser-trigger .color-chooser-trigger-content.none-color {
-  background-image: url('data:image/svg+xml;utf8,<svg xmlns= "http://www.w3.org/2000/svg" width= "100%" height= "100%" ><line x1= "100%" y1= "0" x2= "0" y2= "100%" stroke= "#f07d0a" stroke-width= "2" /></svg>');
-}
 .bi-color-picker-button .color-picker-button-mask {
   border: 1px solid #1a1a1a;
 }

bi/case.js

@@ -3983,9 +3983,11 @@ BI.ColorChooserTrigger = BI.inherit(BI.Trigger, {
     setValue: function (color) {
         BI.ColorChooserTrigger.superclass.setValue.apply(this, arguments);
         if (color === "") {
-            this.colorContainer.element.css("background-color", "").addClass("none-color")
+            this.colorContainer.element.css("background-color", "").removeClass("trans-color-background").addClass("auto-color-background");
+        } else if (color === "transparent") {
+            this.colorContainer.element.css("background-color", "").removeClass("auto-color-background").addClass("trans-color-background")
         } else {
-            this.colorContainer.element.css({"background-color": color}).removeClass("none-color");
+            this.colorContainer.element.css({"background-color": color}).removeClass("auto-color-background").removeClass("trans-color-background");
         }
     }
 });

docs/base.css

@@ -6,9 +6,6 @@
   -webkit-box-shadow: 0px 0px 2px 1px #d4dadd inset;
   -moz-box-shadow: 0px 0px 2px 1px #d4dadd inset;
 }
-.bi-color-chooser-trigger .color-chooser-trigger-content.none-color {
-  background-image: url('data:image/svg+xml;utf8,<svg xmlns= "http://www.w3.org/2000/svg" width= "100%" height= "100%" ><line x1= "100%" y1= "0" x2= "0" y2= "100%" stroke= "#f07d0a" stroke-width= "2" /></svg>');
-}
 .bi-color-picker-button .color-picker-button-mask {
   border: 1px solid #1a1a1a;
 }

docs/case.js

@@ -3983,9 +3983,11 @@ BI.ColorChooserTrigger = BI.inherit(BI.Trigger, {
     setValue: function (color) {
         BI.ColorChooserTrigger.superclass.setValue.apply(this, arguments);
         if (color === "") {
-            this.colorContainer.element.css("background-color", "").addClass("none-color")
+            this.colorContainer.element.css("background-color", "").removeClass("trans-color-background").addClass("auto-color-background");
+        } else if (color === "transparent") {
+            this.colorContainer.element.css("background-color", "").removeClass("auto-color-background").addClass("trans-color-background")
         } else {
-            this.colorContainer.element.css({"background-color": color}).removeClass("none-color");
+            this.colorContainer.element.css({"background-color": color}).removeClass("auto-color-background").removeClass("trans-color-background");
         }
     }
 });

src/case/colorchooser/colorchooser.trigger.js

@@ -53,9 +53,11 @@ BI.ColorChooserTrigger = BI.inherit(BI.Trigger, {
     setValue: function (color) {
         BI.ColorChooserTrigger.superclass.setValue.apply(this, arguments);
         if (color === "") {
-            this.colorContainer.element.css("background-color", "").addClass("none-color")
+            this.colorContainer.element.css("background-color", "").removeClass("trans-color-background").addClass("auto-color-background");
+        } else if (color === "transparent") {
+            this.colorContainer.element.css("background-color", "").removeClass("auto-color-background").addClass("trans-color-background")
         } else {
-            this.colorContainer.element.css({"background-color": color}).removeClass("none-color");
+            this.colorContainer.element.css({"background-color": color}).removeClass("auto-color-background").removeClass("trans-color-background");
         }
     }
 });

src/css/base/colorchooser/colorchooser.trigger.css

@@ -6,6 +6,3 @@
   -webkit-box-shadow: 0px 0px 2px 1px #d4dadd inset;
   -moz-box-shadow: 0px 0px 2px 1px #d4dadd inset;
 }
-.bi-color-chooser-trigger .color-chooser-trigger-content.none-color {
-  background-image: url('data:image/svg+xml;utf8,<svg xmlns= "http://www.w3.org/2000/svg" width= "100%" height= "100%" ><line x1= "100%" y1= "0" x2= "0" y2= "100%" stroke= "#f07d0a" stroke-width= "2" /></svg>');
-}

src/css/resource/background.css

@@ -43,3 +43,13 @@
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon/loading.gif');
   _background: none;
 }
+.auto-color-background {
+  background: url('background/auto-color.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='background/auto-color.png');
+  _background: none;
+}
+.trans-color-background {
+  background: url('background/trans-color.png') no-repeat center center;
+  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='background/trans-color.png');
+  _background: none;
+}

src/less/base/colorchooser/colorchooser.trigger.less

@@ -1,11 +1,6 @@
 @import "../../bibase";
 
 .bi-color-chooser-trigger {
-  & .color-chooser-trigger-content {
-    &.none-color {
-      background-image: url('data:image/svg+xml;utf8,<svg xmlns= "http://www.w3.org/2000/svg" width= "100%" height= "100%" ><line x1= "100%" y1= "0" x2= "0" y2= "100%" stroke= "#f07d0a" stroke-width= "2" /></svg>')
-    }
-  }
   .border-radius(2px);
   .box-shadow(0px, 0px, 2px, 1px, @color-bi-background-dark, inset);
 }

src/less/lib/background.less

@@ -1 +1,3 @@
-@background-loading: "icon/loading.gif";
+@background-loading: "icon/loading.gif";
+@background-auto-color: "background/auto-color.png";
+@background-trans-color: "background/trans-color.png";

src/less/resource/background.less

@@ -6,7 +6,7 @@
   .imagePath(@icon-tree-vertical-line-1, 0, 0, repeat-y);
 }
 
-.bi-theme-dark{
+.bi-theme-dark {
   .base-line-conn-background {
     .imagePath(@icon-tree-vertical-line-1-theme-dark, 0, 0, repeat-y);
   }
@@ -16,7 +16,7 @@
   .imagePath(@icon-tree-vertical-line-2);
 }
 
-.bi-theme-dark{
+.bi-theme-dark {
   .first-line-conn-background {
     .imagePath(@icon-tree-vertical-line-2-theme-dark);
   }
@@ -26,7 +26,7 @@
   .imagePath(@icon-tree-vertical-line-3);
 }
 
-.bi-theme-dark{
+.bi-theme-dark {
   .mid-line-conn-background {
     .imagePath(@icon-tree-vertical-line-3-theme-dark);
   }
@@ -36,7 +36,7 @@
   .imagePath(@icon-tree-vertical-line-4);
 }
 
-.bi-theme-dark{
+.bi-theme-dark {
   .last-line-conn-background {
     .imagePath(@icon-tree-vertical-line-4-theme-dark);
   }
@@ -45,3 +45,11 @@
 .loading-background {
   .imagePath(@icon-loading);
 }
+
+.auto-color-background {
+  .imagePath(@background-auto-color);
+}
+
+.trans-color-background {
+  .imagePath(@background-trans-color);
+}