[WIP] real dark

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 Dark from './dark';
 
 const plugins = [
   [
@@ -68,6 +69,7 @@ export default {
   // https://ant.design/docs/react/customize-theme-cn
   theme: {
     'primary-color': defaultSettings.primaryColor,
+    ...Dark,
   },
   externals: {
     '@antv/data-set': 'DataSet',

config/dark.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',
+};

src/components/Charts/TimelineChart/index.less

@@ -1,3 +1,3 @@
 .timelineChart {
-  background: #fff;
+  background: @component-background;
 }

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;

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 {

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;

src/components/SettingDrawer/index.less

@@ -2,7 +2,7 @@
 
 .content {
   min-height: 100%;
-  background: #fff;
+  background: @component-background;
   position: relative;
 }
 

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%;
     }

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;

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"

src/pages/Result/index.less

@@ -0,0 +1,5 @@
+@import '~antd/lib/style/themes/default.less';
+
+.error_icon {
+  color: @highlight-color;
+}