diff --git a/config/config.js b/config/config.js
index c7910ea693cb4c979ee30fcf8872b1b5166472cc..3da632ed4d8cbeaaac7740d857bf448fe3e4408b 100644
--- a/config/config.js
+++ b/config/config.js
@@ -3,6 +3,7 @@ import os from 'os';
 import pageRoutes from './router.config';
 import webpackPlugin from './plugin.config';
 import defaultSettings from '../src/defaultSettings';
+import Dart from './dart';
 
 const plugins = [
   [
@@ -68,6 +69,7 @@ export default {
   // https://ant.design/docs/react/customize-theme-cn
   theme: {
     'primary-color': defaultSettings.primaryColor,
+    ...Dart,
   },
   externals: {
     '@antv/data-set': 'DataSet',
diff --git a/config/dart.js b/config/dart.js
new file mode 100644
index 0000000000000000000000000000000000000000..4ef618864aacc85c4188ee40b7c47835d1771804
--- /dev/null
+++ b/config/dart.js
@@ -0,0 +1,33 @@
+export default {
+  '@layout-body-background': '#171717',
+  '@background-color-base': '#262626',
+  '@body-background': '#404041',
+  '@layout-sider-background': '#001529',
+  '@component-background': '#262626',
+  '@input-bg': '#313133',
+  '@btn-default-bg': '#262626',
+  '@border-color-base': '#1e1e1e',
+  '@border-color-split': '#363636',
+  '@heading-color': '#E3E3E3',
+  '@text-color': '#E3E3E3',
+  '@text-color-secondary': 'fade(#fff, 65%)',
+  '@table-selected-row-bg': '#3a3a3a',
+  '@table-expanded-row-bg': '#3b3b3b',
+  '@table-header-bg': '#3a3a3b',
+  '@table-row-hover-bg': '#3a3a3b',
+  '@layout-trigger-color': 'fade(#fff, 80%)',
+  '@layout-trigger-background': '#313232',
+  '@alert-message-color': 'fade(#000, 67%)',
+  '@item-hover-bg': 'fade(#1890ff, 20%)',
+  '@item-active-bg': 'fade(#1890ff, 40%)',
+  '@disabled-color': 'rgba(255, 255, 255, 0.25)',
+  '@tag-default-bg': '#262628',
+  '@popover-bg': '#262629',
+  '@wait-icon-color': 'fade(#fff, 64%)',
+  '@background-color-light': 'fade(#1890ff, 40%)',
+  '@collapse-header-bg': '#262629',
+  '@info-color': '#313133',
+  '@primary-color': '#0050b3',
+  '@highlight-color': '#a8071a',
+  '@warning-color': '#613400',
+};
diff --git a/src/components/Charts/TimelineChart/index.less b/src/components/Charts/TimelineChart/index.less
index 1751975692135769eebdcaf89ffafcf6b3037cb8..208ffd898e2b30a106c2fac36b673f1e2e3e3653 100644
--- a/src/components/Charts/TimelineChart/index.less
+++ b/src/components/Charts/TimelineChart/index.less
@@ -1,3 +1,3 @@
 .timelineChart {
-  background: #fff;
+  background: @component-background;
 }
diff --git a/src/components/FooterToolbar/index.less b/src/components/FooterToolbar/index.less
index de6606bd43cc46ce191dada6117d13b37f32603a..572bb93e92077b2d0e8f02a14deb3f5162262514 100644
--- a/src/components/FooterToolbar/index.less
+++ b/src/components/FooterToolbar/index.less
@@ -8,7 +8,7 @@
   height: 56px;
   line-height: 56px;
   box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.03);
-  background: #fff;
+  background: @component-background;
   border-top: 1px solid @border-color-split;
   padding: 0 24px;
   z-index: 9;
diff --git a/src/components/GlobalHeader/index.less b/src/components/GlobalHeader/index.less
index 5ed7fbaf145bac4d2f35bd00153e2524144c823d..17b85576075a8f7ccfe8985abbcdb3bcfe6086ee 100644
--- a/src/components/GlobalHeader/index.less
+++ b/src/components/GlobalHeader/index.less
@@ -5,9 +5,9 @@
 .header {
   height: 64px;
   padding: 0;
-  background: #fff;
   box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
   position: relative;
+  background-color: @layout-body-background;
 }
 
 .logo {
diff --git a/src/components/Result/index.less b/src/components/Result/index.less
index 5cd2aff589606f5684fd1c8aeff6540ee81b8b6c..b195f258cc17e3a1ca7f0fbb5849d92ad87364e3 100644
--- a/src/components/Result/index.less
+++ b/src/components/Result/index.less
@@ -38,7 +38,7 @@
   }
 
   .extra {
-    background: #fafafa;
+    background: @component-background;
     padding: 24px 40px;
     border-radius: @border-radius-sm;
     text-align: left;
diff --git a/src/components/SettingDrawer/index.less b/src/components/SettingDrawer/index.less
index af4109be3a3293a4cbdee09eda6a7355d20d62a2..f7b5c027f34ff910dc06b218373922ab03ca4e74 100644
--- a/src/components/SettingDrawer/index.less
+++ b/src/components/SettingDrawer/index.less
@@ -2,7 +2,7 @@
 
 .content {
   min-height: 100%;
-  background: #fff;
+  background: @component-background;
   position: relative;
 }
 
diff --git a/src/pages/List/Applications.less b/src/pages/List/Applications.less
index 8f5cb368d3931865ad68f330e4d2ceb0b4df21cd..3a79c899fffd3c9ccf49f6f1f01aaa4f98919a33 100644
--- a/src/pages/List/Applications.less
+++ b/src/pages/List/Applications.less
@@ -11,9 +11,6 @@
     .ant-card-meta-avatar {
       font-size: 0;
     }
-    .ant-card-actions {
-      background: #f7f9fa;
-    }
     .ant-list .ant-list-item-content-single {
       max-width: 100%;
     }
diff --git a/src/pages/List/CardList.less b/src/pages/List/CardList.less
index 3d6feacc2635872b8c6006c529524cb107a5c584..71a0833e65f29d865b8bbcd24d8640ddec10b44e 100644
--- a/src/pages/List/CardList.less
+++ b/src/pages/List/CardList.less
@@ -14,9 +14,6 @@
           max-width: 100%;
         }
       }
-      .ant-card-actions {
-        background: #f7f9fa;
-      }
       .ant-card-body:hover {
         .ant-card-meta-title > a {
           color: @primary-color;
@@ -45,7 +42,7 @@
 }
 
 .newButton {
-  background-color: #fff;
+  background-color: @component-background;
   border-color: @border-color-base;
   border-radius: @border-radius-sm;
   color: @text-color-secondary;
diff --git a/src/pages/Result/Error.js b/src/pages/Result/Error.js
index fba2da6d13c08785b0443c8760308b0aeebd2863..d6e1844de3b13c0b0b91324f5d1fbab7d79e3ea8 100644
--- a/src/pages/Result/Error.js
+++ b/src/pages/Result/Error.js
@@ -3,6 +3,7 @@ import { formatMessage, FormattedMessage } from 'umi/locale';
 import { Button, Icon, Card } from 'antd';
 import Result from '@/components/Result';
 import PageHeaderWrapper from '@/components/PageHeaderWrapper';
+import styles from './index.less';
 
 const extra = (
   <Fragment>
@@ -20,7 +21,7 @@ const extra = (
       />
     </div>
     <div style={{ marginBottom: 16 }}>
-      <Icon style={{ color: '#f5222d', marginRight: 8 }} type="close-circle-o" />
+      <Icon style={{ marginRight: 8 }} className={styles.error_icon} type="close-circle-o" />
       <FormattedMessage
         id="app.result.error.hint-text1"
         defaultMessage="Your account has been frozen"
@@ -31,7 +32,7 @@ const extra = (
       </a>
     </div>
     <div>
-      <Icon style={{ color: '#f5222d', marginRight: 8 }} type="close-circle-o" />
+      <Icon style={{ marginRight: 8 }} className={styles.error_icon} type="close-circle-o" />
       <FormattedMessage
         id="app.result.error.hint-text2"
         defaultMessage="Your account is not yet eligible to apply"
diff --git a/src/pages/Result/index.less b/src/pages/Result/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..c594abfd9a09ce98839f6e44025344e43c8f5332
--- /dev/null
+++ b/src/pages/Result/index.less
@@ -0,0 +1,5 @@
+@import '~antd/lib/style/themes/default.less';
+
+.error_icon {
+  color: @highlight-color;
+}