From cbfc052d0d948beb29c0b5f5b383d309bb0740e0 Mon Sep 17 00:00:00 2001
From: chenshuai2144 <qixian.cs@outlook.com>
Date: Mon, 23 Dec 2019 16:02:09 +0800
Subject: [PATCH] dark theme sync

---
 components/date-picker/style/DecadePanel.less |   1 -
 components/date-picker/style/MonthPanel.less  |  86 ---
 components/date-picker/style/TimePicker.less  | 151 ----
 components/date-picker/style/YearPanel.less   |  85 ---
 components/style/themes/default.less          |   2 -
 docs/react/introduce.en-US.md                 |   4 +-
 docs/react/introduce.zh-CN.md                 |   4 +-
 package.json                                  |   1 +
 scripts/dart.js                               | 683 ++++++++++++++++++
 scripts/generateColorLess.js                  |  32 +-
 site/theme/static/common.less                 |   4 +-
 site/theme/static/demo.less                   |   6 +-
 site/theme/static/docsearch.less              |   4 +
 site/theme/static/home.less                   |  20 +-
 site/theme/static/preview-img.less            |   5 +-
 site/theme/static/responsive.less             |   4 +-
 site/theme/static/toc.less                    |   4 +-
 site/theme/template/Layout/index.jsx          |  19 +
 18 files changed, 754 insertions(+), 361 deletions(-)
 delete mode 100644 components/date-picker/style/MonthPanel.less
 delete mode 100644 components/date-picker/style/TimePicker.less
 delete mode 100644 components/date-picker/style/YearPanel.less
 create mode 100644 scripts/dart.js

diff --git a/components/date-picker/style/DecadePanel.less b/components/date-picker/style/DecadePanel.less
index b6b4f20e4e..27c087ffe3 100644
--- a/components/date-picker/style/DecadePanel.less
+++ b/components/date-picker/style/DecadePanel.less
@@ -17,7 +17,6 @@
 }
 
 .@{calendar-prefix-cls}-decade-panel-header {
-  .calendarPanelHeader(~'@{calendar-prefix-cls}-decade-panel');
   position: relative;
 }
 
diff --git a/components/date-picker/style/MonthPanel.less b/components/date-picker/style/MonthPanel.less
deleted file mode 100644
index cef00fe8e3..0000000000
--- a/components/date-picker/style/MonthPanel.less
+++ /dev/null
@@ -1,86 +0,0 @@
-.@{calendar-prefix-cls}-month-panel {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: @zindex-picker-panel;
-  background: @month-panel-bg;
-  border-radius: @border-radius-base;
-  outline: none;
-
-  > div {
-    display: flex;
-    flex-direction: column;
-    // TODO: this is a useless wrapper, and we need to remove it in rc-calendar
-    height: 100%;
-  }
-}
-
-.@{calendar-prefix-cls}-month-panel-hidden {
-  display: none;
-}
-
-.@{calendar-prefix-cls}-month-panel-header {
-  .calendarPanelHeader(~'@{calendar-prefix-cls}-month-panel');
-  position: relative;
-}
-
-.@{calendar-prefix-cls}-month-panel-body {
-  flex: 1;
-}
-
-.@{calendar-prefix-cls}-month-panel-footer {
-  border-top: @border-width-base @border-style-base @border-color-split;
-  .@{calendar-prefix-cls}-footer-extra {
-    padding: 0 12px;
-  }
-}
-
-.@{calendar-prefix-cls}-month-panel-table {
-  width: 100%;
-  height: 100%;
-  table-layout: fixed;
-  border-collapse: separate;
-}
-
-.@{calendar-prefix-cls}-month-panel-selected-cell .@{calendar-prefix-cls}-month-panel-month {
-  color: @text-color-inverse;
-  background: @primary-color;
-
-  &:hover {
-    color: @text-color-inverse;
-    background: @primary-color;
-  }
-}
-
-.@{calendar-prefix-cls}-month-panel-cell {
-  text-align: center;
-
-  &-disabled .@{calendar-prefix-cls}-month-panel-month {
-    &,
-    &:hover {
-      color: @disabled-color;
-      background: @picker-basic-cell-disabled-bg;
-      cursor: not-allowed;
-    }
-  }
-}
-
-.@{calendar-prefix-cls}-month-panel-month {
-  display: inline-block;
-  height: 24px;
-  margin: 0 auto;
-  padding: 0 8px;
-  color: @text-color;
-  line-height: 24px;
-  text-align: center;
-  background: transparent;
-  border-radius: @border-radius-base;
-  transition: background 0.3s ease;
-
-  &:hover {
-    background: @item-hover-bg;
-    cursor: pointer;
-  }
-}
diff --git a/components/date-picker/style/TimePicker.less b/components/date-picker/style/TimePicker.less
deleted file mode 100644
index 15374822af..0000000000
--- a/components/date-picker/style/TimePicker.less
+++ /dev/null
@@ -1,151 +0,0 @@
-.@{calendar-timepicker-prefix-cls} {
-  position: absolute;
-  top: 40px;
-  width: 100%;
-  background-color: @time-picker-bg;
-
-  &-panel {
-    position: absolute;
-    z-index: @zindex-picker;
-    width: 100%;
-  }
-
-  &-inner {
-    position: relative;
-    display: inline-block;
-    width: 100%;
-    overflow: hidden;
-    font-size: @font-size-base;
-    line-height: 1.5;
-    text-align: left;
-    list-style: none;
-    background-color: @time-picker-inner-bg;
-    background-clip: padding-box;
-    outline: none;
-  }
-  &-combobox {
-    width: 100%;
-  }
-
-  &-column-1,
-  &-column-1 &-select {
-    width: 100%;
-  }
-  &-column-2 &-select {
-    width: 50%;
-  }
-  &-column-3 &-select {
-    width: 33.33%;
-  }
-  &-column-4 &-select {
-    width: 25%;
-  }
-
-  &-input-wrap {
-    display: none;
-  }
-
-  &-select {
-    position: relative; // Fix chrome weird render bug
-    float: left;
-    height: 226px;
-    overflow: hidden;
-    font-size: @font-size-base;
-    border-right: @border-width-base @border-style-base @border-color-split;
-
-    &:hover {
-      overflow-y: auto;
-    }
-
-    &:first-child {
-      margin-left: 0;
-      border-left: 0;
-    }
-
-    &:last-child {
-      border-right: 0;
-    }
-
-    ul {
-      width: 100%;
-      max-height: 206px;
-      margin: 0;
-      padding: 0;
-      list-style: none;
-    }
-
-    li {
-      width: 100%;
-      height: 24px;
-      margin: 0;
-      line-height: 24px;
-      text-align: center;
-      list-style: none;
-      cursor: pointer;
-      transition: all 0.3s;
-      user-select: none;
-
-      &:last-child::after {
-        display: block;
-        height: 202px;
-        content: '';
-      }
-
-      &:hover {
-        background: @item-hover-bg;
-      }
-
-      &:focus {
-        color: @primary-color;
-        font-weight: 600;
-        outline: none;
-      }
-    }
-
-    li&-option-selected {
-      font-weight: 600;
-      background: @time-picker-selected-bg;
-    }
-
-    li&-option-disabled {
-      color: @btn-disable-color;
-      &:hover {
-        background: transparent;
-        cursor: not-allowed;
-      }
-    }
-  }
-}
-
-.@{calendar-prefix-cls}-time {
-  .@{calendar-prefix-cls}-day-select {
-    display: inline-block;
-    padding: 0 2px;
-    color: @heading-color;
-    font-weight: 500;
-    line-height: 34px;
-  }
-
-  .@{calendar-prefix-cls}-footer {
-    position: relative;
-    height: auto;
-
-    &-btn {
-      text-align: right;
-    }
-
-    .@{calendar-prefix-cls}-today-btn {
-      float: left;
-      margin: 0;
-    }
-
-    .@{calendar-prefix-cls}-time-picker-btn {
-      display: inline-block;
-      margin-right: 8px;
-
-      &-disabled {
-        color: @disabled-color;
-      }
-    }
-  }
-}
diff --git a/components/date-picker/style/YearPanel.less b/components/date-picker/style/YearPanel.less
deleted file mode 100644
index 38f14d855b..0000000000
--- a/components/date-picker/style/YearPanel.less
+++ /dev/null
@@ -1,85 +0,0 @@
-.@{calendar-prefix-cls}-year-panel {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: @zindex-picker-panel;
-  background: @year-panel-bg;
-  border-radius: @border-radius-base;
-  outline: none;
-
-  > div {
-    display: flex;
-    flex-direction: column;
-    // TODO: this is a useless wrapper, and we need to remove it in rc-calendar
-    height: 100%;
-  }
-}
-
-.@{calendar-prefix-cls}-year-panel-hidden {
-  display: none;
-}
-
-.@{calendar-prefix-cls}-year-panel-header {
-  .calendarPanelHeader(~'@{calendar-prefix-cls}-year-panel');
-  position: relative;
-}
-
-.@{calendar-prefix-cls}-year-panel-body {
-  flex: 1;
-}
-
-.@{calendar-prefix-cls}-year-panel-footer {
-  border-top: @border-width-base @border-style-base @border-color-split;
-  .@{calendar-prefix-cls}-footer-extra {
-    padding: 0 12px;
-  }
-}
-
-.@{calendar-prefix-cls}-year-panel-table {
-  width: 100%;
-  height: 100%;
-  table-layout: fixed;
-  border-collapse: separate;
-}
-
-.@{calendar-prefix-cls}-year-panel-cell {
-  text-align: center;
-}
-
-.@{calendar-prefix-cls}-year-panel-year {
-  display: inline-block;
-  height: 24px;
-  margin: 0 auto;
-  padding: 0 8px;
-  color: @text-color;
-  line-height: 24px;
-  text-align: center;
-  background: transparent;
-  border-radius: @border-radius-base;
-  transition: background 0.3s ease;
-
-  &:hover {
-    background: @item-hover-bg;
-    cursor: pointer;
-  }
-}
-
-.@{calendar-prefix-cls}-year-panel-selected-cell .@{calendar-prefix-cls}-year-panel-year {
-  color: @text-color-inverse;
-  background: @primary-color;
-
-  &:hover {
-    color: @text-color-inverse;
-    background: @primary-color;
-  }
-}
-
-.@{calendar-prefix-cls}-year-panel-last-decade-cell,
-.@{calendar-prefix-cls}-year-panel-next-decade-cell {
-  .@{calendar-prefix-cls}-year-panel-year {
-    color: @disabled-color;
-    user-select: none;
-  }
-}
diff --git a/components/style/themes/default.less b/components/style/themes/default.less
index 6b94ce57c0..50cc43e65b 100644
--- a/components/style/themes/default.less
+++ b/components/style/themes/default.less
@@ -774,5 +774,3 @@
 // Notification
 // ---
 @notification-bg: @component-background;
-
-@import './dark.less';
diff --git a/docs/react/introduce.en-US.md b/docs/react/introduce.en-US.md
index 80f9458277..3e400ab1b5 100644
--- a/docs/react/introduce.en-US.md
+++ b/docs/react/introduce.en-US.md
@@ -6,9 +6,9 @@ title: Ant Design of React
 Following the Ant Design specification, we developed a React UI library `antd` that contains a set of high quality components and demos for building rich, interactive user interfaces.
 
 <div class="pic-plus">
-  <img width="150" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg">
+  <img width="150" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" />
   <span>+</span>
-  <img width="160" src="https://gw.alipayobjects.com/zos/rmsportal/tXlLQhLvkEelMstLyHiN.svg">
+ <img width="160" src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg" />
 </div>
 
 <style>
diff --git a/docs/react/introduce.zh-CN.md b/docs/react/introduce.zh-CN.md
index 7318e7a6a0..dde9a89465 100644
--- a/docs/react/introduce.zh-CN.md
+++ b/docs/react/introduce.zh-CN.md
@@ -6,9 +6,9 @@ title: Ant Design of React
 `antd` 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。
 
 <div class="pic-plus">
-  <img width="150" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg">
+  <img width="150" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"/>
   <span>+</span>
-  <img width="160" src="https://gw.alipayobjects.com/zos/rmsportal/tXlLQhLvkEelMstLyHiN.svg">
+  <img width="160" src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg"/>
 </div>
 
 <style>
diff --git a/package.json b/package.json
index 028c4c79c4..acbf8e4810 100644
--- a/package.json
+++ b/package.json
@@ -162,6 +162,7 @@
     "@types/warning": "^3.0.0",
     "@typescript-eslint/eslint-plugin": "^2.0.0",
     "@typescript-eslint/parser": "~2.9.0",
+    "antd-pro-merge-less": "^2.0.22",
     "antd-theme-generator": "^1.1.6",
     "babel-eslint": "^10.0.1",
     "babel-plugin-add-react-displayname": "^0.0.5",
diff --git a/scripts/dart.js b/scripts/dart.js
new file mode 100644
index 0000000000..adacf76f82
--- /dev/null
+++ b/scripts/dart.js
@@ -0,0 +1,683 @@
+module.exports = {
+  'blue-base': '#1890ff',
+  'blue-1': "mix(color(~`colorPalette('@{blue-base}', 8) `), @component-background, 15%)",
+  'blue-2': "mix(color(~`colorPalette('@{blue-base}', 7) `), @component-background, 25%)",
+  'blue-3': 'mix(@blue-base, @component-background, 30%)',
+  'blue-4': 'mix(@blue-base, @component-background, 45%)',
+  'blue-5': 'mix(@blue-base, @component-background, 65%)',
+  'blue-6': 'mix(@blue-base, @component-background, 85%)',
+  'blue-7': "mix(color(~`colorPalette('@{blue-base}', 5) `), @component-background, 85%)",
+  'blue-8': "mix(color(~`colorPalette('@{blue-base}', 4) `), @component-background, 95%)",
+  'blue-9': "mix(color(~`colorPalette('@{blue-base}', 3) `), @component-background, 95%)",
+  'blue-10': "mix(color(~`colorPalette('@{blue-base}', 2) `), @component-background, 95%)",
+  'purple-base': '#722ed1',
+  'purple-1': "mix(color(~`colorPalette('@{purple-base}', 8) `), @component-background, 15%)",
+  'purple-2': "mix(color(~`colorPalette('@{purple-base}', 7) `), @component-background, 25%)",
+  'purple-3': 'mix(@purple-base, @component-background, 30%)',
+  'purple-4': 'mix(@purple-base, @component-background, 45%)',
+  'purple-5': 'mix(@purple-base, @component-background, 65%)',
+  'purple-6': 'mix(@purple-base, @component-background, 85%)',
+  'purple-7': "mix(color(~`colorPalette('@{purple-base}', 5) `), @component-background, 85%)",
+  'purple-8': "mix(color(~`colorPalette('@{purple-base}', 4) `), @component-background, 95%)",
+  'purple-9': "mix(color(~`colorPalette('@{purple-base}', 3) `), @component-background, 95%)",
+  'purple-10': "mix(color(~`colorPalette('@{purple-base}', 2) `), @component-background, 95%)",
+  'cyan-base': '#13c2c2',
+  'cyan-1': "mix(color(~`colorPalette('@{cyan-base}', 8) `), @component-background, 15%)",
+  'cyan-2': "mix(color(~`colorPalette('@{cyan-base}', 7) `), @component-background, 25%)",
+  'cyan-3': 'mix(@cyan-base, @component-background, 30%)',
+  'cyan-4': 'mix(@cyan-base, @component-background, 45%)',
+  'cyan-5': 'mix(@cyan-base, @component-background, 65%)',
+  'cyan-6': 'mix(@cyan-base, @component-background, 85%)',
+  'cyan-7': "mix(color(~`colorPalette('@{cyan-base}', 5) `), @component-background, 85%)",
+  'cyan-8': "mix(color(~`colorPalette('@{cyan-base}', 4) `), @component-background, 95%)",
+  'cyan-9': "mix(color(~`colorPalette('@{cyan-base}', 3) `), @component-background, 95%)",
+  'cyan-10': "mix(color(~`colorPalette('@{cyan-base}', 2) `), @component-background, 95%)",
+  'green-base': '#52c41a',
+  'green-1': "mix(color(~`colorPalette('@{green-base}', 8) `), @component-background, 15%)",
+  'green-2': "mix(color(~`colorPalette('@{green-base}', 7) `), @component-background, 25%)",
+  'green-3': 'mix(@green-base, @component-background, 30%)',
+  'green-4': 'mix(@green-base, @component-background, 45%)',
+  'green-5': 'mix(@green-base, @component-background, 65%)',
+  'green-6': 'mix(@green-base, @component-background, 85%)',
+  'green-7': "mix(color(~`colorPalette('@{green-base}', 5) `), @component-background, 85%)",
+  'green-8': "mix(color(~`colorPalette('@{green-base}', 4) `), @component-background, 95%)",
+  'green-9': "mix(color(~`colorPalette('@{green-base}', 3) `), @component-background, 95%)",
+  'green-10': "mix(color(~`colorPalette('@{green-base}', 2) `), @component-background, 95%)",
+  'magenta-base': '#eb2f96',
+  'magenta-1': "mix(color(~`colorPalette('@{magenta-base}', 8) `), @component-background, 15%)",
+  'magenta-2': "mix(color(~`colorPalette('@{magenta-base}', 7) `), @component-background, 25%)",
+  'magenta-3': 'mix(@magenta-base, @component-background, 30%)',
+  'magenta-4': 'mix(@magenta-base, @component-background, 45%)',
+  'magenta-5': 'mix(@magenta-base, @component-background, 65%)',
+  'magenta-6': 'mix(@magenta-base, @component-background, 85%)',
+  'magenta-7': "mix(color(~`colorPalette('@{magenta-base}', 5) `), @component-background, 85%)",
+  'magenta-8': "mix(color(~`colorPalette('@{magenta-base}', 4) `), @component-background, 95%)",
+  'magenta-9': "mix(color(~`colorPalette('@{magenta-base}', 3) `), @component-background, 95%)",
+  'magenta-10': "mix(color(~`colorPalette('@{magenta-base}', 2) `), @component-background, 95%)",
+  'pink-base': '#eb2f96',
+  'pink-1': "mix(color(~`colorPalette('@{pink-base}', 8) `), @component-background, 15%)",
+  'pink-2': "mix(color(~`colorPalette('@{pink-base}', 7) `), @component-background, 25%)",
+  'pink-3': 'mix(@pink-base, @component-background, 30%)',
+  'pink-4': 'mix(@pink-base, @component-background, 45%)',
+  'pink-5': 'mix(@pink-base, @component-background, 65%)',
+  'pink-6': 'mix(@pink-base, @component-background, 85%)',
+  'pink-7': "mix(color(~`colorPalette('@{pink-base}', 5) `), @component-background, 85%)",
+  'pink-8': "mix(color(~`colorPalette('@{pink-base}', 4) `), @component-background, 95%)",
+  'pink-9': "mix(color(~`colorPalette('@{pink-base}', 3) `), @component-background, 95%)",
+  'pink-10': "mix(color(~`colorPalette('@{pink-base}', 2) `), @component-background, 95%)",
+  'red-base': '#f5222d',
+  'red-1': "mix(color(~`colorPalette('@{red-base}', 8) `), @component-background, 15%)",
+  'red-2': "mix(color(~`colorPalette('@{red-base}', 7) `), @component-background, 25%)",
+  'red-3': 'mix(@red-base, @component-background, 30%)',
+  'red-4': 'mix(@red-base, @component-background, 45%)',
+  'red-5': 'mix(@red-base, @component-background, 65%)',
+  'red-6': 'mix(@red-base, @component-background, 85%)',
+  'red-7': "mix(color(~`colorPalette('@{red-base}', 5) `), @component-background, 85%)",
+  'red-8': "mix(color(~`colorPalette('@{red-base}', 4) `), @component-background, 95%)",
+  'red-9': "mix(color(~`colorPalette('@{red-base}', 3) `), @component-background, 95%)",
+  'red-10': "mix(color(~`colorPalette('@{red-base}', 2) `), @component-background, 95%)",
+  'orange-base': '#fa8c16',
+  'orange-1': "mix(color(~`colorPalette('@{orange-base}', 8) `), @component-background, 15%)",
+  'orange-2': "mix(color(~`colorPalette('@{orange-base}', 7) `), @component-background, 25%)",
+  'orange-3': 'mix(@orange-base, @component-background, 30%)',
+  'orange-4': 'mix(@orange-base, @component-background, 45%)',
+  'orange-5': 'mix(@orange-base, @component-background, 65%)',
+  'orange-6': 'mix(@orange-base, @component-background, 85%)',
+  'orange-7': "mix(color(~`colorPalette('@{orange-base}', 5) `), @component-background, 85%)",
+  'orange-8': "mix(color(~`colorPalette('@{orange-base}', 4) `), @component-background, 95%)",
+  'orange-9': "mix(color(~`colorPalette('@{orange-base}', 3) `), @component-background, 95%)",
+  'orange-10': "mix(color(~`colorPalette('@{orange-base}', 2) `), @component-background, 95%)",
+  'yellow-base': '#fadb14',
+  'yellow-1': "mix(color(~`colorPalette('@{yellow-base}', 8) `), @component-background, 15%)",
+  'yellow-2': "mix(color(~`colorPalette('@{yellow-base}', 7) `), @component-background, 25%)",
+  'yellow-3': 'mix(@yellow-base, @component-background, 30%)',
+  'yellow-4': 'mix(@yellow-base, @component-background, 45%)',
+  'yellow-5': 'mix(@yellow-base, @component-background, 65%)',
+  'yellow-6': 'mix(@yellow-base, @component-background, 85%)',
+  'yellow-7': "mix(color(~`colorPalette('@{yellow-base}', 5) `), @component-background, 85%)",
+  'yellow-8': "mix(color(~`colorPalette('@{yellow-base}', 4) `), @component-background, 95%)",
+  'yellow-9': "mix(color(~`colorPalette('@{yellow-base}', 3) `), @component-background, 95%)",
+  'yellow-10': "mix(color(~`colorPalette('@{yellow-base}', 2) `), @component-background, 95%)",
+  'volcano-base': '#fa541c',
+  'volcano-1': "mix(color(~`colorPalette('@{volcano-base}', 8) `), @component-background, 15%)",
+  'volcano-2': "mix(color(~`colorPalette('@{volcano-base}', 7) `), @component-background, 25%)",
+  'volcano-3': 'mix(@volcano-base, @component-background, 30%)',
+  'volcano-4': 'mix(@volcano-base, @component-background, 45%)',
+  'volcano-5': 'mix(@volcano-base, @component-background, 65%)',
+  'volcano-6': 'mix(@volcano-base, @component-background, 85%)',
+  'volcano-7': "mix(color(~`colorPalette('@{volcano-base}', 5) `), @component-background, 85%)",
+  'volcano-8': "mix(color(~`colorPalette('@{volcano-base}', 4) `), @component-background, 95%)",
+  'volcano-9': "mix(color(~`colorPalette('@{volcano-base}', 3) `), @component-background, 95%)",
+  'volcano-10': "mix(color(~`colorPalette('@{volcano-base}', 2) `), @component-background, 95%)",
+  'geekblue-base': '#2f54eb',
+  'geekblue-1': "mix(color(~`colorPalette('@{geekblue-base}', 8) `), @component-background, 15%)",
+  'geekblue-2': "mix(color(~`colorPalette('@{geekblue-base}', 7) `), @component-background, 25%)",
+  'geekblue-3': 'mix(@geekblue-base, @component-background, 30%)',
+  'geekblue-4': 'mix(@geekblue-base, @component-background, 45%)',
+  'geekblue-5': 'mix(@geekblue-base, @component-background, 65%)',
+  'geekblue-6': 'mix(@geekblue-base, @component-background, 85%)',
+  'geekblue-7': "mix(color(~`colorPalette('@{geekblue-base}', 5) `), @component-background, 85%)",
+  'geekblue-8': "mix(color(~`colorPalette('@{geekblue-base}', 4) `), @component-background, 95%)",
+  'geekblue-9': "mix(color(~`colorPalette('@{geekblue-base}', 3) `), @component-background, 95%)",
+  'geekblue-10': "mix(color(~`colorPalette('@{geekblue-base}', 2) `), @component-background, 95%)",
+  'lime-base': '#a0d911',
+  'lime-1': "mix(color(~`colorPalette('@{lime-base}', 8) `), @component-background, 15%)",
+  'lime-2': "mix(color(~`colorPalette('@{lime-base}', 7) `), @component-background, 25%)",
+  'lime-3': 'mix(@lime-base, @component-background, 30%)',
+  'lime-4': 'mix(@lime-base, @component-background, 45%)',
+  'lime-5': 'mix(@lime-base, @component-background, 65%)',
+  'lime-6': 'mix(@lime-base, @component-background, 85%)',
+  'lime-7': "mix(color(~`colorPalette('@{lime-base}', 5) `), @component-background, 85%)",
+  'lime-8': "mix(color(~`colorPalette('@{lime-base}', 4) `), @component-background, 95%)",
+  'lime-9': "mix(color(~`colorPalette('@{lime-base}', 3) `), @component-background, 95%)",
+  'lime-10': "mix(color(~`colorPalette('@{lime-base}', 2) `), @component-background, 95%)",
+  'gold-base': '#faad14',
+  'gold-1': "mix(color(~`colorPalette('@{gold-base}', 8) `), @component-background, 15%)",
+  'gold-2': "mix(color(~`colorPalette('@{gold-base}', 7) `), @component-background, 25%)",
+  'gold-3': 'mix(@gold-base, @component-background, 30%)',
+  'gold-4': 'mix(@gold-base, @component-background, 45%)',
+  'gold-5': 'mix(@gold-base, @component-background, 65%)',
+  'gold-6': 'mix(@gold-base, @component-background, 85%)',
+  'gold-7': "mix(color(~`colorPalette('@{gold-base}', 5) `), @component-background, 85%)",
+  'gold-8': "mix(color(~`colorPalette('@{gold-base}', 4) `), @component-background, 95%)",
+  'gold-9': "mix(color(~`colorPalette('@{gold-base}', 3) `), @component-background, 95%)",
+  'gold-10': "mix(color(~`colorPalette('@{gold-base}', 2) `), @component-background, 95%)",
+  'preset-colors':
+    'pink, magenta, red, volcano, orange, yellow, gold, cyan, lime, green, blue, geekblue,\n' +
+    '  purple',
+  theme: 'dark',
+  'ant-prefix': 'ant',
+  'html-selector': 'html',
+  'primary-color': '@blue-6',
+  'info-color': '@blue-6',
+  'success-color': '@green-6',
+  'processing-color': '@blue-6',
+  'error-color': '@red-5',
+  'highlight-color': '@red-5',
+  'warning-color': '@gold-6',
+  'normal-color': '#d9d9d9',
+  white: '#fff',
+  black: '#000',
+  'primary-1': "mix(color(~`colorPalette('@{primary-color}', 8) `), @component-background, 15%)",
+  'primary-2': "mix(color(~`colorPalette('@{primary-color}', 7) `), @component-background, 25%)",
+  'primary-3': 'mix(@primary-color, @component-background, 30%)',
+  'primary-4': 'mix(@primary-color, @component-background, 45%)',
+  'primary-5': 'mix(@primary-color, @component-background, 65%)',
+  'primary-6': '@primary-color',
+  'primary-7': "mix(color(~`colorPalette('@{primary-color}', 5) `), @component-background, 85%)",
+  'primary-8': "mix(color(~`colorPalette('@{primary-color}', 4) `), @component-background, 95%)",
+  'primary-9': "mix(color(~`colorPalette('@{primary-color}', 3) `), @component-background, 95%)",
+  'primary-10': "mix(color(~`colorPalette('@{primary-color}', 2) `), @component-background, 95%)",
+  'body-background': '@black',
+  'component-background': '#141414',
+  'popover-background': '#1f1f1f',
+  'font-family':
+    "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,\n" +
+    "  'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif",
+  'code-family': "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace",
+  'text-color': 'fade(@white, 65%)',
+  'text-color-secondary': 'fade(@white, 45%)',
+  'text-color-inverse': '@white',
+  'icon-color': 'inherit',
+  'icon-color-hover': 'fade(@white, 75%)',
+  'heading-color': 'fade(@white, 85%)',
+  'heading-color-dark': 'fade(@white, 100%)',
+  'text-color-dark': 'fade(@white, 85%)',
+  'text-color-secondary-dark': 'fade(@white, 65%)',
+  'text-selection-bg': '@primary-color',
+  'font-variant-base': 'tabular-nums',
+  'font-feature-settings-base': 'tnum',
+  'font-size-base': '14px',
+  'font-size-lg': '@font-size-base + 2px',
+  'font-size-sm': '12px',
+  'heading-1-size': 'ceil(@font-size-base * 2.71)',
+  'heading-2-size': 'ceil(@font-size-base * 2.14)',
+  'heading-3-size': 'ceil(@font-size-base * 1.71)',
+  'heading-4-size': 'ceil(@font-size-base * 1.42)',
+  'line-height-base': '1.5715',
+  'border-radius-base': '2px',
+  'padding-lg': '24px',
+  'padding-md': '16px',
+  'padding-sm': '12px',
+  'padding-xs': '8px',
+  'control-padding-horizontal': '@padding-sm',
+  'control-padding-horizontal-sm': '@padding-xs',
+  'item-active-bg': '@primary-1',
+  'item-hover-bg': 'fade(@white, 8%)',
+  'iconfont-css-prefix': 'anticon',
+  'link-color': '@primary-color',
+  'link-hover-color': '@primary-5',
+  'link-active-color': '@primary-7',
+  'link-decoration': 'none',
+  'link-hover-decoration': 'none',
+  'ease-base-out': 'cubic-bezier(0.7, 0.3, 0.1, 1)',
+  'ease-base-in': 'cubic-bezier(0.9, 0, 0.3, 0.7)',
+  'ease-out': 'cubic-bezier(0.215, 0.61, 0.355, 1)',
+  'ease-in': 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
+  'ease-in-out': 'cubic-bezier(0.645, 0.045, 0.355, 1)',
+  'ease-out-back': 'cubic-bezier(0.12, 0.4, 0.29, 1.46)',
+  'ease-in-back': 'cubic-bezier(0.71, -0.46, 0.88, 0.6)',
+  'ease-in-out-back': 'cubic-bezier(0.71, -0.46, 0.29, 1.46)',
+  'ease-out-circ': 'cubic-bezier(0.08, 0.82, 0.17, 1)',
+  'ease-in-circ': 'cubic-bezier(0.6, 0.04, 0.98, 0.34)',
+  'ease-in-out-circ': 'cubic-bezier(0.78, 0.14, 0.15, 0.86)',
+  'ease-out-quint': 'cubic-bezier(0.23, 1, 0.32, 1)',
+  'ease-in-quint': 'cubic-bezier(0.755, 0.05, 0.855, 0.06)',
+  'ease-in-out-quint': 'cubic-bezier(0.86, 0, 0.07, 1)',
+  'border-color-base': '#434343',
+  'border-color-split': '@popover-background',
+  'border-color-split-popover': '#303030',
+  'border-color-inverse': '@white',
+  'border-width-base': '1px',
+  'border-style-base': 'solid',
+  'outline-blur-size': '0',
+  'outline-width': '2px',
+  'outline-color': '@primary-color',
+  'background-color-light': 'fade(@white, 4%)',
+  'background-color-base': 'fade(@white, 8%)',
+  'disabled-color': 'fade(@white, 30%)',
+  'disabled-bg': '@background-color-base',
+  'disabled-color-dark': 'fade(@white, 30%)',
+  'shadow-color': 'rgba(0, 0, 0, 0.45)',
+  'shadow-color-inverse': '@component-background',
+  'box-shadow-base': '@shadow-2',
+  'shadow-1-up':
+    '0 -6px 16px -8px rgba(0, 0, 0, 0.24), 0 -9px 28px 0 rgba(0, 0, 0, 0.15),\n' +
+    '  0 -12px 48px 16px rgba(0, 0, 0, 0.09)',
+  'shadow-1-down':
+    '0 6px 16px -8px rgba(0, 0, 0, 0.24), 0 9px 28px 0 rgba(0, 0, 0, 0.15),\n' +
+    '  0 12px 48px 16px rgba(0, 0, 0, 0.09)',
+  'shadow-1-left':
+    '-6px 0 16px -8px rgba(0, 0, 0, 0.08), -9px 0 28px 0 rgba(0, 0, 0, 0.05),\n' +
+    '  -12px 0 48px 16px rgba(0, 0, 0, 0.03)',
+  'shadow-1-right':
+    '6px 0 16px -8px rgba(0, 0, 0, 0.24), 9px 0 28px 0 rgba(0, 0, 0, 0.15),\n' +
+    '  12px 0 48px 16px rgba(0, 0, 0, 0.09)',
+  'shadow-2':
+    '0 3px 6px -4px rgba(0, 0, 0, 0.36), 0 6px 16px 0 rgba(0, 0, 0, 0.24),\n' +
+    '  0 9px 28px 8px rgba(0, 0, 0, 0.15)',
+  'btn-font-weight': '400',
+  'btn-border-radius-base': '@border-radius-base',
+  'btn-border-radius-sm': '@border-radius-base',
+  'btn-border-width': '@border-width-base',
+  'btn-border-style': '@border-style-base',
+  'btn-shadow': '0 2px 0 rgba(0, 0, 0, 0.015)',
+  'btn-primary-shadow': '0 2px 0 rgba(0, 0, 0, 0.045)',
+  'btn-text-shadow': '0 -1px 0 rgba(0, 0, 0, 0.12)',
+  'btn-primary-color': '#fff',
+  'btn-primary-bg': '@primary-color',
+  'btn-default-color': '@text-color',
+  'btn-default-bg': 'transparent',
+  'btn-default-border': '@border-color-base',
+  'btn-danger-color': '#fff',
+  'btn-danger-bg': '@error-color',
+  'btn-danger-border': '@error-color',
+  'btn-disable-color': '@disabled-color',
+  'btn-disable-bg': '@disabled-bg',
+  'btn-disable-border': '@border-color-base',
+  'btn-default-ghost-color': '@text-color',
+  'btn-default-ghost-bg': 'transparent',
+  'btn-default-ghost-border': 'fade(@white, 25%)',
+  'btn-padding-base': '0 @padding-md - 1px',
+  'btn-font-size-lg': '@font-size-lg',
+  'btn-font-size-sm': '@font-size-base',
+  'btn-padding-lg': '@btn-padding-base',
+  'btn-padding-sm': '0 @padding-xs - 1px',
+  'btn-height-base': '32px',
+  'btn-height-lg': '40px',
+  'btn-height-sm': '24px',
+  'btn-circle-size': '@btn-height-base',
+  'btn-circle-size-lg': '@btn-height-lg',
+  'btn-circle-size-sm': '@btn-height-sm',
+  'btn-square-size': '@btn-height-base',
+  'btn-square-size-lg': '@btn-height-lg',
+  'btn-square-size-sm': '@btn-height-sm',
+  'btn-group-border': '@primary-5',
+  'checkbox-size': '16px',
+  'checkbox-color': '@primary-color',
+  'checkbox-check-color': '#fff',
+  'checkbox-check-bg': 'transparent',
+  'checkbox-border-width': '@border-width-base',
+  'descriptions-bg': '@component-background',
+  'dropdown-selected-color': '@primary-color',
+  'dropdown-menu-submenu-disabled-bg': 'transparent',
+  'empty-font-size': '@font-size-base',
+  'radio-size': '16px',
+  'radio-dot-color': '@primary-color',
+  'radio-dot-disabled-color': 'fade(@white, 20%)',
+  'radtio-solid-checked-color': '@white',
+  'radio-button-bg': '@btn-default-bg',
+  'radio-button-checked-bg': '@btn-default-bg',
+  'radio-button-color': '@btn-default-color',
+  'radio-button-hover-color': '@primary-5',
+  'radio-button-active-color': '@primary-7',
+  'radio-disabled-button-checked-bg': 'fade(@white, 20%)',
+  'radio-disabled-button-checked-color': '@black',
+  'screen-xs': '480px',
+  'screen-xs-min': '@screen-xs',
+  'screen-sm': '576px',
+  'screen-sm-min': '@screen-sm',
+  'screen-md': '768px',
+  'screen-md-min': '@screen-md',
+  'screen-lg': '992px',
+  'screen-lg-min': '@screen-lg',
+  'screen-xl': '1200px',
+  'screen-xl-min': '@screen-xl',
+  'screen-xxl': '1600px',
+  'screen-xxl-min': '@screen-xxl',
+  'screen-xs-max': '(@screen-sm-min - 1px)',
+  'screen-sm-max': '(@screen-md-min - 1px)',
+  'screen-md-max': '(@screen-lg-min - 1px)',
+  'screen-lg-max': '(@screen-xl-min - 1px)',
+  'screen-xl-max': '(@screen-xxl-min - 1px)',
+  'grid-columns': '24',
+  'grid-gutter-width': '0',
+  'layout-body-background': '@body-background',
+  'layout-header-background': '@component-background',
+  'layout-footer-background': '@layout-body-background',
+  'layout-header-height': '64px',
+  'layout-header-padding': '0 50px',
+  'layout-footer-padding': '24px 50px',
+  'layout-sider-background': '@component-background',
+  'layout-trigger-height': '48px',
+  'layout-trigger-background': '@component-background',
+  'layout-trigger-color': '#fff',
+  'layout-zero-trigger-width': '36px',
+  'layout-zero-trigger-height': '42px',
+  'layout-sider-background-light': '#fff',
+  'layout-trigger-background-light': '#fff',
+  'layout-trigger-color-light': '@text-color',
+  'zindex-table-fixed': 'auto',
+  'zindex-affix': '10',
+  'zindex-back-top': '10',
+  'zindex-badge': '10',
+  'zindex-picker-panel': '10',
+  'zindex-popup-close': '10',
+  'zindex-modal': '1000',
+  'zindex-modal-mask': '1000',
+  'zindex-message': '1010',
+  'zindex-notification': '1010',
+  'zindex-popover': '1030',
+  'zindex-dropdown': '1050',
+  'zindex-picker': '1050',
+  'zindex-tooltip': '1060',
+  'animation-duration-slow': '0.3s',
+  'animation-duration-base': '0.2s',
+  'animation-duration-fast': '0.1s',
+  'collapse-panel-border-radius': '@border-radius-base',
+  'dropdown-menu-bg': '@popover-background',
+  'dropdown-vertical-padding': '5px',
+  'dropdown-font-size': '@font-size-base',
+  'dropdown-line-height': '22px',
+  'label-required-color': '@highlight-color',
+  'label-color': '@heading-color',
+  'form-warning-input-bg': '@input-bg',
+  'form-item-margin-bottom': '24px',
+  'form-item-trailing-colon': 'true',
+  'form-vertical-label-padding': '0 0 8px',
+  'form-vertical-label-margin': '0',
+  'form-item-label-colon-margin-right': '8px',
+  'form-item-label-colon-margin-left': '2px',
+  'form-error-input-bg': '@input-bg',
+  'input-height-base': '32px',
+  'input-height-lg': '40px',
+  'input-height-sm': '24px',
+  'input-padding-horizontal': '@control-padding-horizontal - 1px',
+  'input-padding-horizontal-base': '@input-padding-horizontal',
+  'input-padding-horizontal-sm': '@control-padding-horizontal-sm - 1px',
+  'input-padding-horizontal-lg': '@input-padding-horizontal',
+  'input-padding-vertical-base': '4px',
+  'input-padding-vertical-sm': '1px',
+  'input-padding-vertical-lg': '6px',
+  'input-placeholder-color': 'fade(@white, 30%)',
+  'input-color': '@text-color',
+  'input-border-color': '@border-color-base',
+  'input-bg': 'transparent',
+  'input-number-hover-border-color': '@input-hover-border-color',
+  'input-number-handler-active-bg': '@popover-background',
+  'input-number-handler-hover-bg': '@primary-5',
+  'input-number-handler-bg': 'transparent',
+  'input-number-handler-border-color': '@border-color-base',
+  'input-addon-bg': '@background-color-light',
+  'input-hover-border-color': '@primary-5',
+  'input-disabled-bg': '@disabled-bg',
+  'input-outline-offset': '0 0',
+  'input-icon-hover-color': 'fade(@white, 85%)',
+  'mentions-dropdown-bg': '@popover-background',
+  'mentions-dropdown-menu-item-hover-bg': '@mentions-dropdown-bg',
+  'select-border-color': '@border-color-base',
+  'select-item-selected-font-weight': '600',
+  'select-dropdown-bg': '@popover-background',
+  'select-item-selected-bg': '@primary-1',
+  'select-item-active-bg': '@item-hover-bg',
+  'select-background': 'transparent',
+  'select-clear-background': '@component-background',
+  'select-selection-item-bg': 'fade(@white, 8)',
+  'select-selection-item-border-color': '@border-color-split-popover',
+  'cascader-bg': 'transparent',
+  'cascader-item-selected-bg': '@primary-1',
+  'cascader-menu-bg': '@popover-background',
+  'cascader-menu-border-color-split': '@border-color-split-popover',
+  'anchor-bg': 'inherit',
+  'anchor-border-color': '@border-color-split',
+  'tooltip-max-width': '250px',
+  'tooltip-color': '#fff',
+  'tooltip-bg': '#434343',
+  'tooltip-arrow-width': '5px',
+  'tooltip-distance': '@tooltip-arrow-width - 1px + 4px',
+  'tooltip-arrow-color': '@tooltip-bg',
+  'popover-bg': '@popover-background',
+  'popover-color': '@text-color',
+  'popover-min-width': '177px',
+  'popover-arrow-width': '6px',
+  'popover-arrow-color': '@popover-bg',
+  'popover-arrow-outer-color': '@popover-bg',
+  'popover-distance': '@popover-arrow-width + 4px',
+  'modal-body-padding': '24px',
+  'modal-header-bg': '@popover-background',
+  'modal-header-border-color-split': '@border-color-split-popover',
+  'modal-content-bg': '@popover-background',
+  'modal-heading-color': '@heading-color',
+  'modal-footer-bg': 'transparent',
+  'modal-footer-border-color-split': '@border-color-split-popover',
+  'modal-mask-bg': 'fade(@black, 45%)',
+  'progress-default-color': '@processing-color',
+  'progress-remaining-color': '@background-color-base',
+  'progress-text-color': '@text-color',
+  'progress-radius': '100px',
+  'menu-inline-toplevel-item-height': '40px',
+  'menu-item-height': '40px',
+  'menu-collapsed-width': '80px',
+  'menu-bg': '@component-background',
+  'menu-popup-bg': '@popover-background',
+  'menu-item-color': '@text-color',
+  'menu-highlight-color': '@primary-color',
+  'menu-item-active-bg': '@primary-1',
+  'menu-item-active-border-width': '3px',
+  'menu-item-group-title-color': '@text-color-secondary',
+  'menu-icon-size': '@font-size-base',
+  'menu-icon-size-lg': '@font-size-lg',
+  'menu-item-vertical-margin': '4px',
+  'menu-item-font-size': '@font-size-base',
+  'menu-item-boundary-margin': '8px',
+  'menu-dark-color': '@text-color-secondary-dark',
+  'menu-dark-bg': '@popover-background',
+  'menu-dark-arrow-color': '#fff',
+  'menu-dark-submenu-bg': '@black',
+  'menu-dark-highlight-color': '#fff',
+  'menu-dark-item-active-bg': '@primary-color',
+  'menu-dark-selected-item-icon-color': '@white',
+  'menu-dark-selected-item-text-color': '@white',
+  'menu-dark-item-hover-bg': 'transparent',
+  'spin-dot-size-sm': '14px',
+  'spin-dot-size': '20px',
+  'spin-dot-size-lg': '32px',
+  'table-bg': '@component-background',
+  'table-header-bg': '#1d1d1d',
+  'table-header-color': '@heading-color',
+  'table-header-sort-bg': '#262626',
+  'table-body-sort-bg': 'fade(@white, 1%)',
+  'table-row-hover-bg': '#262626',
+  'table-selected-row-color': 'inherit',
+  'table-selected-row-bg': '@primary-1',
+  'table-body-selected-sort-bg': '@table-selected-row-bg',
+  'table-selected-row-hover-bg': '@table-selected-row-bg',
+  'table-expanded-row-bg': '#fbfbfb',
+  'table-padding-vertical': '16px',
+  'table-padding-horizontal': '16px',
+  'table-border-radius-base': '@border-radius-base',
+  'table-footer-bg': '@background-color-light',
+  'table-footer-color': '@heading-color',
+  'table-header-bg-sm': '@table-header-bg',
+  'table-header-sort-active-bg': '#262626',
+  'table-header-filter-active-bg': '#434343',
+  'table-filter-btns-bg': '@popover-background',
+  'tag-default-bg': '@background-color-light',
+  'tag-default-color': '@text-color',
+  'tag-font-size': '@font-size-sm',
+  'time-picker-bg': '@popover-background',
+  'time-picker-panel-column-width': '56px',
+  'time-picker-panel-width': '@time-picker-panel-column-width * 3',
+  'time-picker-selected-bg': '@item-active-bg',
+  'time-picker-inner-bg': '@popover-background',
+  'time-picker-panel-inner-bg': '@popover-background',
+  'month-panel-bg': '@popover-background',
+  'year-panel-bg': '@popover-background',
+  'picker-basic-cell-hover-color': '@background-color-light',
+  'picker-basic-cell-hover-with-range-color': '#303030',
+  'picker-basic-cell-disabled-bg': '#303030',
+  'picker-border-color': '@border-color-split-popover',
+  'picker-date-hover-range-border-color': 'lighten(@primary-color, 20%)',
+  'calendar-bg': '@popover-background',
+  'calendar-input-bg': '@calendar-bg',
+  'calendar-border-color': 'transparent',
+  'calendar-item-active-bg': '@background-color-base',
+  'carousel-dot-width': '16px',
+  'carousel-dot-height': '3px',
+  'carousel-dot-active-width': '24px',
+  'badge-height': '20px',
+  'badge-dot-size': '6px',
+  'badge-font-size': '@font-size-sm',
+  'badge-font-weight': 'normal',
+  'badge-status-size': '6px',
+  'badge-text-color': '@white',
+  'rate-star-color': '@yellow-6',
+  'rate-star-bg': '@border-color-split',
+  'card-head-color': '@heading-color',
+  'card-head-background': 'transparent',
+  'card-head-padding': '16px',
+  'card-inner-head-padding': '12px',
+  'card-padding-base': '24px',
+  'card-actions-background': 'fade(@white, 4%)',
+  'card-skeleton-bg': '#303030',
+  'card-background': '@component-background',
+  'card-shadow':
+    '0 1px 2px -2px rgba(0, 0, 0, 0.48), 0 3px 6px 0 rgba(0, 0, 0, 0.36),\n' +
+    '  0 5px 12px 4px rgba(0, 0, 0, 0.27)',
+  'card-radius': '@border-radius-base',
+  'comment-bg': '@component-background',
+  'comment-padding-base': '16px 0',
+  'comment-nest-indent': '44px',
+  'comment-font-size-base': '@font-size-base',
+  'comment-font-size-sm': '@font-size-sm',
+  'comment-author-name-color': '@text-color-secondary',
+  'comment-author-time-color': '#ccc',
+  'comment-action-color': '@text-color-secondary',
+  'comment-action-hover-color': '#595959',
+  'tabs-card-head-background': '@background-color-light',
+  'tabs-card-height': '40px',
+  'tabs-card-active-color': '@primary-color',
+  'tabs-title-font-size': '@font-size-base',
+  'tabs-title-font-size-lg': '@font-size-lg',
+  'tabs-title-font-size-sm': '@font-size-base',
+  'tabs-ink-bar-color': '@primary-color',
+  'tabs-bar-margin': '0 0 16px 0',
+  'tabs-horizontal-margin': '0 32px 0 0',
+  'tabs-horizontal-padding': '12px 16px',
+  'tabs-horizontal-padding-lg': '16px',
+  'tabs-horizontal-padding-sm': '8px 16px',
+  'tabs-vertical-padding': '8px 24px',
+  'tabs-vertical-margin': '0 0 16px 0',
+  'tabs-scrolling-size': '32px',
+  'tabs-highlight-color': '@primary-color',
+  'tabs-hover-color': '@primary-5',
+  'tabs-active-color': '@primary-7',
+  'tabs-card-gutter': '2px',
+  'tabs-card-tab-active-border-top': '2px solid transparent',
+  'back-top-color': '#fff',
+  'back-top-bg': '@text-color-secondary',
+  'back-top-hover-bg': '@text-color',
+  'avatar-size-base': '32px',
+  'avatar-size-lg': '40px',
+  'avatar-size-sm': '24px',
+  'avatar-font-size-base': '18px',
+  'avatar-font-size-lg': '24px',
+  'avatar-font-size-sm': '14px',
+  'avatar-bg': '#5a5a5a',
+  'avatar-color': '#fff',
+  'avatar-border-radius': '@border-radius-base',
+  'switch-height': '22px',
+  'switch-sm-height': '16px',
+  'switch-sm-checked-margin-left': '-(@switch-sm-height - 3px)',
+  'switch-disabled-opacity': '0.4',
+  'switch-color': '@primary-color',
+  'switch-bg': '@white',
+  'switch-shadow-color': 'fade(#00230b, 20%)',
+  'pagination-item-bg': 'transparent',
+  'pagination-item-size': '32px',
+  'pagination-item-size-sm': '24px',
+  'pagination-font-family': 'Arial',
+  'pagination-font-weight-active': '500',
+  'pagination-item-bg-active': 'transparent',
+  'pagination-item-link-bg': 'transparent',
+  'pagination-item-disabled-color-active': '@black',
+  'pagination-item-disabled-bg-active': 'fade(@white, 25%)',
+  'page-header-padding': '24px',
+  'page-header-padding-vertical': '16px',
+  'page-header-padding-breadcrumb': '12px',
+  'page-header-back-color': '@icon-color',
+  'breadcrumb-base-color': '@text-color-secondary',
+  'breadcrumb-last-item-color': '@text-color',
+  'breadcrumb-font-size': '@font-size-base',
+  'breadcrumb-icon-font-size': '@font-size-base',
+  'breadcrumb-link-color': '@text-color-secondary',
+  'breadcrumb-link-color-hover': '@primary-5',
+  'breadcrumb-separator-color': '@text-color-secondary',
+  'breadcrumb-separator-margin': '0 @padding-xs',
+  'slider-margin': '10px 6px 10px',
+  'slider-rail-background-color': '#262626',
+  'slider-rail-background-color-hover': '@border-color-base',
+  'slider-track-background-color': '@primary-3',
+  'slider-track-background-color-hover': '@primary-4',
+  'slider-handle-border-width': '2px',
+  'slider-handle-background-color': '@component-background',
+  'slider-handle-color': '@primary-3',
+  'slider-handle-color-hover': '@primary-4',
+  'slider-handle-color-focus': 'tint(@primary-color, 20%)',
+  'slider-handle-color-focus-shadow': 'fade(@primary-color, 20%)',
+  'slider-handle-color-tooltip-open': '@primary-color',
+  'slider-handle-shadow': '0',
+  'slider-dot-border-color': '@border-color-split-popover',
+  'slider-dot-border-color-active': '@primary-4',
+  'slider-disabled-color': '@disabled-color',
+  'slider-disabled-background-color': '@component-background',
+  'tree-bg': 'transparent',
+  'tree-title-height': '24px',
+  'tree-child-padding': '18px',
+  'tree-directory-selected-color': '#fff',
+  'tree-directory-selected-bg': '@primary-color',
+  'tree-node-hover-bg': '@item-hover-bg',
+  'tree-node-selected-bg': '@primary-2',
+  'collapse-header-padding': '12px 16px',
+  'collapse-header-padding-extra': '40px',
+  'collapse-header-bg': '@background-color-light',
+  'collapse-content-padding': '@padding-md',
+  'collapse-content-bg': '@component-background',
+  'skeleton-color': '#303030',
+  'skeleton-to-color': 'fade(@white, 16%)',
+  'transfer-header-height': '40px',
+  'transfer-disabled-bg': '@disabled-bg',
+  'transfer-list-height': '200px',
+  'transfer-item-hover-bg': '#262626',
+  'message-notice-content-padding': '10px 16px',
+  'message-notice-content-bg': '@popover-background',
+  'wave-animation-width': '6px',
+  'alert-success-border-color': '@green-3',
+  'alert-success-bg-color': '@green-1',
+  'alert-success-icon-color': '@success-color',
+  'alert-info-border-color': '@primary-3',
+  'alert-info-bg-color': '@primary-1',
+  'alert-info-icon-color': '@info-color',
+  'alert-warning-border-color': '@gold-3',
+  'alert-warning-bg-color': '@gold-1',
+  'alert-warning-icon-color': '@warning-color',
+  'alert-error-border-color': '@red-3',
+  'alert-error-bg-color': '@red-1',
+  'alert-error-icon-color': '@error-color',
+  'list-header-background': 'transparent',
+  'list-footer-background': 'transparent',
+  'list-empty-text-padding': '@padding-md',
+  'list-item-padding': '@padding-sm 0',
+  'list-item-meta-margin-bottom': '@padding-md',
+  'list-item-meta-avatar-margin-right': '@padding-md',
+  'list-item-meta-title-margin-bottom': '@padding-sm',
+  'statistic-title-font-size': '@font-size-base',
+  'statistic-content-font-size': '24px',
+  'statistic-unit-font-size': '16px',
+  'statistic-font-family': '@font-family',
+  'drawer-header-padding': '16px 24px',
+  'drawer-body-padding': '24px',
+  'drawer-bg': '@popover-background',
+  'timeline-width': '2px',
+  'timeline-color': '@border-color-split',
+  'timeline-dot-border-width': '2px',
+  'timeline-dot-color': '@primary-color',
+  'timeline-dot-bg': 'transparent',
+  'typography-title-font-weight': '600',
+  'typography-title-margin-top': '1.2em',
+  'typography-title-margin-bottom': '0.5em',
+  'upload-actions-color': '@text-color-secondary',
+  'process-tail-color': 'fade(@white, 12%)',
+  'steps-nav-arrow-color': 'fade(@white, 20%)',
+  'notification-bg': '@popover-background',
+};
diff --git a/scripts/generateColorLess.js b/scripts/generateColorLess.js
index 51b5b506ec..48c467b878 100644
--- a/scripts/generateColorLess.js
+++ b/scripts/generateColorLess.js
@@ -1,14 +1,24 @@
 #!/usr/bin/env node
 const path = require('path');
-const { generateTheme } = require('antd-theme-generator');
+const genCss = require('antd-pro-merge-less');
+const dark = require('./dart');
 
-const options = {
-  stylesDir: path.join(__dirname, '../site/theme/static'),
-  antdStylesDir: path.join(__dirname, '../components'),
-  varFile: path.join(__dirname, '../components/style/themes/default.less'),
-  mainLessFile: path.join(__dirname, '../site/theme/static/index.less'),
-  themeVariables: ['@primary-color'],
-  outputFilePath: path.join(__dirname, '../_site/color.less'),
-};
-
-generateTheme(options);
+genCss(
+  path.join(__dirname, '..'),
+  [
+    {
+      theme: 'dark',
+      fileName: './_site/dark.css',
+      modifyVars: {
+        ...dark,
+        '@site-markdown-code-bg': '@input-bg',
+      },
+    },
+  ],
+  {
+    ignoreAntd: true,
+    isModule: false,
+    cache: false,
+    ignoreProLayout: true,
+  },
+);
diff --git a/site/theme/static/common.less b/site/theme/static/common.less
index 48567ef92c..11a7da1733 100644
--- a/site/theme/static/common.less
+++ b/site/theme/static/common.less
@@ -12,7 +12,7 @@ body {
   font-size: 14px;
   font-family: @font-family;
   line-height: 1.5;
-  background: #fff;
+  background: @body-background;
   transition: background 1s cubic-bezier(0.075, 0.82, 0.165, 1);
 }
 
@@ -172,7 +172,7 @@ a {
     color: @primary-color !important;
   }
   .path2::before {
-    color: #fff !important;
+    color: @body-background !important;
   }
 }
 
diff --git a/site/theme/static/demo.less b/site/theme/static/demo.less
index 2735bae198..c99180ac90 100644
--- a/site/theme/static/demo.less
+++ b/site/theme/static/demo.less
@@ -66,7 +66,7 @@
     margin-left: 16px;
     padding: 1px 8px;
     color: #777;
-    background: #fff;
+    background: @body-background;
     border-radius: @border-radius-base @border-radius-base 0 0;
     transition: background-color 0.4s;
 
@@ -190,7 +190,7 @@
     pre {
       margin: 0;
       padding: 0;
-      background: #fff;
+      background: @body-background;
     }
     &:not(:first-child) {
       border-top: 1px dashed @site-border-color-split;
@@ -245,7 +245,7 @@
     font-size: 14px;
     line-height: 20px;
     text-align: center;
-    background: #fff;
+    background: @body-background;
     border-radius: 20px;
     cursor: pointer;
     transition: all 0.24s;
diff --git a/site/theme/static/docsearch.less b/site/theme/static/docsearch.less
index 5db061d2a0..caa2ed87d3 100644
--- a/site/theme/static/docsearch.less
+++ b/site/theme/static/docsearch.less
@@ -5,6 +5,10 @@
 
     [class^='ds-dataset-'] {
       border: none;
+      background: @component-background;
+      .algolia-docsearch-suggestion {
+        background: @component-background;
+      }
     }
 
     &::before {
diff --git a/site/theme/static/home.less b/site/theme/static/home.less
index f8a3d00c42..7ea685561d 100644
--- a/site/theme/static/home.less
+++ b/site/theme/static/home.less
@@ -118,7 +118,7 @@
     }
 
     .banner-btn.components {
-      color: #fff;
+      color: @body-background;
       background: @home-bg-color;
     }
 
@@ -183,7 +183,7 @@ svg {
   background: @home-bg-color;
   background: linear-gradient(to bottom, rgba(47, 84, 235, 1) 0%, rgba(58, 64, 212, 1) 100%);
   h2 {
-    color: #fff !important;
+    color: @body-background !important;
   }
   &-block {
     position: relative;
@@ -193,12 +193,12 @@ svg {
     margin: auto;
     text-align: center;
     h3 {
-      color: #fff;
+      color: @body-background;
       font-weight: 400;
       font-size: 20px;
     }
     p {
-      color: #fff;
+      color: @body-background;
     }
     &:hover .page1-image {
       box-shadow: 0 6px 10px rgba(5, 26, 180, 0.35);
@@ -212,7 +212,7 @@ svg {
     width: 120px;
     height: 120px;
     margin: 46px auto 40px;
-    background: #fff;
+    background: @body-background;
     border-radius: 100%;
     transition: transform 0.45s @ease-out, box-shadow 0.45s @ease-out;
     img {
@@ -254,12 +254,12 @@ svg {
   &-components {
     position: initial;
     padding: 56px;
-    color: #fff;
+    color: @body-background;
     line-height: 32px;
     background: @home-bg-color;
     h3 {
       margin: 0 auto 32px;
-      color: #fff;
+      color: @body-background;
       font-size: 28px;
     }
     .components-button-wrapper {
@@ -269,14 +269,14 @@ svg {
       a {
         display: block;
         margin-top: 16px;
-        color: #fff;
+        color: @body-background;
         line-height: 1.5em;
       }
     }
   }
   &-product {
     padding: 48px 56px;
-    background: #fff;
+    background: @body-background;
     .product-block {
       margin-bottom: 24px;
       color: @home-text-color;
@@ -304,7 +304,7 @@ svg {
             right: 0;
             display: inline-block;
             padding: 0 2px;
-            color: #fff;
+            color: @body-background;
             font-size: 12px;
             line-height: 16px;
             background: #f5222d;
diff --git a/site/theme/static/preview-img.less b/site/theme/static/preview-img.less
index d7e0fc5da4..96bba54716 100644
--- a/site/theme/static/preview-img.less
+++ b/site/theme/static/preview-img.less
@@ -96,7 +96,7 @@
 .preview-image-box img {
   max-width: 100%;
   padding: 12px;
-  background: #fff;
+  background: @body-background;
   border-radius: @border-radius-base;
   cursor: pointer;
   transition: all 0.3s;
@@ -108,7 +108,8 @@
 
 .preview-image-boxes.preview-image-boxes-with-carousel img {
   padding: 0;
-  box-shadow: 0 1px 0 0 #ddd, 0 3px 0 0 #fff, 0 4px 0 0 #ddd, 0 6px 0 0 #fff, 0 7px 0 0 #ddd;
+  box-shadow: 0 1px 0 0 #ddd, 0 3px 0 0 @body-background, 0 4px 0 0 #ddd, 0 6px 0 0 @body-background,
+    0 7px 0 0 #ddd;
 }
 
 .preview-image-box img:hover {
diff --git a/site/theme/static/responsive.less b/site/theme/static/responsive.less
index 7ce075a714..8949d14096 100644
--- a/site/theme/static/responsive.less
+++ b/site/theme/static/responsive.less
@@ -254,7 +254,7 @@
   }
   .page2 {
     min-height: 840px;
-    background: #fff;
+    background: @body-background;
     &-content {
       box-shadow: none;
     }
@@ -327,7 +327,7 @@
     .page3-block {
       margin-bottom: 32px;
       padding: 24px;
-      background: #fff;
+      background: @body-background;
       border-radius: 4px;
       box-shadow: 0 8px 16px rgba(174, 185, 193, 0.3);
       &:nth-child(2) {
diff --git a/site/theme/static/toc.less b/site/theme/static/toc.less
index ed49ef636e..3764571961 100644
--- a/site/theme/static/toc.less
+++ b/site/theme/static/toc.less
@@ -53,7 +53,7 @@ ul.toc > li {
     max-height: ~'calc(100vh - 16px)';
     overflow-x: hidden;
     overflow-y: auto;
-    background: #fff;
+    background: @body-background;
   }
 }
 
@@ -62,6 +62,6 @@ ul.toc > li {
   right: 20px;
   bottom: 88px;
   .ant-affix {
-    background: #fff;
+    background: @body-background;
   }
 }
diff --git a/site/theme/template/Layout/index.jsx b/site/theme/template/Layout/index.jsx
index 36581678ac..da92ee3875 100644
--- a/site/theme/template/Layout/index.jsx
+++ b/site/theme/template/Layout/index.jsx
@@ -114,6 +114,25 @@ export default class Layout extends React.Component {
   }
 
   setTheme = theme => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+    if (theme !== 'dark') {
+      const dom = document.getElementById('theme-style');
+      if (dom) {
+        dom.remove();
+      }
+      localStorage.removeItem('site-theme');
+    } else {
+      const style = document.createElement('link');
+      style.type = 'text/css';
+      style.rel = 'stylesheet';
+      style.id = 'theme-style';
+      style.href = '/dark.css';
+
+      localStorage.setItem('site-theme', 'dark');
+      document.body.append(style);
+    }
     this.setState({
       theme,
     });