feat(theme): dynamic theme classes

src/components/theme.css

@@ -18592,45 +18592,59 @@ li.ant-select-tree-treenode-disabled > .ant-select-tree-node-content-wrapper:hov
   background: #009aff;
   box-shadow: 0 0 0 1px #1e075f;
 }
-.primary .theme-colored,
-.primary time {
-  color: #009aff !important;
-  fill: #009aff !important;
+.normal .theme-fill {
+  fill: #d9d9d9;
 }
-.info .theme-colored,
-.info time {
-  color: #009aff !important;
-  fill: #009aff !important;
+.normal time {
+  color: #d9d9d9;
 }
-.success .theme-colored,
-.success time {
-  color: #52c41a !important;
-  fill: #52c41a !important;
+.warning .theme-fill {
+  fill: #faad14;
 }
-.processing .theme-colored,
-.processing time {
-  color: #009aff !important;
-  fill: #009aff !important;
+.warning time {
+  color: #faad14;
 }
-.error .theme-colored,
-.error time {
-  color: #f5222d !important;
-  fill: #f5222d !important;
+.highlight .theme-fill {
+  fill: #f5222d;
 }
-.highlight .theme-colored,
 .highlight time {
-  color: #f5222d !important;
-  fill: #f5222d !important;
+  color: #f5222d;
 }
-.warning .theme-colored,
-.warning time {
-  color: #faad14 !important;
-  fill: #faad14 !important;
+.error .theme-fill {
+  fill: #f5222d;
 }
-.normal .theme-colored,
-.normal time {
-  color: #d9d9d9 !important;
-  fill: #d9d9d9 !important;
+.error time {
+  color: #f5222d;
+}
+.processing .theme-fill {
+  fill: #009aff;
+}
+.processing time {
+  color: #009aff;
+}
+.success .theme-fill {
+  fill: #52c41a;
+}
+.success time {
+  color: #52c41a;
+}
+.info .theme-fill {
+  fill: #009aff;
+}
+.info time {
+  color: #009aff;
+}
+.secondary .theme-fill {
+  fill: #1e075f;
+}
+.secondary time {
+  color: #1e075f;
+}
+.primary .theme-fill {
+  fill: #009aff;
+}
+.primary time {
+  color: #009aff;
 }
 .rrui__tooltip {
   z-index: 2000;

src/components/theme.less

@@ -3,6 +3,7 @@
 // -------- Colors -----------
 @blue-6 : #009aff;
 @primary-color : @blue-6;
+@secondary-color : #1e075f;
 @info-color : @blue-6;
 @success-color : @green-6;
 @processing-color : @blue-6;
@@ -213,7 +214,7 @@
 
 // Layout
 @layout-body-background : #f0f2f5;
-@layout-header-background : #1e075f;
+@layout-header-background : @secondary-color;
 @layout-footer-background : @layout-body-background;
 @layout-header-height : 64px;
 @layout-header-padding : 0 50px;
@@ -541,46 +542,22 @@
 }
 
 // Theme Colored
-.primary .theme-colored,
-.primary time {
-  color: @primary-color !important;
-  fill: @primary-color !important;
-}
-.info .theme-colored,
-.info time {
-  color: @info-color !important;
-  fill: @info-color !important;
-}
-.success .theme-colored,
-.success time {
-  color: @success-color !important;
-  fill: @success-color !important;
-}
-.processing .theme-colored,
-.processing time {
-  color: @processing-color !important;
-  fill: @processing-color !important;
-}
-.error .theme-colored,
-.error time {
-  color: @error-color !important;
-  fill: @error-color !important;
-}
-.highlight .theme-colored,
-.highlight time {
-  color: @highlight-color !important;
-  fill: @highlight-color !important;
-}
-.warning .theme-colored,
-.warning time {
-  color: @warning-color !important;
-  fill: @warning-color !important;
-}
-.normal .theme-colored,
-.normal time {
-  color: @normal-color !important;
-  fill: @normal-color !important;
+@theme-colors: primary, secondary, info, success, processing, error, highlight,
+  warning, normal;
+.loop(@i : length(@theme-colors)) when (@i > 0) {
+  @name: extract(@theme-colors, @i);
+  @theme-color: ~'@{@{name}-color}';
+  .@{name} {
+    .theme-fill {
+      fill: @theme-color;
+    }
+    time {
+      color: @theme-color;
+    }
+  }
+  .loop(@i - 1);
 }
+.loop();
 
 // Time Ago Tooltip
 .rrui__tooltip {