diff --git a/package.json b/package.json
index ccae63ff7b52..defc9d5b988b 100644
--- a/package.json
+++ b/package.json
@@ -60,7 +60,6 @@
     "pretest": "npm run version",
     "predist": "npm run version",
     "presite": "npm run version",
-    "color-less": "node ./scripts/generate-color-less",
     "compile": "npm run clean && antd-tools run compile",
     "changelog": "node ./scripts/print-changelog",
     "predeploy": "antd-tools run clean && npm run site && cp CNAME _site && npm run site:test",
@@ -84,10 +83,13 @@
     "pretty-quick": "pretty-quick",
     "pub": "npm run version && antd-tools run pub",
     "prepublishOnly": "antd-tools run guard",
-    "site": "cross-env NODE_ICU_DATA=node_modules/full-icu ESBUILD=1 concurrently \"bisheng build --ssr -c ./site/bisheng.config.js\" \"npm run color-less\"",
+    "site:theme": "npm run site:theme-dark && npm run site:theme-compact",
+    "site:theme-dark": "cross-env ESBUILD=1 ANT_THEME=dark bisheng build --ssr -c ./site/bisheng.config.js",
+    "site:theme-compact": "cross-env ESBUILD=1 ANT_THEME=compact bisheng build --ssr -c ./site/bisheng.config.js",
+    "site": "npm run site:theme && cross-env NODE_ICU_DATA=node_modules/full-icu ESBUILD=1 concurrently \"bisheng build --ssr -c ./site/bisheng.config.js\"",
     "sort": "npx sort-package-json",
     "sort-api": "antd-tools run sort-api-table",
-    "start": "antd-tools run clean && cross-env NODE_ENV=development concurrently \"npm run color-less\" \"bisheng start -c ./site/bisheng.config.js\"",
+    "start": "antd-tools run clean && cross-env NODE_ENV=development concurrently \"bisheng start -c ./site/bisheng.config.js\"",
     "test": "jest --config .jest.js --cache=false",
     "test:update": "jest --config .jest.js --cache=false -u",
     "test-all": "sh -e ./scripts/test-all.sh",
@@ -177,8 +179,6 @@
     "@typescript-eslint/parser": "^5.0.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.0",
     "antd-img-crop": "^3.1.1",
-    "antd-pro-merge-less": "^3.0.11",
-    "antd-theme-generator": "^1.2.3",
     "argos-cli": "^0.3.0",
     "array-move": "^4.0.0",
     "babel-plugin-add-react-displayname": "^0.0.5",
diff --git a/scripts/generate-color-less.js b/scripts/generate-color-less.js
deleted file mode 100644
index 3b3ce5ea92e6..000000000000
--- a/scripts/generate-color-less.js
+++ /dev/null
@@ -1,50 +0,0 @@
-#!/usr/bin/env node
-const path = require('path');
-const { generateTheme } = require('antd-theme-generator');
-const genCss = require('antd-pro-merge-less');
-const defaultVar = require('./default-vars');
-const dark = require('./dark-vars');
-const compact = require('./compact-vars');
-
-genCss(
-  path.join(__dirname, '..'),
-  [
-    {
-      theme: 'dark',
-      fileName: './_site/dark.css',
-      modifyVars: {
-        ...defaultVar,
-        ...dark,
-        '@site-text-color': '@heading-color',
-        '@site-markdown-code-bg': '@input-bg',
-      },
-    },
-    {
-      theme: 'compact',
-      fileName: './_site/compact.css',
-      modifyVars: {
-        ...defaultVar,
-        ...compact,
-      },
-    },
-  ],
-  {
-    ignoreAntd: true,
-    isModule: false,
-    cache: false,
-    loadAny: true,
-    ignoreProLayout: true,
-  },
-);
-
-const options = {
-  antDir: path.join(__dirname, '../node_modules/antd'),
-  stylesDir: path.join(__dirname, '../site/theme/static'),
-  antdStylesDir: path.join(__dirname, '../node_modules/antd/lib/'),
-  varFile: path.join(__dirname, '../site/theme/static/theme.less'),
-  mainLessFile: path.join(__dirname, '../site/theme/static/index.less'),
-  themeVariables: ['@primary-color'],
-  outputFilePath: path.join(__dirname, '../_site/color.less'),
-};
-
-generateTheme(options);
diff --git a/site/bisheng.config.js b/site/bisheng.config.js
index 7a15e209ca51..e1788770d6ac 100644
--- a/site/bisheng.config.js
+++ b/site/bisheng.config.js
@@ -8,6 +8,7 @@ const themeConfig = require('./themeConfig');
 const { webpack } = getWebpackConfig;
 
 const isDev = process.env.NODE_ENV === 'development';
+const { ANT_THEME } = process.env;
 
 function alertBabelConfig(rules) {
   rules.forEach(rule => {
@@ -36,7 +37,7 @@ module.exports = {
     'components/form/v3': ['components/form/v3.zh-CN.md', 'components/form/v3.en-US.md'],
     'docs/resources': ['./docs/resources.zh-CN.md', './docs/resources.en-US.md'],
   },
-  theme: './site/theme',
+  theme: ANT_THEME ? './site/theme/index-css-only.js' : './site/theme',
   htmlTemplate: './site/theme/static/template.html',
   themeConfig,
   filePathMapper(filePath) {
@@ -57,7 +58,7 @@ module.exports = {
   lessConfig: {
     javascriptEnabled: true,
     modifyVars: {
-      'root-entry-name': 'variable',
+      'root-entry-name': ANT_THEME || 'variable',
     },
   },
   webpackConfig(config) {
@@ -85,6 +86,7 @@ module.exports = {
         react: require.resolve('react'),
       };
     } else if (process.env.ESBUILD) {
+      console.log('Enable ESBUILD');
       // use esbuild
       config.optimization.minimizer = [
         new ESBuildMinifyPlugin({
@@ -110,6 +112,16 @@ module.exports = {
 
     delete config.module.noParse;
 
+    if (ANT_THEME) {
+      config.mode = 'development';
+      config.plugins.forEach(plugin => {
+        if (plugin?.options?.filename?.includes?.('.css')) {
+          delete plugin.options.chunkFilename;
+          plugin.options.filename = `${ANT_THEME}.css`;
+        }
+      });
+    }
+
     return config;
   },
 
diff --git a/site/theme/index-css-only.js b/site/theme/index-css-only.js
new file mode 100644
index 000000000000..85517958f9d7
--- /dev/null
+++ b/site/theme/index-css-only.js
@@ -0,0 +1,19 @@
+/**
+ * ZombieJ: This file is used for generate site theme css only. Which only provides dark.css and
+ * compact.css for theme switcher.
+ */
+const config = require('./index');
+
+const homeTmpl = './template/Home/index';
+
+const cloneConfig = {
+  ...config,
+};
+
+cloneConfig.routes = {
+  path: '/',
+  component: './template/Layout/index',
+  indexRoute: { component: homeTmpl },
+};
+
+module.exports = cloneConfig;
diff --git a/site/theme/static/header.less b/site/theme/static/header.less
index a3d18c94cbb5..702c06206450 100644
--- a/site/theme/static/header.less
+++ b/site/theme/static/header.less
@@ -1,5 +1,3 @@
-@import (reference) '../../../components/style/themes/variable.less';
-
 #header {
   // ===================== Home Page =====================
   &.home-header {
diff --git a/site/theme/static/index.less b/site/theme/static/index.less
index be9e04c3fdf9..2fcc812487b2 100644
--- a/site/theme/static/index.less
+++ b/site/theme/static/index.less
@@ -1,26 +1,27 @@
+@import '../../../components/style/themes/index.less';
+
 @import './reset.less';
-@import '../../../components/style/themes/variable.less';
-@import './common';
-@import './header';
-@import './footer';
-@import './home';
-@import './page-nav';
-@import './markdown';
-@import './design-doc';
-@import './preview-img';
-@import './toc';
-@import './not-found';
-@import './highlight';
-@import './demo';
-@import './colors';
-@import './icons';
-@import './icon-pic-searcher';
-@import './mock-browser';
-@import './motion';
-@import './responsive';
-@import './theme';
-@import './docsearch';
-@import './nprogress';
-@import './contributors';
+@import './common.less';
+@import './header.less';
+@import './footer.less';
+@import './home.less';
+@import './page-nav.less';
+@import './markdown.less';
+@import './design-doc.less';
+@import './preview-img.less';
+@import './toc.less';
+@import './not-found.less';
+@import './highlight.less';
+@import './demo.less';
+@import './colors.less';
+@import './icons.less';
+@import './icon-pic-searcher.less';
+@import './mock-browser.less';
+@import './motion.less';
+@import './responsive.less';
+@import './theme.less';
+@import './docsearch.less';
+@import './nprogress.less';
+@import './contributors.less';
 @import './dark.less';
 @import './rtl.less';
diff --git a/site/theme/static/responsive.less b/site/theme/static/responsive.less
index 1395c5b9af6c..2200450c54ef 100644
--- a/site/theme/static/responsive.less
+++ b/site/theme/static/responsive.less
@@ -1,5 +1,3 @@
-@import (reference) '../../../components/style/themes/variable.less';
-
 .nav-phone-icon {
   position: absolute;
   top: 25px;
diff --git a/site/theme/static/theme.less b/site/theme/static/theme.less
index 60d369602307..771b27c3d72a 100644
--- a/site/theme/static/theme.less
+++ b/site/theme/static/theme.less
@@ -1,4 +1,3 @@
-@import (reference) '../../../components/style/themes/variable.less';
 @import './colors.less';
 @import './home.less';
 
diff --git a/site/theme/template/Content/ComponentOverview.less b/site/theme/template/Content/ComponentOverview.less
index cfa949b7c2a1..f234def90307 100644
--- a/site/theme/template/Content/ComponentOverview.less
+++ b/site/theme/template/Content/ComponentOverview.less
@@ -1,4 +1,4 @@
-@import (reference) '../../../../components/style/themes/variable.less';
+@import (reference) '../../../../components/style/themes/index.less';
 
 .components-overview {
   padding: 0;
diff --git a/site/theme/template/Home/Banner/Background.less b/site/theme/template/Home/Banner/Background.less
index 67040fe9d839..f3471fa9349b 100644
--- a/site/theme/template/Home/Banner/Background.less
+++ b/site/theme/template/Home/Banner/Background.less
@@ -1,4 +1,4 @@
-@import (reference) '../../../../../components/style/themes/variable.less';
+@import (reference) '../../../../../components/style/themes/index.less';
 
 .home-banner-background {
   position: absolute;
diff --git a/site/theme/template/Home/Banner/Logo.less b/site/theme/template/Home/Banner/Logo.less
index 3640647ca274..e49cb55ddb27 100644
--- a/site/theme/template/Home/Banner/Logo.less
+++ b/site/theme/template/Home/Banner/Logo.less
@@ -1,4 +1,4 @@
-@import (reference) '../../../../../components/style/themes/variable.less';
+@import (reference) '../../../../../components/style/themes/index.less';
 
 .home-card-logo {
   position: relative;
diff --git a/site/theme/template/Home/Banner/index.less b/site/theme/template/Home/Banner/index.less
index 3405e5eec919..aa4ec26f7d38 100644
--- a/site/theme/template/Home/Banner/index.less
+++ b/site/theme/template/Home/Banner/index.less
@@ -1,4 +1,4 @@
-@import (reference) '../../../../../components/style/themes/variable.less';
+@import (reference) '../../../../../components/style/themes/index.less';
 
 @home-color: #0170fe;
 
diff --git a/site/theme/template/Home/DesignPage/index.less b/site/theme/template/Home/DesignPage/index.less
index 27f674ba72c0..17ed875b0040 100644
--- a/site/theme/template/Home/DesignPage/index.less
+++ b/site/theme/template/Home/DesignPage/index.less
@@ -1,4 +1,4 @@
-@import (reference) '../../../../../components/style/themes/variable.less';
+@import (reference) '../../../../../components/style/themes/index.less';
 
 .design-card {
   position: relative;
diff --git a/site/theme/template/Home/MorePage.less b/site/theme/template/Home/MorePage.less
index a8fecace16f9..256a36ecd2af 100644
--- a/site/theme/template/Home/MorePage.less
+++ b/site/theme/template/Home/MorePage.less
@@ -1,4 +1,4 @@
-@import (reference) '../../../../components/style/themes/variable.less';
+@import (reference) '../../../../components/style/themes/index.less';
 
 .more-card {
   &:hover {
diff --git a/site/theme/template/Home/RecommendPage.less b/site/theme/template/Home/RecommendPage.less
index 509a0d3200f3..27a3c84d80b1 100644
--- a/site/theme/template/Home/RecommendPage.less
+++ b/site/theme/template/Home/RecommendPage.less
@@ -1,4 +1,4 @@
-@import (reference) '../../../../components/style/themes/variable.less';
+@import (reference) '../../../../components/style/themes/index.less';
 
 .linear-gradient(@mid-pos, @end-pos) {
   background: linear-gradient(
diff --git a/site/theme/template/Home/index.less b/site/theme/template/Home/index.less
index 4afe3f17f5a1..dd3f8e2584a8 100644
--- a/site/theme/template/Home/index.less
+++ b/site/theme/template/Home/index.less
@@ -1,4 +1,4 @@
-@import (reference) '../../../../components/style/themes/variable.less';
+@import (reference) '../../../../components/style/themes/index.less';
 
 .home-container {
   h1,
diff --git a/site/theme/template/Layout/Header/Github.less b/site/theme/template/Layout/Header/Github.less
index b94787ebde2d..57bd668723a9 100644
--- a/site/theme/template/Layout/Header/Github.less
+++ b/site/theme/template/Layout/Header/Github.less
@@ -1,5 +1,5 @@
 @import '../../../static/theme.less';
-@import (reference) '../../../../../components/style/themes/variable.less';
+@import (reference) '../../../../../components/style/themes/index.less';
 
 #github-btn {
   display: flex;
diff --git a/site/theme/template/Layout/Header/Logo.less b/site/theme/template/Layout/Header/Logo.less
index 572477c3d3e3..0bd0a7c77089 100644
--- a/site/theme/template/Layout/Header/Logo.less
+++ b/site/theme/template/Layout/Header/Logo.less
@@ -1,5 +1,5 @@
 @import '../../../static/theme.less';
-@import (reference) '../../../../../components/style/themes/variable.less';
+@import (reference) '../../../../../components/style/themes/index.less';
 @import './index.less';
 
 #logo {
diff --git a/site/theme/template/Layout/Header/Navigation.less b/site/theme/template/Layout/Header/Navigation.less
index 79adea5eee77..0e47ba480164 100644
--- a/site/theme/template/Layout/Header/Navigation.less
+++ b/site/theme/template/Layout/Header/Navigation.less
@@ -1,5 +1,5 @@
 @import '../../../static/theme.less';
-@import (reference) '../../../../../components/style/themes/variable.less';
+@import (reference) '../../../../../components/style/themes/index.less';
 @import './index.less';
 
 #nav {
diff --git a/site/theme/template/Layout/Header/SearchBar.less b/site/theme/template/Layout/Header/SearchBar.less
index 85dc40d253f1..21106f7ff92d 100644
--- a/site/theme/template/Layout/Header/SearchBar.less
+++ b/site/theme/template/Layout/Header/SearchBar.less
@@ -1,5 +1,5 @@
 @import '../../../static/theme.less';
-@import (reference) '../../../../../components/style/themes/variable.less';
+@import (reference) '../../../../../components/style/themes/index.less';
 @import './index.less';
 @import './DocSearch.less';
 
diff --git a/site/theme/template/Layout/Header/index.less b/site/theme/template/Layout/Header/index.less
index 39e4bfc7a1bf..8ace2cb7acb0 100644
--- a/site/theme/template/Layout/Header/index.less
+++ b/site/theme/template/Layout/Header/index.less
@@ -1,5 +1,5 @@
 @import '../../../static/theme.less';
-@import (reference) '../../../../../components/style/themes/variable.less';
+@import (reference) '../../../../../components/style/themes/index.less';
 
 @header-height: 64px;
 @menu-item-border: 2px;
diff --git a/site/theme/template/Resources/AffixTabs.less b/site/theme/template/Resources/AffixTabs.less
index d5acd7192703..d6edc178caeb 100644
--- a/site/theme/template/Resources/AffixTabs.less
+++ b/site/theme/template/Resources/AffixTabs.less
@@ -1,4 +1,4 @@
-@import (reference) '../../../../components/style/themes/variable.less';
+@import (reference) '../../../../components/style/themes/index.less';
 @import './index.less';
 
 .resource-affix-tabs {
diff --git a/site/theme/template/Resources/index.less b/site/theme/template/Resources/index.less
index 1d3fe4a0aebc..5c3476212e98 100644
--- a/site/theme/template/Resources/index.less
+++ b/site/theme/template/Resources/index.less
@@ -1,4 +1,4 @@
-@import (reference) '../../../../components/style/themes/variable.less';
+@import (reference) '../../../../components/style/themes/index.less';
 
 @ArticleMaxWidth: 1208px;
 @resource-padding: 40px;