diff --git a/docs/resource.css b/docs/resource.css
index e0f9d5b7f..31b5bfc81 100644
--- a/docs/resource.css
+++ b/docs/resource.css
@@ -120,6 +120,8 @@ textarea::-webkit-scrollbar-thumb {
   border-radius: 0;
   background-color: #7d7d7d;
 }
+/****** common color(常用颜色,可用于普遍场景) *****/
+/**** custom color(自定义颜色,用于特定场景) ****/
 .base-line-conn-background {
   background: url('icon/tree-vertical-line-1.png') repeat-y 0 0;
   _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon/tree-vertical-line-1.png');
@@ -959,37 +961,37 @@ textarea::-webkit-scrollbar-thumb {
 /**维度/指标 下拉列表图标字体 ~begin~**/
 .delete-font .b-font:before {
   content: "\e605";
-  color: #1a1a1a;
+  color: inherit;
 }
 .delete-font.native .b-font:before,
 .delete-font.disabled .b-font:before {
   content: "\e605";
-  color: #1a1a1a;
+  color: inherit;
 }
 .delete-h-font .b-font:before {
   content: "\e605";
-  color: #1a1a1a;
+  color: inherit;
 }
 .delete-h-font:hover .b-font:before,
 .delete-h-font:focus .b-font:before,
 .delete-h-font.hover .b-font:before {
   content: "\e605";
-  color: #1a1a1a;
+  color: inherit;
 }
 .delete-h-font.native .b-font:before,
 .delete-h-font.disabled .b-font:before {
   content: "\e605";
-  color: #1a1a1a;
+  color: inherit;
 }
 .delete-ha-font .b-font:before {
   content: "\e605";
-  color: #1a1a1a;
+  color: inherit;
 }
 .delete-ha-font:hover .b-font:before,
 .delete-ha-font:focus .b-font:before,
 .delete-ha-font.hover .b-font:before {
   content: "\e605";
-  color: #1a1a1a;
+  color: inherit;
 }
 .delete-ha-font:active .b-font:before,
 .delete-ha-font.active .b-font:before {
@@ -999,17 +1001,17 @@ textarea::-webkit-scrollbar-thumb {
 .delete-ha-font.native .b-font:before,
 .delete-ha-font.disabled .b-font:before {
   content: "\e605";
-  color: #1a1a1a;
+  color: inherit;
 }
 .delete-e-font .b-font:before {
   content: "\e605";
-  color: #1a1a1a;
+  color: inherit;
 }
 .delete-e-font:hover .b-font:before,
 .delete-e-font:focus .b-font:before,
 .delete-e-font.hover .b-font:before {
   content: "\e605";
-  color: #1a1a1a;
+  color: inherit;
 }
 .delete-e-font.active .b-font:before {
   content: "\e605";
@@ -1022,7 +1024,7 @@ textarea::-webkit-scrollbar-thumb {
 .delete-e-font.native .b-font:before,
 .delete-e-font.disabled .b-font:before {
   content: "\e605";
-  color: #1a1a1a;
+  color: inherit;
 }
 .dot-font .b-font:before {
   content: "\e606";
@@ -1041,7 +1043,7 @@ textarea::-webkit-scrollbar-thumb {
 .dot-h-font:focus .b-font:before,
 .dot-h-font.hover .b-font:before {
   content: "\e606";
-  color: #1a1a1a;
+  color: inherit;
 }
 .dot-h-font.native .b-font:before,
 .dot-h-font.disabled .b-font:before {
@@ -1093,37 +1095,37 @@ textarea::-webkit-scrollbar-thumb {
 }
 .pull-right-font .b-font:before {
   content: "\e607";
-  color: #1a1a1a;
+  color: inherit;
 }
 .pull-right-font.native .b-font:before,
 .pull-right-font.disabled .b-font:before {
   content: "\e607";
-  color: #1a1a1a;
+  color: inherit;
 }
 .pull-right-h-font .b-font:before {
   content: "\e607";
-  color: #1a1a1a;
+  color: inherit;
 }
 .pull-right-h-font:hover .b-font:before,
 .pull-right-h-font:focus .b-font:before,
 .pull-right-h-font.hover .b-font:before {
   content: "\e607";
-  color: #1a1a1a;
+  color: inherit;
 }
 .pull-right-h-font.native .b-font:before,
 .pull-right-h-font.disabled .b-font:before {
   content: "\e607";
-  color: #1a1a1a;
+  color: inherit;
 }
 .pull-right-ha-font .b-font:before {
   content: "\e607";
-  color: #1a1a1a;
+  color: inherit;
 }
 .pull-right-ha-font:hover .b-font:before,
 .pull-right-ha-font:focus .b-font:before,
 .pull-right-ha-font.hover .b-font:before {
   content: "\e607";
-  color: #1a1a1a;
+  color: inherit;
 }
 .pull-right-ha-font:active .b-font:before,
 .pull-right-ha-font.active .b-font:before {
@@ -1133,17 +1135,17 @@ textarea::-webkit-scrollbar-thumb {
 .pull-right-ha-font.native .b-font:before,
 .pull-right-ha-font.disabled .b-font:before {
   content: "\e607";
-  color: #1a1a1a;
+  color: inherit;
 }
 .pull-right-e-font .b-font:before {
   content: "\e607";
-  color: #1a1a1a;
+  color: inherit;
 }
 .pull-right-e-font:hover .b-font:before,
 .pull-right-e-font:focus .b-font:before,
 .pull-right-e-font.hover .b-font:before {
   content: "\e607";
-  color: #1a1a1a;
+  color: inherit;
 }
 .pull-right-e-font.active .b-font:before {
   content: "\e607";
@@ -1156,16 +1158,16 @@ textarea::-webkit-scrollbar-thumb {
 .pull-right-e-font.native .b-font:before,
 .pull-right-e-font.disabled .b-font:before {
   content: "\e607";
-  color: #1a1a1a;
+  color: inherit;
 }
 .copy-font .b-font:before {
   content: "\e610";
-  color: #1a1a1a;
+  color: inherit;
 }
 .copy-font.native .b-font:before,
 .copy-font.disabled .b-font:before {
   content: "\e610";
-  color: #1a1a1a;
+  color: inherit;
 }
 .copy-h-font .b-font:before {
   content: "\e610";
@@ -1175,7 +1177,7 @@ textarea::-webkit-scrollbar-thumb {
 .copy-h-font:focus .b-font:before,
 .copy-h-font.hover .b-font:before {
   content: "\e610";
-  color: #1a1a1a;
+  color: inherit;
 }
 .copy-h-font.native .b-font:before,
 .copy-h-font.disabled .b-font:before {
@@ -1184,13 +1186,13 @@ textarea::-webkit-scrollbar-thumb {
 }
 .copy-ha-font .b-font:before {
   content: "\e610";
-  color: #1a1a1a;
+  color: inherit;
 }
 .copy-ha-font:hover .b-font:before,
 .copy-ha-font:focus .b-font:before,
 .copy-ha-font.hover .b-font:before {
   content: "\e610";
-  color: #1a1a1a;
+  color: inherit;
 }
 .copy-ha-font:active .b-font:before,
 .copy-ha-font.active .b-font:before {
@@ -1200,17 +1202,17 @@ textarea::-webkit-scrollbar-thumb {
 .copy-ha-font.native .b-font:before,
 .copy-ha-font.disabled .b-font:before {
   content: "\e610";
-  color: #1a1a1a;
+  color: inherit;
 }
 .copy-e-font .b-font:before {
   content: "\e610";
-  color: #1a1a1a;
+  color: inherit;
 }
 .copy-e-font:hover .b-font:before,
 .copy-e-font:focus .b-font:before,
 .copy-e-font.hover .b-font:before {
   content: "\e610";
-  color: #1a1a1a;
+  color: inherit;
 }
 .copy-e-font.active .b-font:before {
   content: "\e610";
@@ -1223,41 +1225,41 @@ textarea::-webkit-scrollbar-thumb {
 .copy-e-font.native .b-font:before,
 .copy-e-font.disabled .b-font:before {
   content: "\e610";
-  color: #1a1a1a;
+  color: inherit;
 }
 .check-mark-font .b-font:before {
   content: "\e611";
-  color: #1a1a1a;
+  color: inherit;
 }
 .check-mark-font.native .b-font:before,
 .check-mark-font.disabled .b-font:before {
   content: "\e611";
-  color: #1a1a1a;
+  color: inherit;
 }
 .check-mark-h-font .b-font:before {
   content: "\e611";
-  color: #1a1a1a;
+  color: inherit;
 }
 .check-mark-h-font:hover .b-font:before,
 .check-mark-h-font:focus .b-font:before,
 .check-mark-h-font.hover .b-font:before {
   content: "\e611";
-  color: #1a1a1a;
+  color: inherit;
 }
 .check-mark-h-font.native .b-font:before,
 .check-mark-h-font.disabled .b-font:before {
   content: "\e611";
-  color: #1a1a1a;
+  color: inherit;
 }
 .check-mark-ha-font .b-font:before {
   content: "\e611";
-  color: #1a1a1a;
+  color: inherit;
 }
 .check-mark-ha-font:hover .b-font:before,
 .check-mark-ha-font:focus .b-font:before,
 .check-mark-ha-font.hover .b-font:before {
   content: "\e611";
-  color: #1a1a1a;
+  color: inherit;
 }
 .check-mark-ha-font:active .b-font:before,
 .check-mark-ha-font.active .b-font:before {
@@ -1267,17 +1269,17 @@ textarea::-webkit-scrollbar-thumb {
 .check-mark-ha-font.native .b-font:before,
 .check-mark-ha-font.disabled .b-font:before {
   content: "\e611";
-  color: #1a1a1a;
+  color: inherit;
 }
 .check-mark-e-font .b-font:before {
   content: "\e611";
-  color: #1a1a1a;
+  color: inherit;
 }
 .check-mark-e-font:hover .b-font:before,
 .check-mark-e-font:focus .b-font:before,
 .check-mark-e-font.hover .b-font:before {
   content: "\e611";
-  color: #1a1a1a;
+  color: inherit;
 }
 .check-mark-e-font.active .b-font:before {
   content: "\e611";
@@ -1290,41 +1292,41 @@ textarea::-webkit-scrollbar-thumb {
 .check-mark-e-font.native .b-font:before,
 .check-mark-e-font.disabled .b-font:before {
   content: "\e611";
-  color: #1a1a1a;
+  color: inherit;
 }
 .dimension-from-font .b-font:before {
   content: "\e612";
-  color: #1a1a1a;
+  color: inherit;
 }
 .dimension-from-font.native .b-font:before,
 .dimension-from-font.disabled .b-font:before {
   content: "\e612";
-  color: #1a1a1a;
+  color: inherit;
 }
 .dimension-from-h-font .b-font:before {
   content: "\e612";
-  color: #1a1a1a;
+  color: inherit;
 }
 .dimension-from-h-font:hover .b-font:before,
 .dimension-from-h-font:focus .b-font:before,
 .dimension-from-h-font.hover .b-font:before {
   content: "\e612";
-  color: #1a1a1a;
+  color: inherit;
 }
 .dimension-from-h-font.native .b-font:before,
 .dimension-from-h-font.disabled .b-font:before {
   content: "\e612";
-  color: #1a1a1a;
+  color: inherit;
 }
 .dimension-from-ha-font .b-font:before {
   content: "\e612";
-  color: #1a1a1a;
+  color: inherit;
 }
 .dimension-from-ha-font:hover .b-font:before,
 .dimension-from-ha-font:focus .b-font:before,
 .dimension-from-ha-font.hover .b-font:before {
   content: "\e612";
-  color: #1a1a1a;
+  color: inherit;
 }
 .dimension-from-ha-font:active .b-font:before,
 .dimension-from-ha-font.active .b-font:before {
@@ -1334,17 +1336,17 @@ textarea::-webkit-scrollbar-thumb {
 .dimension-from-ha-font.native .b-font:before,
 .dimension-from-ha-font.disabled .b-font:before {
   content: "\e612";
-  color: #1a1a1a;
+  color: inherit;
 }
 .dimension-from-e-font .b-font:before {
   content: "\e612";
-  color: #1a1a1a;
+  color: inherit;
 }
 .dimension-from-e-font:hover .b-font:before,
 .dimension-from-e-font:focus .b-font:before,
 .dimension-from-e-font.hover .b-font:before {
   content: "\e612";
-  color: #1a1a1a;
+  color: inherit;
 }
 .dimension-from-e-font.active .b-font:before {
   content: "\e612";
@@ -1357,41 +1359,41 @@ textarea::-webkit-scrollbar-thumb {
 .dimension-from-e-font.native .b-font:before,
 .dimension-from-e-font.disabled .b-font:before {
   content: "\e612";
-  color: #1a1a1a;
+  color: inherit;
 }
 .chart-type-font .b-font:before {
   content: "\e613";
-  color: #1a1a1a;
+  color: inherit;
 }
 .chart-type-font.native .b-font:before,
 .chart-type-font.disabled .b-font:before {
   content: "\e613";
-  color: #1a1a1a;
+  color: inherit;
 }
 .chart-type-h-font .b-font:before {
   content: "\e613";
-  color: #1a1a1a;
+  color: inherit;
 }
 .chart-type-h-font:hover .b-font:before,
 .chart-type-h-font:focus .b-font:before,
 .chart-type-h-font.hover .b-font:before {
   content: "\e613";
-  color: #1a1a1a;
+  color: inherit;
 }
 .chart-type-h-font.native .b-font:before,
 .chart-type-h-font.disabled .b-font:before {
   content: "\e613";
-  color: #1a1a1a;
+  color: inherit;
 }
 .chart-type-ha-font .b-font:before {
   content: "\e613";
-  color: #1a1a1a;
+  color: inherit;
 }
 .chart-type-ha-font:hover .b-font:before,
 .chart-type-ha-font:focus .b-font:before,
 .chart-type-ha-font.hover .b-font:before {
   content: "\e613";
-  color: #1a1a1a;
+  color: inherit;
 }
 .chart-type-ha-font:active .b-font:before,
 .chart-type-ha-font.active .b-font:before {
@@ -1401,17 +1403,17 @@ textarea::-webkit-scrollbar-thumb {
 .chart-type-ha-font.native .b-font:before,
 .chart-type-ha-font.disabled .b-font:before {
   content: "\e613";
-  color: #1a1a1a;
+  color: inherit;
 }
 .chart-type-e-font .b-font:before {
   content: "\e613";
-  color: #1a1a1a;
+  color: inherit;
 }
 .chart-type-e-font:hover .b-font:before,
 .chart-type-e-font:focus .b-font:before,
 .chart-type-e-font.hover .b-font:before {
   content: "\e613";
-  color: #1a1a1a;
+  color: inherit;
 }
 .chart-type-e-font.active .b-font:before {
   content: "\e613";
@@ -1424,41 +1426,41 @@ textarea::-webkit-scrollbar-thumb {
 .chart-type-e-font.native .b-font:before,
 .chart-type-e-font.disabled .b-font:before {
   content: "\e613";
-  color: #1a1a1a;
+  color: inherit;
 }
 .style-set-font .b-font:before {
   content: "\e60c";
-  color: #1a1a1a;
+  color: inherit;
 }
 .style-set-font.native .b-font:before,
 .style-set-font.disabled .b-font:before {
   content: "\e60c";
-  color: #1a1a1a;
+  color: inherit;
 }
 .style-set-h-font .b-font:before {
   content: "\e60c";
-  color: #1a1a1a;
+  color: inherit;
 }
 .style-set-h-font:hover .b-font:before,
 .style-set-h-font:focus .b-font:before,
 .style-set-h-font.hover .b-font:before {
   content: "\e60c";
-  color: #1a1a1a;
+  color: inherit;
 }
 .style-set-h-font.native .b-font:before,
 .style-set-h-font.disabled .b-font:before {
   content: "\e60c";
-  color: #1a1a1a;
+  color: inherit;
 }
 .style-set-ha-font .b-font:before {
   content: "\e60c";
-  color: #1a1a1a;
+  color: inherit;
 }
 .style-set-ha-font:hover .b-font:before,
 .style-set-ha-font:focus .b-font:before,
 .style-set-ha-font.hover .b-font:before {
   content: "\e60c";
-  color: #1a1a1a;
+  color: inherit;
 }
 .style-set-ha-font:active .b-font:before,
 .style-set-ha-font.active .b-font:before {
@@ -1468,17 +1470,17 @@ textarea::-webkit-scrollbar-thumb {
 .style-set-ha-font.native .b-font:before,
 .style-set-ha-font.disabled .b-font:before {
   content: "\e60c";
-  color: #1a1a1a;
+  color: inherit;
 }
 .style-set-e-font .b-font:before {
   content: "\e60c";
-  color: #1a1a1a;
+  color: inherit;
 }
 .style-set-e-font:hover .b-font:before,
 .style-set-e-font:focus .b-font:before,
 .style-set-e-font.hover .b-font:before {
   content: "\e60c";
-  color: #1a1a1a;
+  color: inherit;
 }
 .style-set-e-font.active .b-font:before {
   content: "\e60c";
@@ -1491,7 +1493,7 @@ textarea::-webkit-scrollbar-thumb {
 .style-set-e-font.native .b-font:before,
 .style-set-e-font.disabled .b-font:before {
   content: "\e60c";
-  color: #1a1a1a;
+  color: inherit;
 }
 .hyper-link-font .b-font:before {
   content: "\e688";
@@ -1513,28 +1515,28 @@ textarea::-webkit-scrollbar-thumb {
 }
 .filter-h-font .b-font:before {
   content: "\e60f";
-  color: #1a1a1a;
+  color: inherit;
 }
 .filter-h-font:hover .b-font:before,
 .filter-h-font:focus .b-font:before,
 .filter-h-font.hover .b-font:before {
   content: "\e60f";
-  color: #1a1a1a;
+  color: inherit;
 }
 .filter-h-font.native .b-font:before,
 .filter-h-font.disabled .b-font:before {
   content: "\e60f";
-  color: #1a1a1a;
+  color: inherit;
 }
 .filter-ha-font .b-font:before {
   content: "\e60f";
-  color: #1a1a1a;
+  color: inherit;
 }
 .filter-ha-font:hover .b-font:before,
 .filter-ha-font:focus .b-font:before,
 .filter-ha-font.hover .b-font:before {
   content: "\e60f";
-  color: #1a1a1a;
+  color: inherit;
 }
 .filter-ha-font:active .b-font:before,
 .filter-ha-font.active .b-font:before {
@@ -1544,17 +1546,17 @@ textarea::-webkit-scrollbar-thumb {
 .filter-ha-font.native .b-font:before,
 .filter-ha-font.disabled .b-font:before {
   content: "\e60f";
-  color: #1a1a1a;
+  color: inherit;
 }
 .filter-e-font .b-font:before {
   content: "\e60f";
-  color: #1a1a1a;
+  color: inherit;
 }
 .filter-e-font:hover .b-font:before,
 .filter-e-font:focus .b-font:before,
 .filter-e-font.hover .b-font:before {
   content: "\e60f";
-  color: #1a1a1a;
+  color: inherit;
 }
 .filter-e-font.active .b-font:before {
   content: "\e60f";
@@ -1567,7 +1569,7 @@ textarea::-webkit-scrollbar-thumb {
 .filter-e-font.native .b-font:before,
 .filter-e-font.disabled .b-font:before {
   content: "\e60f";
-  color: #1a1a1a;
+  color: inherit;
 }
 .classify-font .b-font:before {
   content: "\e694";
@@ -1700,63 +1702,63 @@ textarea::-webkit-scrollbar-thumb {
 }
 .row-pre-page-h-font .b-font:before {
   content: "\e6be";
-  color: #1a1a1a;
+  color: inherit;
 }
 .row-pre-page-h-font:hover .b-font:before,
 .row-pre-page-h-font:focus .b-font:before,
 .row-pre-page-h-font.hover .b-font:before {
   content: "\e6be";
-  color: #1a1a1a;
+  color: inherit;
 }
 .row-pre-page-h-font.native .b-font:before,
 .row-pre-page-h-font.disabled .b-font:before {
   content: "\e6be";
-  color: #1a1a1a;
+  color: inherit;
 }
 .row-next-page-h-font .b-font:before {
   content: "\e6bd";
-  color: #1a1a1a;
+  color: inherit;
 }
 .row-next-page-h-font:hover .b-font:before,
 .row-next-page-h-font:focus .b-font:before,
 .row-next-page-h-font.hover .b-font:before {
   content: "\e6bd";
-  color: #1a1a1a;
+  color: inherit;
 }
 .row-next-page-h-font.native .b-font:before,
 .row-next-page-h-font.disabled .b-font:before {
   content: "\e6bd";
-  color: #1a1a1a;
+  color: inherit;
 }
 .column-pre-page-h-font .b-font:before {
   content: "\e6bc";
-  color: #1a1a1a;
+  color: inherit;
 }
 .column-pre-page-h-font:hover .b-font:before,
 .column-pre-page-h-font:focus .b-font:before,
 .column-pre-page-h-font.hover .b-font:before {
   content: "\e6bc";
-  color: #1a1a1a;
+  color: inherit;
 }
 .column-pre-page-h-font.native .b-font:before,
 .column-pre-page-h-font.disabled .b-font:before {
   content: "\e6bc";
-  color: #1a1a1a;
+  color: inherit;
 }
 .column-next-page-h-font .b-font:before {
   content: "\e6bb";
-  color: #1a1a1a;
+  color: inherit;
 }
 .column-next-page-h-font:hover .b-font:before,
 .column-next-page-h-font:focus .b-font:before,
 .column-next-page-h-font.hover .b-font:before {
   content: "\e6bb";
-  color: #1a1a1a;
+  color: inherit;
 }
 .column-next-page-h-font.native .b-font:before,
 .column-next-page-h-font.disabled .b-font:before {
   content: "\e6bb";
-  color: #1a1a1a;
+  color: inherit;
 }
 .trigger-triangle-font .b-font:before {
   content: "\e66a";
@@ -2655,13 +2657,13 @@ textarea::-webkit-scrollbar-thumb {
 }
 .select-data-field-calc-font .b-font:before {
   content: "\e6a3";
-  color: #1a1a1a;
+  color: inherit;
 }
 .select-data-field-calc-font:hover .b-font:before,
 .select-data-field-calc-font:focus .b-font:before,
 .select-data-field-calc-font.hover .b-font:before {
   content: "\e6a3";
-  color: #1a1a1a;
+  color: inherit;
 }
 .select-data-field-calc-font:active .b-font:before,
 .select-data-field-calc-font.active .b-font:before {
@@ -2671,17 +2673,17 @@ textarea::-webkit-scrollbar-thumb {
 .select-data-field-calc-font.native .b-font:before,
 .select-data-field-calc-font.disabled .b-font:before {
   content: "\e6a3";
-  color: #1a1a1a;
+  color: inherit;
 }
 .select-data-field-string-font .b-font:before {
   content: "\e642";
-  color: #1a1a1a;
+  color: inherit;
 }
 .select-data-field-string-font:hover .b-font:before,
 .select-data-field-string-font:focus .b-font:before,
 .select-data-field-string-font.hover .b-font:before {
   content: "\e642";
-  color: #1a1a1a;
+  color: inherit;
 }
 .select-data-field-string-font:active .b-font:before,
 .select-data-field-string-font.active .b-font:before {
@@ -2691,17 +2693,17 @@ textarea::-webkit-scrollbar-thumb {
 .select-data-field-string-font.native .b-font:before,
 .select-data-field-string-font.disabled .b-font:before {
   content: "\e642";
-  color: #1a1a1a;
+  color: inherit;
 }
 .select-data-field-number-font .b-font:before {
   content: "\e641";
-  color: #1a1a1a;
+  color: inherit;
 }
 .select-data-field-number-font:hover .b-font:before,
 .select-data-field-number-font:focus .b-font:before,
 .select-data-field-number-font.hover .b-font:before {
   content: "\e641";
-  color: #1a1a1a;
+  color: inherit;
 }
 .select-data-field-number-font:active .b-font:before,
 .select-data-field-number-font.active .b-font:before {
@@ -2711,17 +2713,17 @@ textarea::-webkit-scrollbar-thumb {
 .select-data-field-number-font.native .b-font:before,
 .select-data-field-number-font.disabled .b-font:before {
   content: "\e641";
-  color: #1a1a1a;
+  color: inherit;
 }
 .select-data-field-date-font .b-font:before {
   content: "\e640";
-  color: #1a1a1a;
+  color: inherit;
 }
 .select-data-field-date-font:hover .b-font:before,
 .select-data-field-date-font:focus .b-font:before,
 .select-data-field-date-font.hover .b-font:before {
   content: "\e640";
-  color: #1a1a1a;
+  color: inherit;
 }
 .select-data-field-date-font:active .b-font:before,
 .select-data-field-date-font.active .b-font:before {
@@ -2731,7 +2733,7 @@ textarea::-webkit-scrollbar-thumb {
 .select-data-field-date-font.native .b-font:before,
 .select-data-field-date-font.disabled .b-font:before {
   content: "\e640";
-  color: #1a1a1a;
+  color: inherit;
 }
 .select-data-field-string-group-font .b-font:before {
   content: "\e642";
@@ -2905,84 +2907,84 @@ textarea::-webkit-scrollbar-thumb {
 }
 .text-bold-font .b-font:before {
   content: "\e64d";
-  color: #1a1a1a;
+  color: inherit;
 }
 .text-bold-font.native .b-font:before,
 .text-bold-font.disabled .b-font:before {
   content: "\e64d";
-  color: #1a1a1a;
+  color: inherit;
 }
 .text-italic-font .b-font:before {
   content: "\e656";
-  color: #1a1a1a;
+  color: inherit;
 }
 .text-italic-font.native .b-font:before,
 .text-italic-font.disabled .b-font:before {
   content: "\e656";
-  color: #1a1a1a;
+  color: inherit;
 }
 .text-underline-font .b-font:before {
   content: "\e650";
-  color: #1a1a1a;
+  color: inherit;
 }
 .text-underline-font.native .b-font:before,
 .text-underline-font.disabled .b-font:before {
   content: "\e650";
-  color: #1a1a1a;
+  color: inherit;
 }
 .text-color-font .b-font:before {
   content: "\e69c";
-  color: #1a1a1a;
+  color: inherit;
 }
 .text-color-font.native .b-font:before,
 .text-color-font.disabled .b-font:before {
   content: "\e69c";
-  color: #1a1a1a;
+  color: inherit;
 }
 .text-background-font .b-font:before {
   content: "\e696";
-  color: #1a1a1a;
+  color: inherit;
 }
 .text-background-font.native .b-font:before,
 .text-background-font.disabled .b-font:before {
   content: "\e696";
-  color: #1a1a1a;
+  color: inherit;
 }
 .text-color-underline-font .b-font:before {
   content: "\e69d";
-  color: "";
+  color: inherit;
 }
 .text-color-underline-font.native .b-font:before,
 .text-color-underline-font.disabled .b-font:before {
   content: "\e69d";
-  color: "";
+  color: inherit;
 }
 .text-align-left-font .b-font:before {
   content: "\e654";
-  color: #1a1a1a;
+  color: inherit;
 }
 .text-align-left-font.native .b-font:before,
 .text-align-left-font.disabled .b-font:before {
   content: "\e654";
-  color: #1a1a1a;
+  color: inherit;
 }
 .text-align-center-font .b-font:before {
   content: "\e64f";
-  color: #1a1a1a;
+  color: inherit;
 }
 .text-align-center-font.native .b-font:before,
 .text-align-center-font.disabled .b-font:before {
   content: "\e64f";
-  color: #1a1a1a;
+  color: inherit;
 }
 .text-align-right-font .b-font:before {
   content: "\e651";
-  color: #1a1a1a;
+  color: inherit;
 }
 .text-align-right-font.native .b-font:before,
 .text-align-right-font.disabled .b-font:before {
   content: "\e651";
-  color: #1a1a1a;
+  color: inherit;
 }
 .img-upload-font .b-font:before {
   content: "\e6ba";
@@ -3406,108 +3408,108 @@ textarea::-webkit-scrollbar-thumb {
 }
 .table-no-sort-no-filter-font .b-font:before {
   content: "\e66a";
-  color: "";
+  color: inherit;
 }
 .table-no-sort-no-filter-font:hover .b-font:before,
 .table-no-sort-no-filter-font:focus .b-font:before,
 .table-no-sort-no-filter-font.hover .b-font:before {
   content: "\e66a";
-  color: "";
+  color: inherit;
 }
 .table-no-sort-no-filter-font.native .b-font:before,
 .table-no-sort-no-filter-font.disabled .b-font:before {
   content: "\e66a";
-  color: "";
+  color: inherit;
 }
 .table-no-sort-filter-font .b-font:before {
   content: "\e66b";
-  color: "";
+  color: inherit;
 }
 .table-no-sort-filter-font:hover .b-font:before,
 .table-no-sort-filter-font:focus .b-font:before,
 .table-no-sort-filter-font.hover .b-font:before {
   content: "\e66b";
-  color: "";
+  color: inherit;
 }
 .table-no-sort-filter-font.native .b-font:before,
 .table-no-sort-filter-font.disabled .b-font:before {
   content: "\e66b";
-  color: "";
+  color: inherit;
 }
 .table-descending-filter-font .b-font:before {
   content: "\e667";
-  color: "";
+  color: inherit;
 }
 .table-descending-filter-font:hover .b-font:before,
 .table-descending-filter-font:focus .b-font:before,
 .table-descending-filter-font.hover .b-font:before {
   content: "\e667";
-  color: "";
+  color: inherit;
 }
 .table-descending-filter-font.native .b-font:before,
 .table-descending-filter-font.disabled .b-font:before {
   content: "\e667";
-  color: "";
+  color: inherit;
 }
 .table-ascending-filter-font .b-font:before {
   content: "\e669";
-  color: "";
+  color: inherit;
 }
 .table-ascending-filter-font:hover .b-font:before,
 .table-ascending-filter-font:focus .b-font:before,
 .table-ascending-filter-font.hover .b-font:before {
   content: "\e669";
-  color: "";
+  color: inherit;
 }
 .table-ascending-filter-font.native .b-font:before,
 .table-ascending-filter-font.disabled .b-font:before {
   content: "\e669";
-  color: "";
+  color: inherit;
 }
 .table-descending-no-filter-font .b-font:before {
   content: "\e666";
-  color: "";
+  color: inherit;
 }
 .table-descending-no-filter-font:hover .b-font:before,
 .table-descending-no-filter-font:focus .b-font:before,
 .table-descending-no-filter-font.hover .b-font:before {
   content: "\e666";
-  color: "";
+  color: inherit;
 }
 .table-descending-no-filter-font.native .b-font:before,
 .table-descending-no-filter-font.disabled .b-font:before {
   content: "\e666";
-  color: "";
+  color: inherit;
 }
 .table-ascending-no-filter-font .b-font:before {
   content: "\e668";
-  color: "";
+  color: inherit;
 }
 .table-ascending-no-filter-font:hover .b-font:before,
 .table-ascending-no-filter-font:focus .b-font:before,
 .table-ascending-no-filter-font.hover .b-font:before {
   content: "\e668";
-  color: "";
+  color: inherit;
 }
 .table-ascending-no-filter-font.native .b-font:before,
 .table-ascending-no-filter-font.disabled .b-font:before {
   content: "\e668";
-  color: "";
+  color: inherit;
 }
 .table-no-sort-font .b-font:before {
   content: "\e66c";
-  color: "";
+  color: inherit;
 }
 .table-no-sort-font:hover .b-font:before,
 .table-no-sort-font:focus .b-font:before,
 .table-no-sort-font.hover .b-font:before {
   content: "\e66c";
-  color: "";
+  color: inherit;
 }
 .table-no-sort-font.native .b-font:before,
 .table-no-sort-font.disabled .b-font:before {
   content: "\e66c";
-  color: "";
+  color: inherit;
 }
 .primary-key-font .b-font:before {
   content: "\e67d;";
@@ -3746,12 +3748,12 @@ textarea::-webkit-scrollbar-thumb {
 }
 .calculate-target-font .b-font:before {
   content: "\e6a3";
-  color: #1a1a1a;
+  color: inherit;
 }
 .calculate-target-font.native .b-font:before,
 .calculate-target-font.disabled .b-font:before {
   content: "\e6a3";
-  color: #1a1a1a;
+  color: inherit;
 }
 .task-list-font .b-font:before {
   content: "\e694";
@@ -3941,21 +3943,21 @@ textarea::-webkit-scrollbar-thumb {
 }
 .chart-drill-up .b-font:before {
   content: "\e6ad";
-  color: "";
+  color: inherit;
 }
 .chart-drill-up.native .b-font:before,
 .chart-drill-up.disabled .b-font:before {
   content: "\e6ad";
-  color: "";
+  color: inherit;
 }
 .chart-drill-down .b-font:before {
   content: "\e608";
-  color: "";
+  color: inherit;
 }
 .chart-drill-down.native .b-font:before,
 .chart-drill-down.disabled .b-font:before {
   content: "\e608";
-  color: "";
+  color: inherit;
 }
 .report-filter-open-font .b-font:before {
   content: "\e648";
@@ -4119,6 +4121,8 @@ textarea::-webkit-scrollbar-thumb {
   content: "\e600";
   color: #f07d0a;
 }
+/****** common color(常用颜色,可用于普遍场景) *****/
+/**** custom color(自定义颜色,用于特定场景) ****/
 .tree-collapse-icon-type1 .x-icon,
 .tree-collapse-icon-type1:hover .x-icon,
 .tree-collapse-icon-type1:active .x-icon {
diff --git a/src/css/resource/font.css b/src/css/resource/font.css
index a9cc42dd2..b9bf63d27 100644
--- a/src/css/resource/font.css
+++ b/src/css/resource/font.css
@@ -314,37 +314,37 @@
 /**维度/指标 下拉列表图标字体 ~begin~**/
 .delete-font .b-font:before {
   content: "\e605";
-  color: #1a1a1a;
+  color: inherit;
 }
 .delete-font.native .b-font:before,
 .delete-font.disabled .b-font:before {
   content: "\e605";
-  color: #1a1a1a;
+  color: inherit;
 }
 .delete-h-font .b-font:before {
   content: "\e605";
-  color: #1a1a1a;
+  color: inherit;
 }
 .delete-h-font:hover .b-font:before,
 .delete-h-font:focus .b-font:before,
 .delete-h-font.hover .b-font:before {
   content: "\e605";
-  color: #1a1a1a;
+  color: inherit;
 }
 .delete-h-font.native .b-font:before,
 .delete-h-font.disabled .b-font:before {
   content: "\e605";
-  color: #1a1a1a;
+  color: inherit;
 }
 .delete-ha-font .b-font:before {
   content: "\e605";
-  color: #1a1a1a;
+  color: inherit;
 }
 .delete-ha-font:hover .b-font:before,
 .delete-ha-font:focus .b-font:before,
 .delete-ha-font.hover .b-font:before {
   content: "\e605";
-  color: #1a1a1a;
+  color: inherit;
 }
 .delete-ha-font:active .b-font:before,
 .delete-ha-font.active .b-font:before {
@@ -354,17 +354,17 @@
 .delete-ha-font.native .b-font:before,
 .delete-ha-font.disabled .b-font:before {
   content: "\e605";
-  color: #1a1a1a;
+  color: inherit;
 }
 .delete-e-font .b-font:before {
   content: "\e605";
-  color: #1a1a1a;
+  color: inherit;
 }
 .delete-e-font:hover .b-font:before,
 .delete-e-font:focus .b-font:before,
 .delete-e-font.hover .b-font:before {
   content: "\e605";
-  color: #1a1a1a;
+  color: inherit;
 }
 .delete-e-font.active .b-font:before {
   content: "\e605";
@@ -377,7 +377,7 @@
 .delete-e-font.native .b-font:before,
 .delete-e-font.disabled .b-font:before {
   content: "\e605";
-  color: #1a1a1a;
+  color: inherit;
 }
 .dot-font .b-font:before {
   content: "\e606";
@@ -396,7 +396,7 @@
 .dot-h-font:focus .b-font:before,
 .dot-h-font.hover .b-font:before {
   content: "\e606";
-  color: #1a1a1a;
+  color: inherit;
 }
 .dot-h-font.native .b-font:before,
 .dot-h-font.disabled .b-font:before {
@@ -448,37 +448,37 @@
 }
 .pull-right-font .b-font:before {
   content: "\e607";
-  color: #1a1a1a;
+  color: inherit;
 }
 .pull-right-font.native .b-font:before,
 .pull-right-font.disabled .b-font:before {
   content: "\e607";
-  color: #1a1a1a;
+  color: inherit;
 }
 .pull-right-h-font .b-font:before {
   content: "\e607";
-  color: #1a1a1a;
+  color: inherit;
 }
 .pull-right-h-font:hover .b-font:before,
 .pull-right-h-font:focus .b-font:before,
 .pull-right-h-font.hover .b-font:before {
   content: "\e607";
-  color: #1a1a1a;
+  color: inherit;
 }
 .pull-right-h-font.native .b-font:before,
 .pull-right-h-font.disabled .b-font:before {
   content: "\e607";
-  color: #1a1a1a;
+  color: inherit;
 }
 .pull-right-ha-font .b-font:before {
   content: "\e607";
-  color: #1a1a1a;
+  color: inherit;
 }
 .pull-right-ha-font:hover .b-font:before,
 .pull-right-ha-font:focus .b-font:before,
 .pull-right-ha-font.hover .b-font:before {
   content: "\e607";
-  color: #1a1a1a;
+  color: inherit;
 }
 .pull-right-ha-font:active .b-font:before,
 .pull-right-ha-font.active .b-font:before {
@@ -488,17 +488,17 @@
 .pull-right-ha-font.native .b-font:before,
 .pull-right-ha-font.disabled .b-font:before {
   content: "\e607";
-  color: #1a1a1a;
+  color: inherit;
 }
 .pull-right-e-font .b-font:before {
   content: "\e607";
-  color: #1a1a1a;
+  color: inherit;
 }
 .pull-right-e-font:hover .b-font:before,
 .pull-right-e-font:focus .b-font:before,
 .pull-right-e-font.hover .b-font:before {
   content: "\e607";
-  color: #1a1a1a;
+  color: inherit;
 }
 .pull-right-e-font.active .b-font:before {
   content: "\e607";
@@ -511,16 +511,16 @@
 .pull-right-e-font.native .b-font:before,
 .pull-right-e-font.disabled .b-font:before {
   content: "\e607";
-  color: #1a1a1a;
+  color: inherit;
 }
 .copy-font .b-font:before {
   content: "\e610";
-  color: #1a1a1a;
+  color: inherit;
 }
 .copy-font.native .b-font:before,
 .copy-font.disabled .b-font:before {
   content: "\e610";
-  color: #1a1a1a;
+  color: inherit;
 }
 .copy-h-font .b-font:before {
   content: "\e610";
@@ -530,7 +530,7 @@
 .copy-h-font:focus .b-font:before,
 .copy-h-font.hover .b-font:before {
   content: "\e610";
-  color: #1a1a1a;
+  color: inherit;
 }
 .copy-h-font.native .b-font:before,
 .copy-h-font.disabled .b-font:before {
@@ -539,13 +539,13 @@
 }
 .copy-ha-font .b-font:before {
   content: "\e610";
-  color: #1a1a1a;
+  color: inherit;
 }
 .copy-ha-font:hover .b-font:before,
 .copy-ha-font:focus .b-font:before,
 .copy-ha-font.hover .b-font:before {
   content: "\e610";
-  color: #1a1a1a;
+  color: inherit;
 }
 .copy-ha-font:active .b-font:before,
 .copy-ha-font.active .b-font:before {
@@ -555,17 +555,17 @@
 .copy-ha-font.native .b-font:before,
 .copy-ha-font.disabled .b-font:before {
   content: "\e610";
-  color: #1a1a1a;
+  color: inherit;
 }
 .copy-e-font .b-font:before {
   content: "\e610";
-  color: #1a1a1a;
+  color: inherit;
 }
 .copy-e-font:hover .b-font:before,
 .copy-e-font:focus .b-font:before,
 .copy-e-font.hover .b-font:before {
   content: "\e610";
-  color: #1a1a1a;
+  color: inherit;
 }
 .copy-e-font.active .b-font:before {
   content: "\e610";
@@ -578,41 +578,41 @@
 .copy-e-font.native .b-font:before,
 .copy-e-font.disabled .b-font:before {
   content: "\e610";
-  color: #1a1a1a;
+  color: inherit;
 }
 .check-mark-font .b-font:before {
   content: "\e611";
-  color: #1a1a1a;
+  color: inherit;
 }
 .check-mark-font.native .b-font:before,
 .check-mark-font.disabled .b-font:before {
   content: "\e611";
-  color: #1a1a1a;
+  color: inherit;
 }
 .check-mark-h-font .b-font:before {
   content: "\e611";
-  color: #1a1a1a;
+  color: inherit;
 }
 .check-mark-h-font:hover .b-font:before,
 .check-mark-h-font:focus .b-font:before,
 .check-mark-h-font.hover .b-font:before {
   content: "\e611";
-  color: #1a1a1a;
+  color: inherit;
 }
 .check-mark-h-font.native .b-font:before,
 .check-mark-h-font.disabled .b-font:before {
   content: "\e611";
-  color: #1a1a1a;
+  color: inherit;
 }
 .check-mark-ha-font .b-font:before {
   content: "\e611";
-  color: #1a1a1a;
+  color: inherit;
 }
 .check-mark-ha-font:hover .b-font:before,
 .check-mark-ha-font:focus .b-font:before,
 .check-mark-ha-font.hover .b-font:before {
   content: "\e611";
-  color: #1a1a1a;
+  color: inherit;
 }
 .check-mark-ha-font:active .b-font:before,
 .check-mark-ha-font.active .b-font:before {
@@ -622,17 +622,17 @@
 .check-mark-ha-font.native .b-font:before,
 .check-mark-ha-font.disabled .b-font:before {
   content: "\e611";
-  color: #1a1a1a;
+  color: inherit;
 }
 .check-mark-e-font .b-font:before {
   content: "\e611";
-  color: #1a1a1a;
+  color: inherit;
 }
 .check-mark-e-font:hover .b-font:before,
 .check-mark-e-font:focus .b-font:before,
 .check-mark-e-font.hover .b-font:before {
   content: "\e611";
-  color: #1a1a1a;
+  color: inherit;
 }
 .check-mark-e-font.active .b-font:before {
   content: "\e611";
@@ -645,41 +645,41 @@
 .check-mark-e-font.native .b-font:before,
 .check-mark-e-font.disabled .b-font:before {
   content: "\e611";
-  color: #1a1a1a;
+  color: inherit;
 }
 .dimension-from-font .b-font:before {
   content: "\e612";
-  color: #1a1a1a;
+  color: inherit;
 }
 .dimension-from-font.native .b-font:before,
 .dimension-from-font.disabled .b-font:before {
   content: "\e612";
-  color: #1a1a1a;
+  color: inherit;
 }
 .dimension-from-h-font .b-font:before {
   content: "\e612";
-  color: #1a1a1a;
+  color: inherit;
 }
 .dimension-from-h-font:hover .b-font:before,
 .dimension-from-h-font:focus .b-font:before,
 .dimension-from-h-font.hover .b-font:before {
   content: "\e612";
-  color: #1a1a1a;
+  color: inherit;
 }
 .dimension-from-h-font.native .b-font:before,
 .dimension-from-h-font.disabled .b-font:before {
   content: "\e612";
-  color: #1a1a1a;
+  color: inherit;
 }
 .dimension-from-ha-font .b-font:before {
   content: "\e612";
-  color: #1a1a1a;
+  color: inherit;
 }
 .dimension-from-ha-font:hover .b-font:before,
 .dimension-from-ha-font:focus .b-font:before,
 .dimension-from-ha-font.hover .b-font:before {
   content: "\e612";
-  color: #1a1a1a;
+  color: inherit;
 }
 .dimension-from-ha-font:active .b-font:before,
 .dimension-from-ha-font.active .b-font:before {
@@ -689,17 +689,17 @@
 .dimension-from-ha-font.native .b-font:before,
 .dimension-from-ha-font.disabled .b-font:before {
   content: "\e612";
-  color: #1a1a1a;
+  color: inherit;
 }
 .dimension-from-e-font .b-font:before {
   content: "\e612";
-  color: #1a1a1a;
+  color: inherit;
 }
 .dimension-from-e-font:hover .b-font:before,
 .dimension-from-e-font:focus .b-font:before,
 .dimension-from-e-font.hover .b-font:before {
   content: "\e612";
-  color: #1a1a1a;
+  color: inherit;
 }
 .dimension-from-e-font.active .b-font:before {
   content: "\e612";
@@ -712,41 +712,41 @@
 .dimension-from-e-font.native .b-font:before,
 .dimension-from-e-font.disabled .b-font:before {
   content: "\e612";
-  color: #1a1a1a;
+  color: inherit;
 }
 .chart-type-font .b-font:before {
   content: "\e613";
-  color: #1a1a1a;
+  color: inherit;
 }
 .chart-type-font.native .b-font:before,
 .chart-type-font.disabled .b-font:before {
   content: "\e613";
-  color: #1a1a1a;
+  color: inherit;
 }
 .chart-type-h-font .b-font:before {
   content: "\e613";
-  color: #1a1a1a;
+  color: inherit;
 }
 .chart-type-h-font:hover .b-font:before,
 .chart-type-h-font:focus .b-font:before,
 .chart-type-h-font.hover .b-font:before {
   content: "\e613";
-  color: #1a1a1a;
+  color: inherit;
 }
 .chart-type-h-font.native .b-font:before,
 .chart-type-h-font.disabled .b-font:before {
   content: "\e613";
-  color: #1a1a1a;
+  color: inherit;
 }
 .chart-type-ha-font .b-font:before {
   content: "\e613";
-  color: #1a1a1a;
+  color: inherit;
 }
 .chart-type-ha-font:hover .b-font:before,
 .chart-type-ha-font:focus .b-font:before,
 .chart-type-ha-font.hover .b-font:before {
   content: "\e613";
-  color: #1a1a1a;
+  color: inherit;
 }
 .chart-type-ha-font:active .b-font:before,
 .chart-type-ha-font.active .b-font:before {
@@ -756,17 +756,17 @@
 .chart-type-ha-font.native .b-font:before,
 .chart-type-ha-font.disabled .b-font:before {
   content: "\e613";
-  color: #1a1a1a;
+  color: inherit;
 }
 .chart-type-e-font .b-font:before {
   content: "\e613";
-  color: #1a1a1a;
+  color: inherit;
 }
 .chart-type-e-font:hover .b-font:before,
 .chart-type-e-font:focus .b-font:before,
 .chart-type-e-font.hover .b-font:before {
   content: "\e613";
-  color: #1a1a1a;
+  color: inherit;
 }
 .chart-type-e-font.active .b-font:before {
   content: "\e613";
@@ -779,41 +779,41 @@
 .chart-type-e-font.native .b-font:before,
 .chart-type-e-font.disabled .b-font:before {
   content: "\e613";
-  color: #1a1a1a;
+  color: inherit;
 }
 .style-set-font .b-font:before {
   content: "\e60c";
-  color: #1a1a1a;
+  color: inherit;
 }
 .style-set-font.native .b-font:before,
 .style-set-font.disabled .b-font:before {
   content: "\e60c";
-  color: #1a1a1a;
+  color: inherit;
 }
 .style-set-h-font .b-font:before {
   content: "\e60c";
-  color: #1a1a1a;
+  color: inherit;
 }
 .style-set-h-font:hover .b-font:before,
 .style-set-h-font:focus .b-font:before,
 .style-set-h-font.hover .b-font:before {
   content: "\e60c";
-  color: #1a1a1a;
+  color: inherit;
 }
 .style-set-h-font.native .b-font:before,
 .style-set-h-font.disabled .b-font:before {
   content: "\e60c";
-  color: #1a1a1a;
+  color: inherit;
 }
 .style-set-ha-font .b-font:before {
   content: "\e60c";
-  color: #1a1a1a;
+  color: inherit;
 }
 .style-set-ha-font:hover .b-font:before,
 .style-set-ha-font:focus .b-font:before,
 .style-set-ha-font.hover .b-font:before {
   content: "\e60c";
-  color: #1a1a1a;
+  color: inherit;
 }
 .style-set-ha-font:active .b-font:before,
 .style-set-ha-font.active .b-font:before {
@@ -823,17 +823,17 @@
 .style-set-ha-font.native .b-font:before,
 .style-set-ha-font.disabled .b-font:before {
   content: "\e60c";
-  color: #1a1a1a;
+  color: inherit;
 }
 .style-set-e-font .b-font:before {
   content: "\e60c";
-  color: #1a1a1a;
+  color: inherit;
 }
 .style-set-e-font:hover .b-font:before,
 .style-set-e-font:focus .b-font:before,
 .style-set-e-font.hover .b-font:before {
   content: "\e60c";
-  color: #1a1a1a;
+  color: inherit;
 }
 .style-set-e-font.active .b-font:before {
   content: "\e60c";
@@ -846,7 +846,7 @@
 .style-set-e-font.native .b-font:before,
 .style-set-e-font.disabled .b-font:before {
   content: "\e60c";
-  color: #1a1a1a;
+  color: inherit;
 }
 .hyper-link-font .b-font:before {
   content: "\e688";
@@ -868,28 +868,28 @@
 }
 .filter-h-font .b-font:before {
   content: "\e60f";
-  color: #1a1a1a;
+  color: inherit;
 }
 .filter-h-font:hover .b-font:before,
 .filter-h-font:focus .b-font:before,
 .filter-h-font.hover .b-font:before {
   content: "\e60f";
-  color: #1a1a1a;
+  color: inherit;
 }
 .filter-h-font.native .b-font:before,
 .filter-h-font.disabled .b-font:before {
   content: "\e60f";
-  color: #1a1a1a;
+  color: inherit;
 }
 .filter-ha-font .b-font:before {
   content: "\e60f";
-  color: #1a1a1a;
+  color: inherit;
 }
 .filter-ha-font:hover .b-font:before,
 .filter-ha-font:focus .b-font:before,
 .filter-ha-font.hover .b-font:before {
   content: "\e60f";
-  color: #1a1a1a;
+  color: inherit;
 }
 .filter-ha-font:active .b-font:before,
 .filter-ha-font.active .b-font:before {
@@ -899,17 +899,17 @@
 .filter-ha-font.native .b-font:before,
 .filter-ha-font.disabled .b-font:before {
   content: "\e60f";
-  color: #1a1a1a;
+  color: inherit;
 }
 .filter-e-font .b-font:before {
   content: "\e60f";
-  color: #1a1a1a;
+  color: inherit;
 }
 .filter-e-font:hover .b-font:before,
 .filter-e-font:focus .b-font:before,
 .filter-e-font.hover .b-font:before {
   content: "\e60f";
-  color: #1a1a1a;
+  color: inherit;
 }
 .filter-e-font.active .b-font:before {
   content: "\e60f";
@@ -922,7 +922,7 @@
 .filter-e-font.native .b-font:before,
 .filter-e-font.disabled .b-font:before {
   content: "\e60f";
-  color: #1a1a1a;
+  color: inherit;
 }
 .classify-font .b-font:before {
   content: "\e694";
@@ -1055,63 +1055,63 @@
 }
 .row-pre-page-h-font .b-font:before {
   content: "\e6be";
-  color: #1a1a1a;
+  color: inherit;
 }
 .row-pre-page-h-font:hover .b-font:before,
 .row-pre-page-h-font:focus .b-font:before,
 .row-pre-page-h-font.hover .b-font:before {
   content: "\e6be";
-  color: #1a1a1a;
+  color: inherit;
 }
 .row-pre-page-h-font.native .b-font:before,
 .row-pre-page-h-font.disabled .b-font:before {
   content: "\e6be";
-  color: #1a1a1a;
+  color: inherit;
 }
 .row-next-page-h-font .b-font:before {
   content: "\e6bd";
-  color: #1a1a1a;
+  color: inherit;
 }
 .row-next-page-h-font:hover .b-font:before,
 .row-next-page-h-font:focus .b-font:before,
 .row-next-page-h-font.hover .b-font:before {
   content: "\e6bd";
-  color: #1a1a1a;
+  color: inherit;
 }
 .row-next-page-h-font.native .b-font:before,
 .row-next-page-h-font.disabled .b-font:before {
   content: "\e6bd";
-  color: #1a1a1a;
+  color: inherit;
 }
 .column-pre-page-h-font .b-font:before {
   content: "\e6bc";
-  color: #1a1a1a;
+  color: inherit;
 }
 .column-pre-page-h-font:hover .b-font:before,
 .column-pre-page-h-font:focus .b-font:before,
 .column-pre-page-h-font.hover .b-font:before {
   content: "\e6bc";
-  color: #1a1a1a;
+  color: inherit;
 }
 .column-pre-page-h-font.native .b-font:before,
 .column-pre-page-h-font.disabled .b-font:before {
   content: "\e6bc";
-  color: #1a1a1a;
+  color: inherit;
 }
 .column-next-page-h-font .b-font:before {
   content: "\e6bb";
-  color: #1a1a1a;
+  color: inherit;
 }
 .column-next-page-h-font:hover .b-font:before,
 .column-next-page-h-font:focus .b-font:before,
 .column-next-page-h-font.hover .b-font:before {
   content: "\e6bb";
-  color: #1a1a1a;
+  color: inherit;
 }
 .column-next-page-h-font.native .b-font:before,
 .column-next-page-h-font.disabled .b-font:before {
   content: "\e6bb";
-  color: #1a1a1a;
+  color: inherit;
 }
 .trigger-triangle-font .b-font:before {
   content: "\e66a";
@@ -2010,13 +2010,13 @@
 }
 .select-data-field-calc-font .b-font:before {
   content: "\e6a3";
-  color: #1a1a1a;
+  color: inherit;
 }
 .select-data-field-calc-font:hover .b-font:before,
 .select-data-field-calc-font:focus .b-font:before,
 .select-data-field-calc-font.hover .b-font:before {
   content: "\e6a3";
-  color: #1a1a1a;
+  color: inherit;
 }
 .select-data-field-calc-font:active .b-font:before,
 .select-data-field-calc-font.active .b-font:before {
@@ -2026,17 +2026,17 @@
 .select-data-field-calc-font.native .b-font:before,
 .select-data-field-calc-font.disabled .b-font:before {
   content: "\e6a3";
-  color: #1a1a1a;
+  color: inherit;
 }
 .select-data-field-string-font .b-font:before {
   content: "\e642";
-  color: #1a1a1a;
+  color: inherit;
 }
 .select-data-field-string-font:hover .b-font:before,
 .select-data-field-string-font:focus .b-font:before,
 .select-data-field-string-font.hover .b-font:before {
   content: "\e642";
-  color: #1a1a1a;
+  color: inherit;
 }
 .select-data-field-string-font:active .b-font:before,
 .select-data-field-string-font.active .b-font:before {
@@ -2046,17 +2046,17 @@
 .select-data-field-string-font.native .b-font:before,
 .select-data-field-string-font.disabled .b-font:before {
   content: "\e642";
-  color: #1a1a1a;
+  color: inherit;
 }
 .select-data-field-number-font .b-font:before {
   content: "\e641";
-  color: #1a1a1a;
+  color: inherit;
 }
 .select-data-field-number-font:hover .b-font:before,
 .select-data-field-number-font:focus .b-font:before,
 .select-data-field-number-font.hover .b-font:before {
   content: "\e641";
-  color: #1a1a1a;
+  color: inherit;
 }
 .select-data-field-number-font:active .b-font:before,
 .select-data-field-number-font.active .b-font:before {
@@ -2066,17 +2066,17 @@
 .select-data-field-number-font.native .b-font:before,
 .select-data-field-number-font.disabled .b-font:before {
   content: "\e641";
-  color: #1a1a1a;
+  color: inherit;
 }
 .select-data-field-date-font .b-font:before {
   content: "\e640";
-  color: #1a1a1a;
+  color: inherit;
 }
 .select-data-field-date-font:hover .b-font:before,
 .select-data-field-date-font:focus .b-font:before,
 .select-data-field-date-font.hover .b-font:before {
   content: "\e640";
-  color: #1a1a1a;
+  color: inherit;
 }
 .select-data-field-date-font:active .b-font:before,
 .select-data-field-date-font.active .b-font:before {
@@ -2086,7 +2086,7 @@
 .select-data-field-date-font.native .b-font:before,
 .select-data-field-date-font.disabled .b-font:before {
   content: "\e640";
-  color: #1a1a1a;
+  color: inherit;
 }
 .select-data-field-string-group-font .b-font:before {
   content: "\e642";
@@ -2260,84 +2260,84 @@
 }
 .text-bold-font .b-font:before {
   content: "\e64d";
-  color: #1a1a1a;
+  color: inherit;
 }
 .text-bold-font.native .b-font:before,
 .text-bold-font.disabled .b-font:before {
   content: "\e64d";
-  color: #1a1a1a;
+  color: inherit;
 }
 .text-italic-font .b-font:before {
   content: "\e656";
-  color: #1a1a1a;
+  color: inherit;
 }
 .text-italic-font.native .b-font:before,
 .text-italic-font.disabled .b-font:before {
   content: "\e656";
-  color: #1a1a1a;
+  color: inherit;
 }
 .text-underline-font .b-font:before {
   content: "\e650";
-  color: #1a1a1a;
+  color: inherit;
 }
 .text-underline-font.native .b-font:before,
 .text-underline-font.disabled .b-font:before {
   content: "\e650";
-  color: #1a1a1a;
+  color: inherit;
 }
 .text-color-font .b-font:before {
   content: "\e69c";
-  color: #1a1a1a;
+  color: inherit;
 }
 .text-color-font.native .b-font:before,
 .text-color-font.disabled .b-font:before {
   content: "\e69c";
-  color: #1a1a1a;
+  color: inherit;
 }
 .text-background-font .b-font:before {
   content: "\e696";
-  color: #1a1a1a;
+  color: inherit;
 }
 .text-background-font.native .b-font:before,
 .text-background-font.disabled .b-font:before {
   content: "\e696";
-  color: #1a1a1a;
+  color: inherit;
 }
 .text-color-underline-font .b-font:before {
   content: "\e69d";
-  color: "";
+  color: inherit;
 }
 .text-color-underline-font.native .b-font:before,
 .text-color-underline-font.disabled .b-font:before {
   content: "\e69d";
-  color: "";
+  color: inherit;
 }
 .text-align-left-font .b-font:before {
   content: "\e654";
-  color: #1a1a1a;
+  color: inherit;
 }
 .text-align-left-font.native .b-font:before,
 .text-align-left-font.disabled .b-font:before {
   content: "\e654";
-  color: #1a1a1a;
+  color: inherit;
 }
 .text-align-center-font .b-font:before {
   content: "\e64f";
-  color: #1a1a1a;
+  color: inherit;
 }
 .text-align-center-font.native .b-font:before,
 .text-align-center-font.disabled .b-font:before {
   content: "\e64f";
-  color: #1a1a1a;
+  color: inherit;
 }
 .text-align-right-font .b-font:before {
   content: "\e651";
-  color: #1a1a1a;
+  color: inherit;
 }
 .text-align-right-font.native .b-font:before,
 .text-align-right-font.disabled .b-font:before {
   content: "\e651";
-  color: #1a1a1a;
+  color: inherit;
 }
 .img-upload-font .b-font:before {
   content: "\e6ba";
@@ -2761,108 +2761,108 @@
 }
 .table-no-sort-no-filter-font .b-font:before {
   content: "\e66a";
-  color: "";
+  color: inherit;
 }
 .table-no-sort-no-filter-font:hover .b-font:before,
 .table-no-sort-no-filter-font:focus .b-font:before,
 .table-no-sort-no-filter-font.hover .b-font:before {
   content: "\e66a";
-  color: "";
+  color: inherit;
 }
 .table-no-sort-no-filter-font.native .b-font:before,
 .table-no-sort-no-filter-font.disabled .b-font:before {
   content: "\e66a";
-  color: "";
+  color: inherit;
 }
 .table-no-sort-filter-font .b-font:before {
   content: "\e66b";
-  color: "";
+  color: inherit;
 }
 .table-no-sort-filter-font:hover .b-font:before,
 .table-no-sort-filter-font:focus .b-font:before,
 .table-no-sort-filter-font.hover .b-font:before {
   content: "\e66b";
-  color: "";
+  color: inherit;
 }
 .table-no-sort-filter-font.native .b-font:before,
 .table-no-sort-filter-font.disabled .b-font:before {
   content: "\e66b";
-  color: "";
+  color: inherit;
 }
 .table-descending-filter-font .b-font:before {
   content: "\e667";
-  color: "";
+  color: inherit;
 }
 .table-descending-filter-font:hover .b-font:before,
 .table-descending-filter-font:focus .b-font:before,
 .table-descending-filter-font.hover .b-font:before {
   content: "\e667";
-  color: "";
+  color: inherit;
 }
 .table-descending-filter-font.native .b-font:before,
 .table-descending-filter-font.disabled .b-font:before {
   content: "\e667";
-  color: "";
+  color: inherit;
 }
 .table-ascending-filter-font .b-font:before {
   content: "\e669";
-  color: "";
+  color: inherit;
 }
 .table-ascending-filter-font:hover .b-font:before,
 .table-ascending-filter-font:focus .b-font:before,
 .table-ascending-filter-font.hover .b-font:before {
   content: "\e669";
-  color: "";
+  color: inherit;
 }
 .table-ascending-filter-font.native .b-font:before,
 .table-ascending-filter-font.disabled .b-font:before {
   content: "\e669";
-  color: "";
+  color: inherit;
 }
 .table-descending-no-filter-font .b-font:before {
   content: "\e666";
-  color: "";
+  color: inherit;
 }
 .table-descending-no-filter-font:hover .b-font:before,
 .table-descending-no-filter-font:focus .b-font:before,
 .table-descending-no-filter-font.hover .b-font:before {
   content: "\e666";
-  color: "";
+  color: inherit;
 }
 .table-descending-no-filter-font.native .b-font:before,
 .table-descending-no-filter-font.disabled .b-font:before {
   content: "\e666";
-  color: "";
+  color: inherit;
 }
 .table-ascending-no-filter-font .b-font:before {
   content: "\e668";
-  color: "";
+  color: inherit;
 }
 .table-ascending-no-filter-font:hover .b-font:before,
 .table-ascending-no-filter-font:focus .b-font:before,
 .table-ascending-no-filter-font.hover .b-font:before {
   content: "\e668";
-  color: "";
+  color: inherit;
 }
 .table-ascending-no-filter-font.native .b-font:before,
 .table-ascending-no-filter-font.disabled .b-font:before {
   content: "\e668";
-  color: "";
+  color: inherit;
 }
 .table-no-sort-font .b-font:before {
   content: "\e66c";
-  color: "";
+  color: inherit;
 }
 .table-no-sort-font:hover .b-font:before,
 .table-no-sort-font:focus .b-font:before,
 .table-no-sort-font.hover .b-font:before {
   content: "\e66c";
-  color: "";
+  color: inherit;
 }
 .table-no-sort-font.native .b-font:before,
 .table-no-sort-font.disabled .b-font:before {
   content: "\e66c";
-  color: "";
+  color: inherit;
 }
 .primary-key-font .b-font:before {
   content: "\e67d;";
@@ -3101,12 +3101,12 @@
 }
 .calculate-target-font .b-font:before {
   content: "\e6a3";
-  color: #1a1a1a;
+  color: inherit;
 }
 .calculate-target-font.native .b-font:before,
 .calculate-target-font.disabled .b-font:before {
   content: "\e6a3";
-  color: #1a1a1a;
+  color: inherit;
 }
 .task-list-font .b-font:before {
   content: "\e694";
@@ -3296,21 +3296,21 @@
 }
 .chart-drill-up .b-font:before {
   content: "\e6ad";
-  color: "";
+  color: inherit;
 }
 .chart-drill-up.native .b-font:before,
 .chart-drill-up.disabled .b-font:before {
   content: "\e6ad";
-  color: "";
+  color: inherit;
 }
 .chart-drill-down .b-font:before {
   content: "\e608";
-  color: "";
+  color: inherit;
 }
 .chart-drill-down.native .b-font:before,
 .chart-drill-down.disabled .b-font:before {
   content: "\e608";
-  color: "";
+  color: inherit;
 }
 .report-filter-open-font .b-font:before {
   content: "\e648";
diff --git a/src/less/resource/font.less b/src/less/resource/font.less
index e22ef19a0..fb2e07750 100644
--- a/src/less/resource/font.less
+++ b/src/less/resource/font.less
@@ -9,7 +9,7 @@
 .font-hover-active(close-ha-font, @font-cross);
 
 //搜索框中的带有hover后颜色变红的图标
-.font-hover(search-close-h-font, @font-cross, @color-bi-font-native, @color-bi-text-warning);
+.font-hover(search-close-h-font, @font-cross, inherit, @color-bi-text-warning);
 
 .font(trigger-font, @font-arrow-down);
 .font-hover(trigger-h-font, @font-arrow-down);
@@ -32,60 +32,60 @@
 
 /**维度/指标 下拉列表图标字体 ~begin~**/
 //删除
-.font(delete-font, @font-delete, @color-bi-text-black);
-.font-hover(delete-h-font, @font-delete, @color-bi-text-black, @color-bi-text-black);
-.font-hover-active(delete-ha-font, @font-delete, @color-bi-text-black, @color-bi-text-black, @color-bi-text-highlight);
-.font-effect(delete-e-font, @font-delete, @color-bi-text-black, @color-bi-text-black, @color-bi-text-highlight);
+.font(delete-font, @font-delete);
+.font-hover(delete-h-font, @font-delete);
+.font-hover-active(delete-ha-font, @font-delete);
+.font-effect(delete-e-font, @font-delete);
 //子菜单选中
 .font(dot-font, @font-dot, @color-bi-text-black);
-.font-hover(dot-h-font, @font-dot, @color-bi-text-black, @color-bi-text-black);
-.font-hover-active(dot-ha-font, @font-dot, @background-color-default, @color-bi-background-gray, @color-bi-text-black);
-.font-effect(dot-e-font, @font-dot, @background-color-default, @color-bi-background-gray, @color-bi-text-highlight, @color-bi-text-black);
+.font-hover(dot-h-font, @font-dot, @color-bi-text-black);
+.font-hover-active(dot-ha-font, @font-dot, @color-bi-text, @color-bi-background-gray, @color-bi-text-black);
+.font-effect(dot-e-font, @font-dot, @color-bi-text, @color-bi-background-gray, @color-bi-text-highlight, @color-bi-text-black);
 
 //向右展开子菜单
-.font(pull-right-font, @font-right-triangle, @color-bi-text-black);
-.font-hover(pull-right-h-font, @font-right-triangle, @color-bi-text-black, @color-bi-text-black);
-.font-hover-active(pull-right-ha-font, @font-right-triangle, @color-bi-text-black, @color-bi-text-black, @color-bi-text-highlight);
-.font-effect(pull-right-e-font, @font-right-triangle, @color-bi-text-black, @color-bi-text-black, @color-bi-text-highlight);
+.font(pull-right-font, @font-right-triangle);
+.font-hover(pull-right-h-font, @font-right-triangle);
+.font-hover-active(pull-right-ha-font, @font-right-triangle);
+.font-effect(pull-right-e-font, @font-right-triangle);
 
 //复制
-.font(copy-font, @font-copy, @color-bi-text-black);
-.font-hover(copy-h-font, @font-copy, @color-bi-text-black, @color-bi-text-black);
-.font-hover-active(copy-ha-font, @font-copy, @color-bi-text-black, @color-bi-text-black, @color-bi-text-highlight);
-.font-effect(copy-e-font, @font-copy, @color-bi-text-black, @color-bi-text-black, @color-bi-text-highlight);
+.font(copy-font, @font-copy);
+.font-hover(copy-h-font, @font-copy, @color-bi-text-black);
+.font-hover-active(copy-ha-font, @font-copy);
+.font-effect(copy-e-font, @font-copy);
 
 //选中的字段
-.font(check-mark-font, @font-check-mark, @color-bi-text-black);
-.font-hover(check-mark-h-font, @font-check-mark, @color-bi-text-black, @color-bi-text-black);
-.font-hover-active(check-mark-ha-font, @font-check-mark, @color-bi-text-black, @color-bi-text-black, @color-bi-text-highlight);
-.font-effect(check-mark-e-font, @font-check-mark, @color-bi-text-black, @color-bi-text-black, @color-bi-text-highlight);
+.font(check-mark-font, @font-check-mark);
+.font-hover(check-mark-h-font, @font-check-mark);
+.font-hover-active(check-mark-ha-font, @font-check-mark);
+.font-effect(check-mark-e-font, @font-check-mark);
 
 //指标来自
-.font(dimension-from-font, @font-dimension-from, @color-bi-text-black);
-.font-hover(dimension-from-h-font, @font-dimension-from, @color-bi-text-black, @color-bi-text-black);
-.font-hover-active(dimension-from-ha-font, @font-dimension-from, @color-bi-text-black, @color-bi-text-black, @color-bi-text-highlight);
-.font-effect(dimension-from-e-font, @font-dimension-from, @color-bi-text-black, @color-bi-text-black, @color-bi-text-highlight);
+.font(dimension-from-font, @font-dimension-from);
+.font-hover(dimension-from-h-font, @font-dimension-from);
+.font-hover-active(dimension-from-ha-font, @font-dimension-from);
+.font-effect(dimension-from-e-font, @font-dimension-from);
 
 //图表类型选择
-.font(chart-type-font, @font-chart-type, @color-bi-text-black);
-.font-hover(chart-type-h-font, @font-chart-type, @color-bi-text-black, @color-bi-text-black);
-.font-hover-active(chart-type-ha-font, @font-chart-type, @color-bi-text-black, @color-bi-text-black, @color-bi-text-highlight);
-.font-effect(chart-type-e-font, @font-chart-type, @color-bi-text-black, @color-bi-text-black, @color-bi-text-highlight);
+.font(chart-type-font, @font-chart-type);
+.font-hover(chart-type-h-font, @font-chart-type);
+.font-hover-active(chart-type-ha-font, @font-chart-type);
+.font-effect(chart-type-e-font, @font-chart-type);
 
 //样式设置
-.font(style-set-font, @font-style-set, @color-bi-text-black);
-.font-hover(style-set-h-font, @font-style-set, @color-bi-text-black, @color-bi-text-black);
-.font-hover-active(style-set-ha-font, @font-style-set, @color-bi-text-black, @color-bi-text-black, @color-bi-text-highlight);
-.font-effect(style-set-e-font, @font-style-set, @color-bi-text-black, @color-bi-text-black, @color-bi-text-highlight);
+.font(style-set-font, @font-style-set);
+.font-hover(style-set-h-font, @font-style-set);
+.font-hover-active(style-set-ha-font, @font-style-set);
+.font-effect(style-set-e-font, @font-style-set);
 
 //超级链接
 .font(hyper-link-font, @font-href);
 
 //过滤
 .font(filter-font, @font-filter);
-.font-hover(filter-h-font, @font-filter, @color-bi-text-black, @color-bi-text-black);
-.font-hover-active(filter-ha-font, @font-filter, @color-bi-text-black, @color-bi-text-black, @color-bi-text-highlight);
-.font-effect(filter-e-font, @font-filter, @color-bi-text-black, @color-bi-text-black, @color-bi-text-highlight);
+.font-hover(filter-h-font, @font-filter);
+.font-hover-active(filter-ha-font, @font-filter);
+.font-effect(filter-e-font, @font-filter);
 
 //维度过滤
 .font(classify-font, @font-classify, @color-bi-text-highlight);
@@ -107,10 +107,10 @@
 .font(tree-node-triangle-collapse-font, @font-right-triangle);
 
 //翻页按钮字体图标
-.font-hover(row-pre-page-h-font, @font-solid-left, @color-bi-text-black, @color-bi-text-black);
-.font-hover(row-next-page-h-font, @font-solid-right, @color-bi-text-black, @color-bi-text-black);
-.font-hover(column-pre-page-h-font, @font-solid-top, @color-bi-text-black, @color-bi-text-black);
-.font-hover(column-next-page-h-font, @font-solid-bottom, @color-bi-text-black, @color-bi-text-black);
+.font-hover(row-pre-page-h-font, @font-solid-left);
+.font-hover(row-next-page-h-font, @font-solid-right);
+.font-hover(column-pre-page-h-font, @font-solid-top);
+.font-hover(column-next-page-h-font, @font-solid-bottom);
 
 //下拉框小小三角
 .font-hover-active(trigger-triangle-font, @font-no-sort-no-filter, @color-bi-text-gray, @color-bi-text-gray, @color-bi-text-highlight);
@@ -183,10 +183,10 @@
 .font(move2group-add-font, @font-add, @color-bi-text-highlight);
 
 //选择字段
-.font-hover-active(select-data-field-calc-font, @font-field-calc, @color-bi-text-black, @color-bi-text-black, @color-bi-text);
-.font-hover-active(select-data-field-string-font, @font-field-string, @color-bi-text-black, @color-bi-text-black, @color-bi-text);
-.font-hover-active(select-data-field-number-font, @font-field-number, @color-bi-text-black, @color-bi-text-black, @color-bi-text);
-.font-hover-active(select-data-field-date-font, @font-field-date, @color-bi-text-black, @color-bi-text-black, @color-bi-text);
+.font-hover-active(select-data-field-calc-font, @font-field-calc, inherit, inherit, @color-bi-text);
+.font-hover-active(select-data-field-string-font, @font-field-string, inherit, inherit, @color-bi-text);
+.font-hover-active(select-data-field-number-font, @font-field-number, inherit, inherit, @color-bi-text);
+.font-hover-active(select-data-field-date-font, @font-field-date, inherit, inherit, @color-bi-text);
 .font(select-data-field-string-group-font, @font-field-string);
 .font(select-data-field-number-group-font, @font-field-number);
 .font(select-data-field-date-group-font, @font-field-date);
@@ -196,9 +196,9 @@
 .font-hover(detail-real-data-warning-font, @font-warning, @color-bi-text-redmark, @color-bi-text-redmark);
 
 //数据配置分组统计中的选择字段
-.font-hover-active(select-group-field-string-font, @font-field-string, @font-color-highlight, @font-color-highlight, @font-color-highlight);
-.font-hover-active(select-group-field-number-font, @font-field-number, @font-color-highlight, @font-color-highlight, @font-color-highlight);
-.font-hover-active(select-group-field-date-font, @font-field-date, @font-color-highlight, @font-color-highlight, @font-color-highlight);
+.font-hover-active(select-group-field-string-font, @font-field-string, @color-bi-text-highlight, @color-bi-text-highlight, @color-bi-text-highlight);
+.font-hover-active(select-group-field-number-font, @font-field-number, @color-bi-text-highlight, @color-bi-text-highlight, @color-bi-text-highlight);
+.font-hover-active(select-group-field-date-font, @font-field-date, @color-bi-text-highlight, @color-bi-text-highlight, @color-bi-text-highlight);
 
 //详细设置
 .font-hover(dashboard-widget-combo-detail-set-font, @font-detail-set);
@@ -209,15 +209,15 @@
 .font(sortable-font, @font-sortable);
 
 //文本控件
-.font(text-bold-font, @font-bold, @font-color-normal);
-.font(text-italic-font, @font-italic, @font-color-normal);
-.font(text-underline-font, @font-underline, @font-color-normal);
-.font(text-color-font, @font-color, @font-color-normal);
-.font(text-background-font, @font-background, @font-color-normal);
-.font(text-color-underline-font, @font-color-underline, "");
-.font(text-align-left-font, @font-align-left, @font-color-normal);
-.font(text-align-center-font, @font-align-center, @font-color-normal);
-.font(text-align-right-font, @font-align-right, @font-color-normal);
+.font(text-bold-font, @font-bold);
+.font(text-italic-font, @font-italic);
+.font(text-underline-font, @font-underline);
+.font(text-color-font, @font-color);
+.font(text-background-font, @font-background);
+.font(text-color-underline-font, @font-color-underline);
+.font(text-align-left-font, @font-align-left);
+.font(text-align-center-font, @font-align-center);
+.font(text-align-right-font, @font-align-right);
 
 //图片控件
 .font(img-upload-font, @font-upload, @icon-color-active);
@@ -246,12 +246,12 @@
 .font(refresh-table-font, @font-refresh);
 .font(recover-chart-font-hightlight, @font-recover-chart, @color-bi-text-highlight);
 
-.font-hover-active(tables-tile-view-font, @font-tile-view, @color-bi-font-native, @color-bi-font-hover, @color-bi-text);
-.font-hover-active(tables-relation-view-font, @font-relation-view, @color-bi-font-native, @color-bi-font-hover, @color-bi-text);
+.font-hover-active(tables-tile-view-font, @font-tile-view, inherit, inherit, @color-bi-text);
+.font-hover-active(tables-relation-view-font, @font-relation-view, inherit, inherit, @color-bi-text);
 
 .font(add-new-table-pull-down-font, @font-down, @color-bi-text);
 
-.font-hover-active(data-link-check-font, @font-check-mark, @color-bi-text, @color-bi-background-gray, @color-bi-font-active);
+.font-hover-active(data-link-check-font, @font-check-mark, @color-bi-text, @color-bi-background-gray, @color-bi-text-highlight);
 
 //点击编辑
 .font-hover(edit-set-font, @font-detail-set);
@@ -261,24 +261,24 @@
 .font-hover(data-config-font, @font-database, @color-bi-text, @color-bi-text);
 
 //切换文件夹视图
-.font-hover-active(folder-list-view, @font-classify, @color-bi-font-native, @color-bi-font-native, @color-bi-text);
-.font-hover-active(folder-card-view, @font-tile-view, @color-bi-font-native, @color-bi-font-native, @color-bi-text);
+.font-hover-active(folder-list-view, @font-classify, inherit, inherit, @color-bi-text);
+.font-hover-active(folder-card-view, @font-tile-view, inherit, inherit, @color-bi-text);
 
 .font-hover-active(item-check-font, @font-check-mark, @color-bi-text, @color-bi-background-gray, @color-bi-font-active);
 
 //表格上面的相关操作——升序、降序、不排序、过滤
-.font-hover(table-no-sort-no-filter-font, @font-no-sort-no-filter, "", "");
-.font-hover(table-no-sort-filter-font, @font-no-sort-filter, "", "");
-.font-hover(table-descending-filter-font, @font-descending-filter, "", "");
-.font-hover(table-ascending-filter-font, @font-ascending-filter, "", "");
-.font-hover(table-descending-no-filter-font, @font-descending-no-filter, "", "");
-.font-hover(table-ascending-no-filter-font, @font-ascending-no-filter, "", "");
-.font-hover(table-no-sort-font, @font-no-sort, "", "");
+.font-hover(table-no-sort-no-filter-font, @font-no-sort-no-filter);
+.font-hover(table-no-sort-filter-font, @font-no-sort-filter);
+.font-hover(table-descending-filter-font, @font-descending-filter);
+.font-hover(table-ascending-filter-font, @font-ascending-filter);
+.font-hover(table-descending-no-filter-font, @font-descending-no-filter);
+.font-hover(table-ascending-no-filter-font, @font-ascending-no-filter);
+.font-hover(table-no-sort-font, @font-no-sort);
 
-.font-hover(primary-key-font, @font-key, @color-bi-font-native, @color-bi-font-hover);
+.font-hover(primary-key-font, @font-key);
 
-.font-hover-active(table-open-row-style-font, @font-table-row-open, @color-bi-font-native, @color-bi-font-hover, @color-bi-font-active);
-.font-hover-active(table-open-col-style-font, @font-table-col-open, @color-bi-font-native, @color-bi-font-hover, @color-bi-font-active);
+.font-hover-active(table-open-row-style-font, @font-table-row-open);
+.font-hover-active(table-open-col-style-font, @font-table-col-open);
 
 //气泡图计算函数
 .font(calculate-function-font, @font-field-calc,  @font-color-normal);
@@ -309,7 +309,7 @@
 .font(target-style-equal-arrow-font, @font-mark-equal, @color-target-style-equal);
 .font(target-style-more-arrow-font, @font-mark-up-arrow, @color-target-style-more);
 
-.font(calculate-target-font, @font-field-calc, @color-bi-text-black);
+.font(calculate-target-font, @font-field-calc);
 
 .font(task-list-font, @font-classify, @color-bi-text-highlight);
 
@@ -334,13 +334,13 @@
 .font(widget-combo-des-font, @font-des);
 .font(widget-combo-clear-font, @font-clear);
 
-.font-hover(detail-table-popup-font, @font-hellip, @color-bi-font-native, @color-bi-font-active);
+.font-hover(detail-table-popup-font, @font-hellip, inherit, @color-bi-font-active);
 
-.font(chart-drill-up, @font-top-triangle, "");
-.font(chart-drill-down, @font-down-triangle, "");
+.font(chart-drill-up, @font-top-triangle);
+.font(chart-drill-down, @font-down-triangle);
 
-.font(report-filter-open-font, @font-report-filter-open, @color-bi-font-native);
-.font(report-filter-close-font, @font-report-filter-close, @color-bi-font-native);
+.font(report-filter-open-font, @font-report-filter-open);
+.font(report-filter-close-font, @font-report-filter-close);
 
 .font(report-apply-hangout-normal-font, @font-apply-hangout, @color-bi-text-gray);
 .font(report-apply-hangout-ing-font, @font-apply-hangout, @color-bi-text-highlight);