diff --git a/package.json b/package.json
index c8b3d5abe1..6767642fc8 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
     "build_artifacts": "bash scripts/ci/build-artifacts.sh",
     "analyze": "npm run ng-high-memory build -- --source-map",
     "analyze:view": "source-map-explorer src/dist/browser/*.js",
-    "site:gen": "node scripts/site/main init && ng-alain-plugin-theme -t=themeCss && ng-alain-plugin-theme -t=colorLess",
+    "site:gen": "node scripts/site/main init && ng-alain-plugin-theme -t=themeCss",
     "site:build": "npm run site:gen && ng b site && npm run site:ngsw && npm run site:minify && npm run site:sitemap && npm run site:helper",
     "site:helper": "bash scripts/ci/helper.sh",
     "site:minify": "node scripts/build/minify.js",
diff --git a/packages/abc/avatar-list/style/index.less b/packages/abc/avatar-list/style/index.less
index 7a93c5890a..b9fc6f35a4 100644
--- a/packages/abc/avatar-list/style/index.less
+++ b/packages/abc/avatar-list/style/index.less
@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @avatar-list-prefix: ~'.avatar-list';
 
 @{avatar-list-prefix} {
diff --git a/packages/abc/cell/style/index.less b/packages/abc/cell/style/index.less
index 96f7c4aa0f..2d24748f27 100644
--- a/packages/abc/cell/style/index.less
+++ b/packages/abc/cell/style/index.less
@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @cell-prefix: ~'.cell';
 
 @{cell-prefix} {
diff --git a/packages/abc/down-file/style/index.less b/packages/abc/down-file/style/index.less
index bd93ad92e6..82cd17a82f 100644
--- a/packages/abc/down-file/style/index.less
+++ b/packages/abc/down-file/style/index.less
@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @down-file-prefix: ~'.down-file';
 
 @{down-file-prefix} {
diff --git a/packages/abc/ellipsis/style/index.less b/packages/abc/ellipsis/style/index.less
index c0da5482da..5cdda67223 100644
--- a/packages/abc/ellipsis/style/index.less
+++ b/packages/abc/ellipsis/style/index.less
@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @ellipsis-prefix: ~'.ellipsis';
 
 ellipsis {
diff --git a/packages/abc/error-collect/style/index.less b/packages/abc/error-collect/style/index.less
index 4d07339645..b9076ada79 100644
--- a/packages/abc/error-collect/style/index.less
+++ b/packages/abc/error-collect/style/index.less
@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @error-collect-prefix: ~'.error-collect';
 
 @{error-collect-prefix} {
diff --git a/packages/abc/exception/style/index.less b/packages/abc/exception/style/index.less
index e93535054d..2b16709c93 100644
--- a/packages/abc/exception/style/index.less
+++ b/packages/abc/exception/style/index.less
@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @exception-prefix: ~'.exception';
 
 @{exception-prefix} {
diff --git a/packages/abc/footer-toolbar/style/index.less b/packages/abc/footer-toolbar/style/index.less
index 021064b996..d85ed64271 100644
--- a/packages/abc/footer-toolbar/style/index.less
+++ b/packages/abc/footer-toolbar/style/index.less
@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @footer-toolbar-prefix: ~'.footer-toolbar';
 
 @{footer-toolbar-prefix} {
diff --git a/packages/abc/full-content/style/index.less b/packages/abc/full-content/style/index.less
index 358b7245df..992087d852 100644
--- a/packages/abc/full-content/style/index.less
+++ b/packages/abc/full-content/style/index.less
@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @full-content-prefix: ~'.full-content';
 
 @{full-content-prefix} {
diff --git a/packages/abc/global-footer/style/index.less b/packages/abc/global-footer/style/index.less
index 5b6b07706f..a74d9d85fd 100644
--- a/packages/abc/global-footer/style/index.less
+++ b/packages/abc/global-footer/style/index.less
@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @global-footer-prefix: ~'.global-footer';
 
 @{global-footer-prefix} {
diff --git a/packages/abc/loading/style/index.less b/packages/abc/loading/style/index.less
index c417596235..ee322c5ccd 100644
--- a/packages/abc/loading/style/index.less
+++ b/packages/abc/loading/style/index.less
@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @loading-prefix: ~'.loading';
 
 @{loading-prefix} {
diff --git a/packages/abc/notice-icon/style/index.less b/packages/abc/notice-icon/style/index.less
index 09669758c2..465ce9bda6 100644
--- a/packages/abc/notice-icon/style/index.less
+++ b/packages/abc/notice-icon/style/index.less
@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @notice-icon-prefix: ~'.notice-icon';
 
 @{notice-icon-prefix} {
diff --git a/packages/abc/onboarding/style/index.less b/packages/abc/onboarding/style/index.less
index 5f368e8e23..7bcc4bef82 100644
--- a/packages/abc/onboarding/style/index.less
+++ b/packages/abc/onboarding/style/index.less
@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @onboarding-prefix: ~'.onboarding';
 
 @{onboarding-prefix} {
@@ -10,7 +9,6 @@
     position: fixed;
     z-index: @onboarding-zindex - 1;
     inset: 0;
-    opacity: @onboarding-mask-opacity;
     background-color: @onboarding-mask-background-color;
   }
 
@@ -26,7 +24,6 @@
     animation: @onboarding-light-ant;
 
     &-el {
-      // position: relative;
       z-index: @onboarding-zindex + 1 !important;
     }
 
diff --git a/packages/abc/page-header/style/index.less b/packages/abc/page-header/style/index.less
index 5f068f291c..837f718113 100644
--- a/packages/abc/page-header/style/index.less
+++ b/packages/abc/page-header/style/index.less
@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @page-header-prefix: ~'.page-header';
 
 @{page-header-prefix} {
diff --git a/packages/abc/pdf/style/index.less b/packages/abc/pdf/style/index.less
index 9c57955990..f328ad1933 100644
--- a/packages/abc/pdf/style/index.less
+++ b/packages/abc/pdf/style/index.less
@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @pdf-prefix: ~'.pdf';
 
 @{pdf-prefix} {
diff --git a/packages/abc/quick-menu/style/index.less b/packages/abc/quick-menu/style/index.less
index 6c26a3402b..55af9701b4 100644
--- a/packages/abc/quick-menu/style/index.less
+++ b/packages/abc/quick-menu/style/index.less
@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @quick-menu-prefix: ~'.quick-menu';
 
 @{quick-menu-prefix} {
diff --git a/packages/abc/result/style/index.less b/packages/abc/result/style/index.less
index 6a5907beb6..f313b4472f 100644
--- a/packages/abc/result/style/index.less
+++ b/packages/abc/result/style/index.less
@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @result-prefix: ~'.result';
 
 @{result-prefix} {
diff --git a/packages/abc/reuse-tab/style/index.less b/packages/abc/reuse-tab/style/index.less
index 0aa1570709..aed523fb33 100644
--- a/packages/abc/reuse-tab/style/index.less
+++ b/packages/abc/reuse-tab/style/index.less
@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @reuse-tab-prefix: ~'.reuse-tab';
 
 @{reuse-tab-prefix} {
diff --git a/packages/abc/se/style/index.less b/packages/abc/se/style/index.less
index 7940cadf0e..61bb55b2cf 100644
--- a/packages/abc/se/style/index.less
+++ b/packages/abc/se/style/index.less
@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @se-prefix: ~'.se';
 
 @{se-prefix} {
diff --git a/packages/abc/st/style/index.less b/packages/abc/st/style/index.less
index 89fe798974..89edc93d51 100644
--- a/packages/abc/st/style/index.less
+++ b/packages/abc/st/style/index.less
@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @st-prefix: ~'.st';
 
 @{st-prefix} {
diff --git a/packages/abc/sv/style/index.less b/packages/abc/sv/style/index.less
index 559883262d..fbd14f7e13 100644
--- a/packages/abc/sv/style/index.less
+++ b/packages/abc/sv/style/index.less
@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @sv-prefix: ~'.sv';
 
 @{sv-prefix} {
@@ -11,7 +10,7 @@
   &__container {
     display: block;
 
-    // offset the padding-bottom of last row
+    /** offset the padding-bottom of last row */
     .@{ant-prefix}-row {
       overflow: hidden;
       margin-bottom: -@sv-bottom;
@@ -52,7 +51,6 @@
 
   &__label {
     display: table-cell;
-    // margin-right: 8px;
     padding-bottom: @sv-bottom;
     line-height: 22px;
     color: @sv-label-color;
@@ -82,7 +80,7 @@
   }
 
   &__detail {
-    // contents 对 ie, edge 不支持，但对于子组件的支持会更友好
+    /** contents 对 ie, edge 不支持，但对于子组件的支持会更友好 */
     display: table-cell;
     width: 100%;
     padding-bottom: @sv-bottom;
@@ -160,7 +158,6 @@
     }
 
     &-text {
-      // font-weight: 700;
       font-size: @sv-value-default-value-font-size;
     }
 
diff --git a/packages/abc/tag-select/style/index.less b/packages/abc/tag-select/style/index.less
index 1bb35a5cae..e540a41721 100644
--- a/packages/abc/tag-select/style/index.less
+++ b/packages/abc/tag-select/style/index.less
@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @tag-select-prefix: ~'.tag-select';
 @tag-select-height: @tag-line-height + 2px; // 2px is top & bottom border width
 
diff --git a/packages/abc/theme-dark.less b/packages/abc/theme-dark.less
index 4d404f4ff1..1d1140f272 100644
--- a/packages/abc/theme-dark.less
+++ b/packages/abc/theme-dark.less
@@ -39,6 +39,5 @@
 
 // onboarding
 // --
-@onboarding-mask-opacity: 0.5;
 @onboarding-light-background-color: rgba(0, 0, 0, 0.1);
 @onboarding-light-ant-color: @component-background;
diff --git a/packages/abc/theme-default.less b/packages/abc/theme-default.less
index 2cf19fb2bc..0fee9fd49f 100644
--- a/packages/abc/theme-default.less
+++ b/packages/abc/theme-default.less
@@ -1,7 +1,7 @@
 // st
 // --
-@st-btn-disabled-color: rgba(0, 0, 0, 0.25);
-@st-title-optional-color: rgba(0, 0, 0, 0.35);
+@st-btn-disabled-color: fade(@black, 25%);
+@st-title-optional-color: fade(@black, 35%);
 @st-resizable-handle-width: 1px;
 @st-resizable-handle-height: 60%;
 @st-resizable-handle-color: @border-color-base;
@@ -9,8 +9,8 @@
 
 // sv
 // --
-@sv-label-color: rgba(0, 0, 0, 0.5);
-@sv-label-optional-color: rgba(0, 0, 0, 0.35);
+@sv-label-color: fade(@black, 50%);
+@sv-label-optional-color: fade(@black, 35%);
 @sv-detail-color: @text-color;
 @sv-type-primary-color: @primary-color;
 @sv-type-success-color: @success-color;
@@ -32,7 +32,7 @@
 
 // se
 // --
-@se-label-optional-color: rgba(0, 0, 0, 0.35);
+@se-label-optional-color: fade(@black, 35%);
 @se-compact-bottom: @layout-gutter;
 @se-optional-margin: 2px;
 
@@ -47,7 +47,7 @@
 // footer-toolbar
 // --
 @footer-toolbar-height: 56px;
-@footer-toolbar-box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.03);
+@footer-toolbar-box-shadow: 0 -1px 2px fade(@black, 3%);
 @footer-toolbar-bg: #fff;
 @footer-toolbar-border-top: 1px solid @border-color-split;
 @footer-toolbar-padding: 0 24px;
@@ -86,15 +86,14 @@
 // loading
 // --
 @loading-zindex: 9999;
-@loading-backdrop-bg: rgba(0, 0, 0, 0.15);
+@loading-backdrop-bg: fade(@black, 15%);
 @loading-icon-color: @primary-color;
 @loading-text-color: @primary-color;
 
 // onboarding
 // --
-@onboarding-mask-opacity: 0.5;
-@onboarding-mask-background-color: #000;
-@onboarding-light-background-color: rgba(255, 255, 255, 0.9);
+@onboarding-mask-background-color: fade(@black, 50%);
+@onboarding-light-background-color: fade(@white, 90%);
 @onboarding-light-ant: 2500ms cubic-bezier(0.55, 0.05, 0.6, 0.2) 0s infinite normal none running onboardingAnt;
 @onboarding-light-ant-color: rgb(255, 255, 255);
 @onboarding-changing-ant: all 0.3s ease-out;
diff --git a/packages/abc/theme-variable.less b/packages/abc/theme-variable.less
new file mode 100644
index 0000000000..f8a7cd7a39
--- /dev/null
+++ b/packages/abc/theme-variable.less
@@ -0,0 +1 @@
+@import './theme-default.less';
diff --git a/packages/chart/card/style/index.less b/packages/chart/card/style/index.less
index 1234f2cda3..d038cf13c4 100644
--- a/packages/chart/card/style/index.less
+++ b/packages/chart/card/style/index.less
@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @g2-card-prefix: ~'.g2-card';
 
 @{g2-card-prefix} {
diff --git a/packages/chart/mini-progress/style/index.less b/packages/chart/mini-progress/style/index.less
index 5c3bed1718..12fce5c444 100644
--- a/packages/chart/mini-progress/style/index.less
+++ b/packages/chart/mini-progress/style/index.less
@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @g2-mini-progress-prefix: ~'.g2-mini-progress';
 
 @{g2-mini-progress-prefix} {
diff --git a/packages/chart/number-info/style/index.less b/packages/chart/number-info/style/index.less
index 16fd91ffac..5ab3a07eb9 100644
--- a/packages/chart/number-info/style/index.less
+++ b/packages/chart/number-info/style/index.less
@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @number-info-prefix: ~'.number-info';
 
 @{number-info-prefix} {
diff --git a/packages/chart/pie/style/index.less b/packages/chart/pie/style/index.less
index 7d26205c4f..1a7de1684b 100644
--- a/packages/chart/pie/style/index.less
+++ b/packages/chart/pie/style/index.less
@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @g2-pie-prefix: ~'.g2-pie';
 
 @{g2-pie-prefix} {
diff --git a/packages/chart/radar/style/index.less b/packages/chart/radar/style/index.less
index 49ec30edd1..abc0bc2777 100644
--- a/packages/chart/radar/style/index.less
+++ b/packages/chart/radar/style/index.less
@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @g2-radar-prefix: ~'.g2-radar';
 
 @{g2-radar-prefix} {
diff --git a/packages/chart/trend/style/index.less b/packages/chart/trend/style/index.less
index 36a528cbf3..4c6bf7545b 100644
--- a/packages/chart/trend/style/index.less
+++ b/packages/chart/trend/style/index.less
@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @trend-prefix: ~'.trend';
 
 @{trend-prefix} {
diff --git a/packages/chart/water-wave/style/index.less b/packages/chart/water-wave/style/index.less
index 2e2a3e5989..3f6fb0822b 100644
--- a/packages/chart/water-wave/style/index.less
+++ b/packages/chart/water-wave/style/index.less
@@ -1,4 +1,3 @@
-@import '../../../theme/theme-default.less';
 @g2-water-wave-prefix: ~'.g2-water-wave';
 
 @{g2-water-wave-prefix} {
diff --git a/packages/theme/layout-blank/style/index.less b/packages/theme/layout-blank/style/index.less
index 04b2e2408b..81b7e08bb6 100644
--- a/packages/theme/layout-blank/style/index.less
+++ b/packages/theme/layout-blank/style/index.less
@@ -1,3 +1,2 @@
-@import './theme-default.less';
 @import './_layout.less';
 @import './fix/index.less';
diff --git a/packages/theme/layout-blank/style/theme-default.less b/packages/theme/layout-blank/style/theme-default.less
index e165e220c7..a828bd8e06 100644
--- a/packages/theme/layout-blank/style/theme-default.less
+++ b/packages/theme/layout-blank/style/theme-default.less
@@ -1,6 +1,9 @@
-@alain-blank-prefix: ~'.alain-blank';
-@alain-blank-zindex: @zindex-base;
+@alain-blank-name: 'alain-blank';
+@alain-blank-prefix: ~'.@{alain-blank-name}';
 
+@alain-blank-zindex: @zindex-base;
 @alain-blank-bg: #f5f7fa;
+// @alain-blank-bg: ~'var(--@{alain-blank-name}-bg, #f5f7fa)';
+
 @alain-blank-content-padding-vertical: 0;
 @alain-blank-content-padding-horizontal: @layout-gutter * 2;
diff --git a/packages/theme/layout-blank/style/theme-variable.less b/packages/theme/layout-blank/style/theme-variable.less
new file mode 100644
index 0000000000..f8a7cd7a39
--- /dev/null
+++ b/packages/theme/layout-blank/style/theme-variable.less
@@ -0,0 +1 @@
+@import './theme-default.less';
diff --git a/packages/theme/layout-default/style/index.less b/packages/theme/layout-default/style/index.less
index bb6d629a96..2146f0b7ca 100644
--- a/packages/theme/layout-default/style/index.less
+++ b/packages/theme/layout-default/style/index.less
@@ -1,4 +1,3 @@
-@import './theme-default.less';
 // Layout
 @import './_layout.less';
 @import './_header.less';
diff --git a/packages/theme/layout-default/style/theme-dark.less b/packages/theme/layout-default/style/theme-dark.less
index 50abf647b4..7054c90af1 100644
--- a/packages/theme/layout-default/style/theme-dark.less
+++ b/packages/theme/layout-default/style/theme-dark.less
@@ -7,4 +7,4 @@
 @alain-default-aside-nav-selected-bg: @component-background;
 @alain-default-content-heading-bg: @component-background;
 @alain-default-content-heading-border: @border-color-split;
-@alain-default-content-bg: @body-background;
+@alain-default-content-bg: ~'var(--@{alain-default-name}-content-bg, @{body-background})';
diff --git a/packages/theme/layout-default/style/theme-default.less b/packages/theme/layout-default/style/theme-default.less
index 3da8b5c658..f9db4029eb 100644
--- a/packages/theme/layout-default/style/theme-default.less
+++ b/packages/theme/layout-default/style/theme-default.less
@@ -1,7 +1,8 @@
-@alain-default-prefix: ~'.alain-default';
+@alain-default-name: 'alain-default';
+@alain-default-prefix: ~'.@{alain-default-name}';
 @alain-default-zindex: @zindex-base;
 @alain-default-ease: cubic-bezier(0.25, 0, 0.15, 1);
-@alain-default-header-hg: 64px;
+@alain-default-header-hg: ~'var(--@{alain-default-name}-header-hg, 64px)';
 @alain-default-header-bg: @primary-color;
 @alain-default-header-padding: @layout-gutter * 2;
 @alain-default-header-search-enabled: true;
@@ -13,7 +14,7 @@
 @alain-default-header-top-menu-item-padding: 0 16px;
 
 @alain-default-aside-wd: 200px;
-@alain-default-aside-bg: #fff;
+@alain-default-aside-bg: ~'var(--@{alain-default-name}-aside-bg, #fff)';
 @alain-default-aside-scrollbar-width: 0;
 @alain-default-aside-scrollbar-height: 0;
 @alain-default-aside-scrollbar-track-color: transparent;
@@ -28,7 +29,7 @@
 @alain-default-aside-nav-text-hover-color: @primary-color;
 @alain-default-aside-nav-group-text-color: @text-color-secondary;
 @alain-default-aside-nav-selected-text-color: @primary-color;
-@alain-default-aside-nav-selected-bg: #fcfcfc;
+@alain-default-aside-nav-selected-bg: ~'var(--@{alain-default-name}-aside-nav-selected-bg, #fcfcfc)';
 @alain-default-aside-nav-depth1-padding-left: @layout-gutter * 3;
 @alain-default-aside-nav-depth2-padding-left: @layout-gutter * 4;
 @alain-default-aside-nav-depth3-padding-left: @layout-gutter * 5;
@@ -40,10 +41,10 @@
 @alain-default-aside-collapsed-nav-img-wh: 24px;
 @alain-default-aside-collapsed-padding: (@layout-gutter * 2) 0;
 
-@alain-default-content-heading-bg: #fafbfc;
-@alain-default-content-heading-border: #efe3e5;
+@alain-default-content-heading-bg: ~'var(--@{alain-default-name}-heading-bg, #fafbfc)';
+@alain-default-content-heading-border: ~'var(--@{alain-default-name}-heading-border, #efe3e5)';
 @alain-default-content-padding: @layout-gutter * 3;
-@alain-default-content-bg: #f5f7fa;
+@alain-default-content-bg: ~'var(--@{alain-default-name}-content-bg, #f5f7fa)';
 
 @alain-default-widget-app-icons-enabled: true;
 @alain-default-aside-user-enabled: true;
diff --git a/packages/theme/layout-default/style/theme-variable.less b/packages/theme/layout-default/style/theme-variable.less
new file mode 100644
index 0000000000..f8a7cd7a39
--- /dev/null
+++ b/packages/theme/layout-default/style/theme-variable.less
@@ -0,0 +1 @@
+@import './theme-default.less';
diff --git a/packages/theme/mixins.less b/packages/theme/mixins.less
new file mode 100644
index 0000000000..046e54cf1a
--- /dev/null
+++ b/packages/theme/mixins.less
@@ -0,0 +1,2 @@
+@import 'ng-zorro-antd/src/style/mixins/index.less';
+@import './system/mixins/index.less';
diff --git a/packages/theme/system/entry.less b/packages/theme/system/entry.less
index 872594edda..0b085d802b 100644
--- a/packages/theme/system/entry.less
+++ b/packages/theme/system/entry.less
@@ -1,5 +1,3 @@
-@import './theme-default.less';
-
 // Angular
 @import './ng/index.less';
 
diff --git a/packages/theme/system/index.less b/packages/theme/system/index.less
index 82e94d57bc..239cfc156a 100644
--- a/packages/theme/system/index.less
+++ b/packages/theme/system/index.less
@@ -1,6 +1,9 @@
-// antd: base
+/** antd: base */
 @import 'ng-zorro-antd/style/entry.less';
-// antd: all components
+
+/** antd: all components */
 @import 'ng-zorro-antd/components.less';
-// system
+
+/** system */
+@import './mixins/index.less';
 @import './entry.less';
diff --git a/packages/theme/system/theme-default.less b/packages/theme/system/theme-default.less
index f25b00397a..7d09a9e20e 100644
--- a/packages/theme/system/theme-default.less
+++ b/packages/theme/system/theme-default.less
@@ -1,22 +1,19 @@
-@import 'ng-zorro-antd/src/style/mixins/index.less';
-@import './mixins/index.less';
-
 @root-entry-name: default;
 
-@white:     #fff;
-@black:     #000;
-
 // grey
 @grey-1:  #ffffff;
 @grey-2:  #fafafa;
 @grey-3:  #f5f5f5;
-@grey-4:  #e8e8e8;
+@grey-4:  #f0f0f0;
 @grey-5:  #d9d9d9;
 @grey-6:  #bfbfbf;
 @grey-7:  #8c8c8c;
 @grey-8:  #595959;
-@grey-9:  #262626;
-@grey-10: #000000;
+@grey-9:  #434343;
+@grey-10: #262626;
+@grey-11: #1f1f1f;
+@grey-12: #141414;
+@grey-13: #000000;
 
 @color-light-index:      5;
 @color-basic-index:      6;
@@ -137,23 +134,18 @@
 
 @muted-color:  @grey-7;
 
-// Colors
-@white:     #fff;
-@black:     #000;
-
 // scrollbar
 @scrollbar-enabled:         true;
 @scrollbar-width:           6px;
 @scrollbar-height:          6px;
-@scrollbar-track-color:     rgba(0, 0, 0, 0.3);
+@scrollbar-track-color:     fade(@black, 30%);
 @scrollbar-thumb-color:     transparent;
 @scrollbar-table-enabled:   false;
 
 // type
 // ==========
 
-// font-size
-// https://ant.design/docs/spec/font-cn#字号
+/** font-size https://ant.design/docs/spec/font-cn#字号 */
 @font-size-large:         @font-size-base + 8;  // 20px
 @font-size-small:         @font-size-base;      // 12px
 
@@ -167,8 +159,8 @@
 @enable-all-colors:           false;
 
 // Code
-@code-border-color:           #eee;
-@code-bg:                     #f7f7f7;
+@code-border-color:       @border-color-base;
+@code-bg:                 @tag-default-bg;
 
 @drawer-xl: 1200px;
 @drawer-lg: 900px;
@@ -208,22 +200,22 @@
 @nz-table-rep-max-width: @mobile-max;
 @nz-table-rep-min-width: @nz-table-rep-max-width + 1;
 @nz-table-rep-header-background: @border-color-split;
-@nz-table-rep-even-background: #f9f9f9;
+@nz-table-rep-even-background: @item-hover-bg;
 @nz-table-rep-padding-vertical: (@table-padding-vertical / 2);
 @nz-table-rep-padding-horizontal: (@table-padding-horizontal / 2);
 @nz-table-rep-column-name-width: 100px;
 @nz-table-rep-column-name-text-align: right;
 @nz-table-rep-column-name-padding-right: 8px;
-@nz-table-rep-column-name-color: rgba(0, 0, 0, 0.5);
+@nz-table-rep-column-name-color: fade(@black, 50%);
 
 // Forced to turn off Modal animation
 @forced-turn-off-nz-modal-animation-enabled: false;
 
 @sf-title-text-align: left;
-@sf-optional-color: rgba(0, 0, 0, 0.35);
+@sf-optional-color: fade(@black, 35%);
 @sf-optional-margin: 2px;
 @sf-inline-ant-select-min-width: 100px;
-@sf-widget-array-type-card-remove-bg: rgba(0, 0, 0, 0.26);
+@sf-widget-array-type-card-remove-bg: fade(@black, 26%);
 
 @yn-yes-color: @blue-6;
 @yn-no-color: @grey-7;
diff --git a/packages/theme/system/theme-variable.less b/packages/theme/system/theme-variable.less
new file mode 100644
index 0000000000..ed473a3d44
--- /dev/null
+++ b/packages/theme/system/theme-variable.less
@@ -0,0 +1,34 @@
+@import './theme-default.less';
+
+@root-entry-name: variable;
+
+@{html-selector} {
+  --grey-1:  #fff;
+  --grey-2:  #fafafa;
+  --grey-3:  #f5f5f5;
+  --grey-4:  #f0f0f0;
+  --grey-5:  #d9d9d9;
+  --grey-6:  #bfbfbf;
+  --grey-7:  #8c8c8c;
+  --grey-8:  #595959;
+  --grey-9:  #434343;
+  --grey-10: #262626;
+  --grey-11: #1f1f1f;
+  --grey-12: #141414;
+  --grey-13: #000;
+}
+
+// grey
+@grey-1:  var(--grey-1);
+@grey-2:  var(--grey-2);
+@grey-3:  var(--grey-3);
+@grey-4:  var(--grey-4);
+@grey-5:  var(--grey-5);
+@grey-6:  var(--grey-6);
+@grey-7:  var(--grey-7);
+@grey-8:  var(--grey-8);
+@grey-9:  var(--grey-9);
+@grey-10: var(--grey-10);
+@grey-11: var(--grey-11);
+@grey-12: var(--grey-12);
+@grey-13: var(--grey-13);
diff --git a/packages/theme/theme-compact.less b/packages/theme/theme-compact.less
index 1aec0a9cee..3d86714bbc 100644
--- a/packages/theme/theme-compact.less
+++ b/packages/theme/theme-compact.less
@@ -1,3 +1,4 @@
+@import './mixins.less';
 @import 'ng-zorro-antd/src/style/themes/compact.less';
 @import './system/theme-compact.less';
 @import './layout-default/style/theme-compact.less';
diff --git a/packages/theme/theme-dark.less b/packages/theme/theme-dark.less
index 92a175d1bd..f02d9dad04 100644
--- a/packages/theme/theme-dark.less
+++ b/packages/theme/theme-dark.less
@@ -1,3 +1,4 @@
+@import './mixins.less';
 @import 'ng-zorro-antd/src/style/themes/dark.less';
 @import './system/theme-dark.less';
 @import './layout-default/style/theme-dark.less';
diff --git a/packages/theme/theme-default.less b/packages/theme/theme-default.less
index bd4d44ac3f..627284fe4f 100644
--- a/packages/theme/theme-default.less
+++ b/packages/theme/theme-default.less
@@ -1,3 +1,4 @@
+@import './mixins.less';
 @import 'ng-zorro-antd/src/style/themes/default.less';
 @import './system/theme-default.less';
 @import './layout-default/style/theme-default.less';
diff --git a/packages/theme/theme-variable.less b/packages/theme/theme-variable.less
new file mode 100644
index 0000000000..760bbd0c0e
--- /dev/null
+++ b/packages/theme/theme-variable.less
@@ -0,0 +1,6 @@
+@import './mixins.less';
+@import 'ng-zorro-antd/src/style/themes/variable.less';
+@import './system/theme-variable.less';
+@import './layout-default/style/theme-variable.less';
+@import './layout-blank/style/theme-variable.less';
+@import '../abc/theme-variable.less';
diff --git a/packages/theme/variable.less b/packages/theme/variable.less
new file mode 100644
index 0000000000..04f73b9213
--- /dev/null
+++ b/packages/theme/variable.less
@@ -0,0 +1,6 @@
+@import './theme-variable.less';
+@import './system/index.less';
+@import './layout-default/style/index.less';
+@import './layout-blank/style/index.less';
+@import '../abc/index.less';
+@import '../chart/index.less';
diff --git a/scripts/build/copy-less.js b/scripts/build/copy-less.js
index e221d7c938..8ac4df0b09 100755
--- a/scripts/build/copy-less.js
+++ b/scripts/build/copy-less.js
@@ -10,7 +10,7 @@ function copyLess(name) {
   let sourcePath = path.join(root, `packages/${name}`);
   let targetPath = path.join(root, `dist/@delon/${name}`);
   // index.less
-  [`index.less`, `theme-default.less`, `theme-dark.less`, `theme-compact.less`]
+  [`index.less`, `theme-default.less`, `theme-dark.less`, `theme-compact.less`, `theme-variable.less`]
     .filter(fileName => fse.existsSync(`${sourcePath}/${fileName}`))
     .forEach(fileName => {
       fse.copySync(`${sourcePath}/${fileName}`, `${targetPath}/${fileName}`);
@@ -27,13 +27,16 @@ function copyLess(name) {
 function copyTheme() {
   [
     'system',
+    'mixins.less',
     'index.less',
     'default.less',
     'dark.less',
     'compact.less',
+    'variable.less',
     `theme-default.less`,
     `theme-dark.less`,
     `theme-compact.less`,
+    `theme-variable.less`,
   ].forEach(fileName => {
     fse.copySync(path.join(root, `packages/theme/${fileName}`), path.join(root, `dist/@delon/theme/${fileName}`));
   });
diff --git a/scripts/build/generate-css.js b/scripts/build/generate-css.js
index e7b0e11eab..af69a54388 100755
--- a/scripts/build/generate-css.js
+++ b/scripts/build/generate-css.js
@@ -33,7 +33,7 @@ async function genCss(name, min) {
 }
 
 function runCss(min) {
-  ['default', 'dark', 'compact'].forEach(async name => {
+  ['default', 'dark', 'compact', 'variable'].forEach(async name => {
     console.log(`开始生成 ${name} ${min ? 'min' : ''}版本`);
     await genCss(name, min);
   });
diff --git a/scripts/ci/build-artifacts.sh b/scripts/ci/build-artifacts.sh
index fa15ba7639..a25c34026a 100755
--- a/scripts/ci/build-artifacts.sh
+++ b/scripts/ci/build-artifacts.sh
@@ -92,8 +92,9 @@ echo "https://${ACCESS_TOKEN}:@github.com" > .git/credentials
 
 if [[ $(git ls-remote origin "refs/tags/${buildTagName}") ]]; then
   echo "removed tag because tag is already published"
-  # git push origin :refs/tags/${buildTagName}
   git push --delete origin ${buildTagName}
+  git push origin :refs/tags/${buildTagName}
+  sleep 5
 fi
 
 echo "Git configuration has been updated to match the last commit author. Publishing now.."
@@ -101,7 +102,7 @@ echo "Git configuration has been updated to match the last commit author. Publis
 git add -A
 git commit --allow-empty -m "${buildCommitMessage}"
 git tag "${buildTagName}"
-git push origin ${branchName} --tags
+git push origin ${branchName} --tags -f
 
 echo "Published package artifacts for ${packageName}#${buildVersionName} into ${branchName}"
 
diff --git a/src/app/app.config.ts b/src/app/app.config.ts
index 1025c660b1..369a464b24 100644
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -10,6 +10,7 @@ import { zhCN as dateLang } from 'date-fns/locale';
 import { provideTinymce } from 'ngx-tinymce';
 
 import { provideCellWidgets } from '@delon/abc/cell';
+import { ReuseTabMatchMode, provideReuseTabConfig } from '@delon/abc/reuse-tab';
 import { provideSTWidgets } from '@delon/abc/st';
 import { provideSFConfig } from '@delon/form';
 import { withMonacoEditorWidget } from '@delon/form/widgets-third/monaco-editor';
@@ -133,7 +134,7 @@ export const appConfig: ApplicationConfig = {
     { provide: ErrorHandler, useClass: CustomErrorHandler },
     // Elements
     importProvidersFrom(ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })),
-    provideElements()
-    // provideReuseTabConfig({ max: 2 })
+    provideElements(),
+    provideReuseTabConfig({ max: 2, mode: ReuseTabMatchMode.MenuForce })
   ]
 };
diff --git a/src/app/shared/components/footer/footer.component.ts b/src/app/shared/components/footer/footer.component.ts
index 9abec10f11..9a7f55aa0a 100644
--- a/src/app/shared/components/footer/footer.component.ts
+++ b/src/app/shared/components/footer/footer.component.ts
@@ -1,4 +1,3 @@
-import { Platform } from '@angular/cdk/platform';
 import { NgStyle } from '@angular/common';
 import {
   ChangeDetectionStrategy,
@@ -6,18 +5,14 @@ import {
   Component,
   Input,
   NgZone,
-  OnInit,
   booleanAttribute,
   inject
 } from '@angular/core';
 import { RouterLink } from '@angular/router';
 
-import { LoadingService } from '@delon/abc/loading';
 import { ALAIN_I18N_TOKEN, I18nPipe } from '@delon/theme';
 import { copy } from '@delon/util/browser';
-import { LazyService } from '@delon/util/other';
 import { NzColor, NzColorPickerModule } from 'ng-zorro-antd/color-picker';
-import type { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { NzGridModule } from 'ng-zorro-antd/grid';
 import { NzIconService } from 'ng-zorro-antd/icon';
 import { NzMessageService } from 'ng-zorro-antd/message';
@@ -34,15 +29,12 @@ import { NzMessageService } from 'ng-zorro-antd/message';
   standalone: true,
   imports: [NzGridModule, NzColorPickerModule, NgStyle, I18nPipe, RouterLink]
 })
-export class FooterComponent implements OnInit {
+export class FooterComponent {
   readonly i18n = inject(ALAIN_I18N_TOKEN);
   private readonly msg = inject(NzMessageService);
-  private readonly loading = inject(LoadingService);
-  private readonly lazy = inject(LazyService);
   private readonly iconSrv = inject(NzIconService);
   private readonly ngZone = inject(NgZone);
   private readonly cdr = inject(ChangeDetectorRef);
-  private readonly platform = inject(Platform);
 
   color = `#1890ff`;
   lessLoaded = false;
@@ -53,56 +45,15 @@ export class FooterComponent implements OnInit {
     copy(value).then(() => this.msg.success(this.i18n.fanyi('app.demo.copied')));
   }
 
-  ngOnInit(): void {
-    if (!this.platform.isBrowser) {
-      return;
-    }
-    this.initColor();
-  }
-
-  // region: color
-  initColor(): void {
-    const node = document.createElement('link');
-    node.rel = 'stylesheet/less';
-    node.type = 'text/css';
-    node.href = '/assets/color.less';
-    document.getElementsByTagName('head')[0].appendChild(node);
-  }
-
   changeColor(res: { color: NzColor; format: string }): void {
-    const changeColor = (): void => {
-      this.ngZone.runOutsideAngular(() => {
-        const hex = res.color.toHexString();
-        (window as NzSafeAny).less
-          .modifyVars({
-            '@primary-color': hex
-          })
-          .then(() => {
-            window.scrollTo(0, 0);
-            this.ngZone.run(() => {
-              this.color = hex;
-              this.iconSrv.twoToneColor.primaryColor = this.color;
-              this.msg.success(this.i18n.fanyi('app.footer.primary-color-changed'));
-              this.cdr.detectChanges();
-            });
-            this.loading.close();
-          });
-      });
-    };
-
-    const lessUrl = 'https://cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js';
-
-    this.loading.open({ text: 'Compiling....' });
-    if (this.lessLoaded) {
-      changeColor();
-    } else {
-      this.lazy.loadScript(lessUrl).then(() => {
-        this.lessLoaded = true;
-        (window as NzSafeAny).less.options.javascriptEnabled = true;
-        changeColor();
-      });
-    }
+    const hex = res.color.toHexString();
+    window.scrollTo(0, 0);
+    document.documentElement.style.setProperty('--ant-primary-color', hex);
+    this.ngZone.run(() => {
+      this.color = hex;
+      this.iconSrv.twoToneColor.primaryColor = this.color;
+      this.msg.success(this.i18n.fanyi('app.footer.primary-color-changed'));
+      this.cdr.detectChanges();
+    });
   }
-
-  // endregion
 }
diff --git a/src/styles.less b/src/styles.less
index 94eeac1441..70ada34382 100644
--- a/src/styles.less
+++ b/src/styles.less
@@ -1,3 +1,5 @@
+@import './styles/theme.less';
+
 // 全部引入
 @import '../packages/theme/system/index.less';
 @import '../packages/abc/index.less';
@@ -7,9 +9,5 @@
 // docs
 @import 'ng-zorro-antd/resizable/style/entry.less';
 @import './styles/index.less';
-@import './styles/theme.less';
 
 .scrollbar-mixin(~'.ant-affix');
-
-// 可以替换 dark, compact
-// @import '../packages/theme/theme-dark.less';
diff --git a/src/styles/index.less b/src/styles/index.less
index e054e4a969..2e03d6d536 100644
--- a/src/styles/index.less
+++ b/src/styles/index.less
@@ -1,4 +1,3 @@
-@import './theme.less';
 @import './_colors.less';
 @import './_reset.less';
 @import './_common.less';
diff --git a/src/styles/theme.less b/src/styles/theme.less
index 2b2a1d960f..39c8e82de5 100644
--- a/src/styles/theme.less
+++ b/src/styles/theme.less
@@ -1,4 +1,5 @@
-@import '../../packages/theme/theme-default.less';
+// 可以替换 dark, compact, variable
+@import '../../packages/theme/theme-variable.less';
 
 @site-heading-color: @heading-color;
 @site-text-color: @heading-color;