@arco-design/mobile-react 2.29.6 → 2.30.1

package/tokens/app/arcodesign/default/css-variables.less

@@ -3,29 +3,54 @@
 :root when (@use-css-vars = 1) {
     --prefix: arco;
     --base-font-size: 50;
-    --background-color: #ffffff;
+    --arco-dark-mode-selector: .arco-theme-dark;
+    --background-color: #FFFFFF;
+    --dark-background-color: #17171A;
+    --container-background-color: #FFFFFF;
+    --dark-container-background-color: #232324;
+    --card-background-color: #F7F8FA;
+    --dark-card-background-color: hsla(0, 0%, 100%, 0.08);
     --font-color: #1d2129;
+    --dark-font-color: #f6f6f6;
     --sub-font-color: #4e5969;
+    --dark-sub-font-color: #c5c5c5;
     --sub-info-font-color: #86909c;
+    --dark-sub-info-font-color: #929293;
     --line-color: #e5e6eb;
-    --primary-color: #165dff;
-    --primary-disabled-color: #94bfff;
-    --danger-color: #f53f3f;
-    --warning-color: #ff7d00;
+    --dark-line-color: #484849;
+    --lighter-line-color: #f2f3f5;
+    --dark-lighter-line-color: #2e2e30;
+    --primary-color: #165DFF;
+    --dark-primary-color: #3C7EFF;
+    --primary-disabled-color: #94BFFF;
+    --dark-primary-disabled-color: #0E32A6;
+    --lighter-primary-color: #E8F3FF;
+    --dark-lighter-primary-color: #000D4D;
+    --danger-color: #F53F3F;
+    --dark-danger-color: #F76965;
+    --warning-color: #FF7D00;
+    --dark-warning-color: #FF9626;
+    --success-color: #00B42A;
+    --dark-success-color: #27C346;
     --disabled-color: #c9cdd4;
+    --dark-disabled-color: #5f5f60;
     --mask-background: rgba(0, 0, 0, 0.6);
-    --mask-content-color: #ffffff;
-    --mask-content-background: #ffffff;
+    --mask-content-color: #FFFFFF;
+    --dark-mask-content-color: rgba(255, 255, 255, 0.9);
+    --mask-content-background: #FFFFFF;
+    --dark-mask-content-background: #2A2A2B;
     --scroller-buffer: 10PX;
     --full-screen-z-index: 1000;
     --fixed-z-index: 100;
     --popup-mask-background: var(--mask-background);
+    --dark-popup-content-background: var(--dark-mask-content-background);
     --popup-content-background: var(--mask-content-background);
     --popup-enter-transition: all 450ms cubic-bezier(0.34, 0.69, 0.1, 1);
     --popup-exit-transition: all 240ms cubic-bezier(0.34, 0.69, 0.1, 1);
     --dialog-mask-background: var(--mask-background);
     --dialog-content-width: ~`pxtorem(270)`;
     --dialog-content-android-width: ~`pxtorem(280)`;
+    --dark-dialog-content-background: var(--dark-mask-content-background);
     --dialog-content-background: var(--mask-content-background);
     --dialog-content-border-radius: ~`pxtorem(8)`;
     --dialog-content-android-border-radius: ~`pxtorem(4)`;
@@ -36,18 +61,23 @@
     --dialog-android-vertical-padding: ~`pxtorem(20)`;
     --dialog-android-header-body-gutter: ~`pxtorem(12)`;
     --dialog-android-body-footer-gutter: ~`pxtorem(24)`;
+    --dark-dialog-body-ios-color: var(--dark-sub-font-color);
     --dialog-body-ios-color: var(--sub-font-color);
     --dialog-body-ios-font-size: ~`pxtorem(15)`;
     --dialog-body-ios-line-height: ~`pxtorem(22)`;
+    --dark-dialog-body-android-color: var(--dark-sub-font-color);
     --dialog-body-android-color: var(--sub-font-color);
     --dialog-body-android-font-size: ~`pxtorem(15)`;
     --dialog-body-android-line-height: ~`pxtorem(24)`;
+    --dark-dialog-header-ios-color: var(--dark-font-color);
     --dialog-header-ios-color: var(--font-color);
+    --dark-dialog-header-android-color: var(--dark-font-color);
     --dialog-header-android-color: var(--font-color);
     --dialog-header-ios-font-size: ~`pxtorem(17)`;
     --dialog-header-ios-line-height: ~`pxtorem(26)`;
     --dialog-header-android-font-size: ~`pxtorem(17)`;
     --dialog-header-android-line-height: ~`pxtorem(28)`;
+    --dark-dialog-footer-ios-color: var(--dark-primary-color);
     --dialog-footer-ios-color: var(--primary-color);
     --dialog-footer-ios-font-size: ~`pxtorem(16)`;
     --dialog-footer-ios-height: ~`pxtorem(44)`;
@@ -55,8 +85,11 @@
     --dialog-footer-android-font-size: ~`pxtorem(15)`;
     --dialog-footer-android-line-height: ~`pxtorem(20)`;
     --dialog-footer-android-button-gutter: ~`pxtorem(28)`;
+    --dark-dialog-button-footer-primary-background: var(--dark-primary-color);
     --dialog-button-footer-primary-background: var(--primary-color);
-    --dialog-button-footer-primary-color: #ffffff;
+    --dark-dialog-button-footer-primary-color: var(--dark-mask-content-color);
+    --dialog-button-footer-primary-color: var(--mask-content-color);
+    --dark-dialog-button-footer-color: var(--dark-sub-info-font-color);
     --dialog-button-footer-color: var(--sub-info-font-color);
     --dialog-button-footer-height: ~`pxtorem(36)`;
     --dialog-button-footer-border-radius: ~`pxtorem(30)`;
@@ -64,8 +97,11 @@
     --carousel-auto-transition: cubic-bezier(0.66, 0, 0.34, 1);
     --carousel-slide-transition: cubic-bezier(0.32, 0.94, 0.6, 1);
     --carousel-indicator-background: rgba(255, 255, 255, 0.5);
-    --carousel-indicator-active-background: #ffffff;
+    --dark-carousel-indicator-active-background: var(--dark-mask-content-color);
+    --carousel-indicator-active-background: var(--mask-content-color);
+    --dark-carousel-indicator-inverse-background: var(--dark-line-color);
     --carousel-indicator-inverse-background: var(--line-color);
+    --dark-carousel-indicator-active-inverse-background: var(--dark-primary-color);
     --carousel-indicator-active-inverse-background: var(--primary-color);
     --carousel-indicator-outside-padding: ~`pxtorem(8)` 0 ~`pxtorem(5)`;
     --carousel-indicator-position: ~`pxtorem(12)`;
@@ -75,20 +111,24 @@
     --carousel-circle-indicator-size: 6PX;
     --carousel-square-indicator-width: ~`pxtorem(12)`;
     --carousel-square-indicator-height: 3PX;
-    --carousel-item-text-color: #ffffff;
+    --dark-carousel-item-text-color: var(--dark-mask-content-color);
+    --carousel-item-text-color: var(--mask-content-color);
     --carousel-item-text-background: linear-gradient(180deg, rgba(0, 0, 0, 0) 5.18%, rgba(0, 0, 0, 0.15) 100%);
     --carousel-item-text-height: ~`pxtorem(32)`;
     --carousel-item-text-padding: 0 ~`pxtorem(12)`;
     --carousel-item-text-font-size: ~`pxtorem(16)`;
     --input-height: ~`pxtorem(54)`;
-    --input-disabled-background: #fafbfc;
+    --dark-input-disabled-color: var(--dark-disabled-color);
     --input-disabled-color: var(--disabled-color);
+    --dark-input-placeholder-color: var(--dark-disabled-color);
     --input-placeholder-color: var(--disabled-color);
+    --dark-input-clear-icon-color: var(--dark-disabled-color);
     --input-clear-icon-color: var(--disabled-color);
     --input-clear-icon-font-size: 16PX;
     --input-label-gutter: ~`pxtorem(24)`;
     --input-horizontal-padding: ~`pxtorem(16)`;
     --input-vertical-padding: ~`pxtorem(12)`;
+    --dark-input-caret-color: var(--dark-primary-color);
     --input-caret-color: var(--primary-color);
     --input-label-min-width: ~`pxtorem(64)`;
     --input-text-font-size: ~`pxtorem(16)`;
@@ -97,6 +137,7 @@
     --textarea-line-height: ~`pxtorem(22)`;
     --textarea-padding: ~`pxtorem(16)`;
     --textarea-has-stat-padding: ~`pxtorem(16)` ~`pxtorem(16)` ~`pxtorem(44)`;
+    --dark-textarea-statistic-color: var(--dark-sub-info-font-color);
     --textarea-statistic-color: var(--sub-info-font-color);
     --textarea-statistic-font-size: ~`pxtorem(14)`;
     --avatar-size-map: large, medium, small, smaller, ultra-small;
@@ -111,8 +152,11 @@
     --avatar-default-overlap-smaller-size: ~`pxtorem(16)`;
     --avatar-default-overlap-ultra-small-size: ~`pxtorem(12)`;
     --avatar-background: #4080FF;
+    --dark-avatar-background: #306FFF;
+    --dark-avatar-default-overlap-background: var(--dark-disabled-color);
     --avatar-default-overlap-background: var(--disabled-color);
-    --avatar-text-font-color: #fff;
+    --dark-avatar-text-font-color: var(--dark-mask-content-color);
+    --avatar-text-font-color: var(--mask-content-color);
     --avatar-large-text-font-size: ~`pxtorem(16)`;
     --avatar-medium-text-font-size: ~`pxtorem(16)`;
     --avatar-small-text-font-size: ~`pxtorem(14)`;
@@ -128,6 +172,7 @@
     --avatar-group-smaller-size-border: ~`pxtorem(1)`;
     --avatar-group-ultra-small-size-offset: ~`pxtorem(-8)`;
     --avatar-group-ultra-small-size-border: ~`pxtorem(1)`;
+    --dark-avatar-group-border-color: var(--dark-background-color);
     --avatar-group-border-color: var(--background-color);
     --avatar-info-box-large-size: ~`pxtorem(88)`;
     --avatar-info-box-medium-size: ~`pxtorem(80)`;
@@ -159,25 +204,40 @@
     --avatar-desc-ultra-small-font-size: ~`pxtorem(10)`;
     --avatar-desc-ultra-small-line-height: ~`pxtorem(14)`;
     --avatar-desc-ultra-small-margin-top: ~`pxtorem(2)`;
+    --dark-avatar-name-color: var(--dark-font-color);
     --avatar-name-color: var(--font-color);
+    --dark-avatar-desc-color: var(--dark-sub-info-font-color);
     --avatar-desc-color: var(--sub-info-font-color);
     --button-line-height: 1.2;
     --button-radius: 2PX;
     --button-icon-text-gutter: ~`pxtorem(4)`;
+    --dark-button-primary-background: var(--dark-primary-color);
     --button-primary-background: var(--primary-color);
     --button-primary-clicked-background: #0E42D2;
+    --dark-button-primary-clicked-background: #689FFF;
+    --dark-button-primary-disabled-background: var(--dark-primary-disabled-color);
     --button-primary-disabled-background: var(--primary-disabled-color);
-    --button-primary-text-color: #fff;
-    --button-primary-disabled-text-color: #E8F3FF;
-    --button-default-background: #E8F3FF;
+    --dark-button-primary-text-color: var(--dark-mask-content-color);
+    --button-primary-text-color: var(--mask-content-color);
+    --dark-button-primary-disabled-text-color: var(--dark-lighter-primary-color);
+    --button-primary-disabled-text-color: var(--lighter-primary-color);
+    --dark-button-default-background: var(--dark-lighter-primary-color);
+    --button-default-background: var(--lighter-primary-color);
+    --dark-button-default-clicked-background: var(--dark-primary-disabled-color);
     --button-default-clicked-background: var(--primary-disabled-color);
-    --button-default-disabled-background: #E8F3FF;
+    --dark-button-default-disabled-background: var(--dark-lighter-primary-color);
+    --button-default-disabled-background: var(--lighter-primary-color);
+    --dark-button-default-text-color: var(--dark-primary-color);
     --button-default-text-color: var(--primary-color);
+    --dark-button-default-disabled-text-color: var(--dark-primary-disabled-color);
     --button-default-disabled-text-color: var(--primary-disabled-color);
     --button-ghost-background: transparent;
-    --button-ghost-clicked-background: #e8f3ff;
+    --dark-button-ghost-clicked-background: var(--dark-lighter-primary-color);
+    --button-ghost-clicked-background: var(--lighter-primary-color);
     --button-ghost-disabled-background: transparent;
+    --dark-button-ghost-text-color: var(--dark-primary-color);
     --button-ghost-text-color: var(--primary-color);
+    --dark-button-ghost-disabled-text-color: var(--dark-primary-disabled-color);
     --button-ghost-disabled-text-color: var(--primary-disabled-color);
     --button-huge-padding: 0 ~`pxtorem(16)`;
     --button-huge-height: ~`pxtorem(44)`;
@@ -196,36 +256,49 @@
     --button-mini-text-size: ~`pxtorem(12)`;
     --ellipsis-default-text-size: ~`pxtorem(16)`;
     --ellipsis-float-ellipsis-node-background: linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff 20PX, #ffffff);
+    --dark-ellipsis-float-ellipsis-node-background: linear-gradient(90deg, rgba(35, 35, 36, 0), #232324 20PX, #232324);
     --ellipsis-float-ellipsis-node-padding-left: 20PX;
-    --checkbox-icon-color: #c2c6cc;
+    --dark-checkbox-icon-color: var(--dark-line-color);
+    --checkbox-icon-color: var(--line-color);
     --checkbox-icon-font-size: 20PX;
     --checkbox-icon-margin-right: ~`pxtorem(8)`;
+    --dark-checkbox-icon-checked-color: var(--dark-primary-color);
     --checkbox-icon-checked-color: var(--primary-color);
-    --checkbox-icon-disabled-color: #f7f8fa;
-    --checkbox-icon-checked-disabled-color: rgba(51,112,255, .5);
-    --checkbox-disabled-color: #c2c6cc;
+    --dark-checkbox-icon-disabled-color: var(--dark-card-background-color);
+    --checkbox-icon-disabled-color: var(--card-background-color);
+    --dark-checkbox-icon-checked-disabled-color: var(--dark-lighter-primary-color);
+    --checkbox-icon-checked-disabled-color: var(--lighter-primary-color);
     --checkbox-text-font-size: ~`pxtorem(16)`;
     --checkbox-text-disabled-opacity: 0.5;
     --checkbox-group-gutter: ~`pxtorem(24)`;
     --tabs-tab-bar-font-size: ~`pxtorem(15)`;
+    --dark-tabs-tab-bar-background: var(--dark-background-color);
     --tabs-tab-bar-background: var(--background-color);
     --tabs-tab-bar-height: ~`pxtorem(42)`;
     --tabs-tab-bar-width: ~`pxtorem(78)`;
     --tabs-tab-bar-horizontal-height: ~`pxtorem(54)`;
     --tabs-tab-bar-card-height: ~`pxtorem(40)`;
+    --dark-tabs-tab-bar-card-color: var(--dark-primary-color);
     --tabs-tab-bar-card-color: var(--primary-color);
-    --tabs-tab-bar-card-text-color: #ffffff;
+    --dark-tabs-tab-bar-card-text-color: var(--dark-mask-content-color);
+    --tabs-tab-bar-card-text-color: var(--mask-content-color);
     --tabs-tab-bar-card-border-radius: 2PX;
+    --dark-tabs-tab-bar-line-active-color: var(--dark-primary-color);
     --tabs-tab-bar-line-active-color: var(--primary-color);
     --tabs-tab-bar-line-gutter: ~`pxtorem(40)`;
     --tabs-tab-bar-tag-gutter: ~`pxtorem(16)`;
     --tabs-tab-bar-tag-height: ~`pxtorem(60)`;
     --tabs-tab-bar-tag-vertical-padding: ~`pxtorem(12)`;
-    --tabs-tab-bar-tag-background: #f7f8fA;
+    --dark-tabs-tab-bar-tag-background: var(--dark-card-background-color);
+    --tabs-tab-bar-tag-background: var(--card-background-color);
+    --dark-tabs-tab-bar-tag-text-color: var(--dark-font-color);
     --tabs-tab-bar-tag-text-color: var(--font-color);
+    --dark-tabs-tab-bar-tag-active-background: var(--dark-primary-color);
     --tabs-tab-bar-tag-active-background: var(--primary-color);
-    --tabs-tab-bar-tag-active-text-color: #ffffff;
+    --dark-tabs-tab-bar-tag-active-text-color: var(--dark-mask-content-color);
+    --tabs-tab-bar-tag-active-text-color: var(--mask-content-color);
     --tabs-tab-bar-tag-padding: 0 ~`pxtorem(16)`;
+    --dark-tabs-underline-color: var(--dark-primary-color);
     --tabs-underline-color: var(--primary-color);
     --tabs-underline-thick: 2PX;
     --tabs-underline-size: ~`pxtorem(24)`;
@@ -234,15 +307,20 @@
     --tab-bar-font-size: ~`pxtorem(10)`;
     --tab-bar-icon-size: ~`pxtorem(20)`;
     --tab-bar-only-title-font-size: ~`pxtorem(16)`;
+    --dark-tab-bar-color: var(--dark-sub-info-font-color);
     --tab-bar-color: var(--sub-info-font-color);
+    --dark-tab-bar-active-color: var(--dark-primary-color);
     --tab-bar-active-color: var(--primary-color);
     --tab-bar-title-line-height: ~`pxtorem(14)`;
     --tab-bar-only-title-line-height: ~`pxtorem(22)`;
     --tab-bar-title-margin: 0 0 ~`pxtorem(5)` 0;
     --tab-bar-item-icon-margin: ~`pxtorem(7)` 0 ~`pxtorem(4)`;
     --nav-bar-height: ~`pxtorem(44)`;
+    --dark-nav-bar-bottom-border-color: var(--dark-line-color);
     --nav-bar-bottom-border-color: var(--line-color);
+    --dark-nav-bar-background: var(--dark-background-color);
     --nav-bar-background: var(--background-color);
+    --dark-nav-bar-font-color: var(--dark-font-color);
     --nav-bar-font-color: var(--font-color);
     --nav-bar-two-sides-font-size: ~`pxtorem(16)`;
     --nav-bar-two-sides-padding: 0 ~`pxtorem(16)`;
@@ -250,15 +328,20 @@
     --nav-bar-title-text-font-size: ~`pxtorem(17)`;
     --nav-bar-title-padding: 0 ~`pxtorem(46)`;
     --nav-bar-back-icon-height: ~`pxtorem(16)`;
-    --image-placeholder-background: #f7f8fa;
-    --image-loading-icon-color: #e6e8eb;
-    --image-retry-icon-color: #e6e8eb;
+    --dark-image-placeholder-background: var(--dark-card-background-color);
+    --image-placeholder-background: var(--card-background-color);
+    --dark-image-loading-icon-color: var(--dark-mask-content-color);
+    --image-loading-icon-color: var(--mask-content-color);
+    --dark-image-retry-icon-color: var(--dark-mask-content-color);
+    --image-retry-icon-color: var(--mask-content-color);
     --image-mask-background: var(--mask-background);
     --image-transition-function: cubic-bezier(0.39, 0.575, 0.565, 1);
     --image-inner-font-size: ~`pxtorem(16)`;
     --image-retry-font-size: ~`pxtorem(16)`;
+    --dark-switch-text-color: var(--dark-sub-font-color);
     --switch-text-color: var(--sub-font-color);
-    --switch-text-checked-color: #FFFFFF;
+    --dark-switch-text-checked-color: var(--dark-mask-content-color);
+    --switch-text-checked-color: var(--mask-content-color);
     --switch-inner-background: #FFFFFF;
     --switch-inner-transition: all .2s;
     --switch-inner-fully-border-radius: 50%;
@@ -273,10 +356,14 @@
     --switch-android-checked-inner-transform: translateX(16PX);
     --switch-android-text-font-size: 12PX;
     --switch-android-text-gap-size: 5PX;
-    --switch-android-background: #E5E6EB;
+    --dark-switch-android-background: var(--dark-line-color);
+    --switch-android-background: var(--line-color);
+    --dark-switch-android-checked-background: var(--dark-primary-color);
     --switch-android-checked-background: var(--primary-color);
+    --dark-switch-android-disabled-checked-background: var(--dark-primary-disabled-color);
     --switch-android-disabled-checked-background: var(--primary-disabled-color);
-    --switch-android-disabled-background: #F2F3F5;
+    --dark-switch-android-disabled-background: var(--dark-lighter-line-color);
+    --switch-android-disabled-background: var(--lighter-line-color);
     --switch-ios-width: ~`pxtorem(51)`;
     --switch-ios-height: ~`pxtorem(31)`;
     --switch-ios-padding: ~`pxtorem(2)`;
@@ -294,7 +381,8 @@
     --switch-ios-disabled-checked-opacity: 0.3;
     --switch-ios-disabled-background: rgba(120, 120, 128, .16);
     --toast-background: rgba(0, 0, 0, 0.8);
-    --toast-text-color: #ffffff;
+    --dark-toast-text-color: var(--dark-mask-content-color);
+    --toast-text-color: var(--mask-content-color);
     --toast-font-size: ~`pxtorem(16)`;
     --toast-line-height: ~`pxtorem(24)`;
     --toast-border-radius: ~`pxtorem(4)`;
@@ -309,7 +397,9 @@
     --toast-vertical-padding: ~`pxtorem(16)`;
     --toast-vertical-icon-size: ~`pxtorem(24)`;
     --toast-vertical-icon-content-gutter: ~`pxtorem(8)`;
+    --dark-loading-color: var(--dark-primary-color);
     --loading-color: var(--primary-color);
+    --dark-loading-arc-background-color: var(--dark-line-color);
     --loading-arc-background-color: var(--line-color);
     --loading-dot-size: 6PX;
     --loading-dot-gutter: ~`pxtorem(6)`;
@@ -317,17 +407,23 @@
     --picker-view-cell-height: ~`pxtorem(44)`;
     --picker-view-wrapper-height: ~`pxtorem(220)`;
     --picker-view-mask-top-background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 65%);
+    --dark-picker-view-mask-top-background: linear-gradient(to bottom, rgba(42, 42, 43, 1) 0%, rgba(42, 42, 43, 0.7) 65%);
     --picker-view-mask-bottom-background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 65%);
+    --dark-picker-view-mask-bottom-background: linear-gradient(to top, rgba(42, 42, 43, 1) 0%, rgba(42, 42, 43, 0.7) 65%);
+    --dark-picker-view-selection-border-color: var(--dark-line-color);
     --picker-view-selection-border-color: var(--line-color);
     --picker-wrapper-shadow: 0 2PX 8PX rgba(0, 0, 0, .15);
     --picker-wrapper-border-radius: ~`pxtorem(4)`;
     --picker-header-height: ~`pxtorem(54)`;
+    --dark-picker-header-background: var(--dark-mask-content-background);
     --picker-header-background: var(--mask-content-background);
     --picker-title-font-size: ~`pxtorem(16)`;
     --picker-title-padding: 0 ~`pxtorem(60)`;
     --picker-button-font-size: ~`pxtorem(15)`;
     --picker-button-padding: ~`pxtorem(16)`;
+    --dark-picker-left-btn-color: var(--dark-primary-color);
     --picker-left-btn-color: var(--primary-color);
+    --dark-picker-right-btn-color: var(--dark-primary-color);
     --picker-right-btn-color: var(--primary-color);
     --popover-arrow-size: 9PX;
     --popover-arrow-border-radius: 1PX;
@@ -339,22 +435,29 @@
     --popover-inner-top-arrow-shadow: 6PX 6PX 8PX 0 rgba(0, 0, 0, .04);
     --popover-inner-bottom-arrow-shadow: -6PX -6PX 8PX 0 rgba(0, 0, 0, .04);
     --popover-background-color: #000000;
-    --popover-white-theme-background-color: #ffffff;
-    --popover-content-color: #fff;
+    --dark-popover-white-theme-background-color: var(--dark-mask-content-background);
+    --popover-white-theme-background-color: var(--mask-content-background);
+    --dark-popover-content-color: var(--dark-mask-content-color);
+    --popover-content-color: var(--mask-content-color);
     --popover-content-padding: ~`pxtorem(8)` ~`pxtorem(12)`;
     --popover-content-android-padding: ~`pxtorem(10)` ~`pxtorem(12)` ~`pxtorem(6)`;
     --popover-content-font-size: ~`pxtorem(14)`;
     --popover-content-line-height: ~`pxtorem(20)`;
-    --popover-content-disabled-color: rgba(255,255,255,0.3);
+    --popover-content-disabled-color: rgba(255, 255, 255, 0.3);
+    --dark-popover-content-white-theme-color: var(--dark-font-color);
     --popover-content-white-theme-color: var(--font-color);
+    --dark-popover-content-white-theme-disabled-color: var(--dark-disabled-color);
     --popover-content-white-theme-disabled-color: var(--disabled-color);
     --popover-content-border-color: rgba(247, 248, 250, 0.1);
+    --dark-popover-content-white-theme-border-color: var(--dark-line-color);
     --popover-content-white-theme-border-color: var(--line-color);
-    --popover-shadow-color: rgba(0,0,0,0.1);
+    --popover-shadow-color: rgba(0, 0, 0, 0.1);
     --popover-menu-content-padding: 0 ~`pxtorem(12)`;
+    --dark-popover-menu-icon-white-theme-color: var(--dark-sub-font-color);
     --popover-menu-icon-white-theme-color: var(--sub-font-color);
     --popover-menu-active-background: #242425;
-    --popover-menu-active-white-theme-background: #F7F8FA;
+    --dark-popover-menu-active-white-theme-background: var(--dark-card-background-color);
+    --popover-menu-active-white-theme-background: var(--card-background-color);
     --popover-horizontal-menu-max-width: ~`pxtorem(288)`;
     --popover-horizontal-menu-item-size: ~`pxtorem(72)`;
     --popover-horizontal-menu-item-padding: ~`pxtorem(12)` ~`pxtorem(0)`;
@@ -364,20 +467,27 @@
     --popover-icon-size: ~`pxtorem(16)`;
     --popover-icon-padding: ~`pxtorem(0)` ~`pxtorem(10)` ~`pxtorem(0)` ~`pxtorem(11)`;
     --popover-text-suffix-padding: ~`pxtorem(0)` ~`pxtorem(12)` ~`pxtorem(0)` ~`pxtorem(0)`;
-    --popover-mask-background: rgba(0, 0, 0, .6);
+    --popover-mask-background: var(--mask-background);
     --load-more-font-size: ~`pxtorem(14)`;
+    --dark-load-more-text-color: var(--dark-sub-info-font-color);
     --load-more-text-color: var(--sub-info-font-color);
+    --dark-cell-text-color: var(--dark-sub-info-font-color);
     --cell-text-color: var(--sub-info-font-color);
+    --dark-cell-label-color: var(--dark-font-color);
     --cell-label-color: var(--font-color);
+    --dark-cell-label-icon-color: var(--dark-sub-font-color);
     --cell-label-icon-color: var(--sub-font-color);
+    --dark-cell-desc-color: var(--dark-sub-info-font-color);
     --cell-desc-color: var(--sub-info-font-color);
     --cell-desc-font-size: ~`pxtorem(14)`;
     --cell-desc-margin-top: ~`pxtorem(2)`;
     --cell-content-font-size: ~`pxtorem(14)`;
+    --dark-cell-arrow-color: var(--dark-disabled-color);
     --cell-arrow-color: var(--disabled-color);
     --cell-arrow-gutter: ~`pxtorem(8)`;
     --cell-arrow-font-size: ~`pxtorem(12)`;
-    --cell-background-color: var(--background-color);
+    --dark-cell-background-color: var(--dark-container-background-color);
+    --cell-background-color: var(--container-background-color);
     --cell-font-size: ~`pxtorem(16)`;
     --cell-horizontal-padding: ~`pxtorem(16)`;
     --cell-item-height: ~`pxtorem(54)`;
@@ -400,19 +510,30 @@
     --tag-large-size-padding: ~`pxtorem(6)`;
     --tag-filleted-padding: ~`pxtorem(8)`;
     --tag-border-radius: 2PX;
+    --dark-tag-primary-color: var(--dark-primary-color);
     --tag-primary-color: var(--primary-color);
-    --tag-primary-background-color: #e8f3ff;
+    --dark-tag-primary-background-color: var(--dark-lighter-primary-color);
+    --tag-primary-background-color: var(--lighter-primary-color);
+    --dark-tag-primary-border-color: var(--dark-primary-color);
     --tag-primary-border-color: var(--primary-color);
+    --dark-tag-hollow-color: var(--dark-primary-color);
     --tag-hollow-color: var(--primary-color);
+    --dark-tag-hollow-border-color: var(--dark-primary-color);
     --tag-hollow-border-color: var(--primary-color);
-    --tag-solid-color: #ffffff;
+    --dark-tag-solid-color: var(--dark-mask-content-color);
+    --tag-solid-color: var(--mask-content-color);
+    --dark-tag-solid-background-color: var(--dark-primary-color);
     --tag-solid-background-color: var(--primary-color);
+    --dark-tag-solid-border-color: var(--dark-primary-color);
     --tag-solid-border-color: var(--primary-color);
     --tag-list-horizontal-gutter: ~`pxtorem(8)`;
     --tag-list-vertical-gutter: 0;
-    --tag-list-add-border-color: #c2c6cc;
-    --tag-list-add-background: #fafbfc;
-    --tag-list-add-color: #939aa3;
+    --dark-tag-list-add-border-color: var(--dark-line-color);
+    --tag-list-add-border-color: var(--line-color);
+    --dark-tag-list-add-background: var(--dark-lighter-line-color);
+    --tag-list-add-background: var(--lighter-line-color);
+    --dark-tag-list-add-color: var(--dark-sub-font-color);
+    --tag-list-add-color: var(--sub-font-color);
     --image-preview-mask-background: rgba(0, 0, 0, 0.9);
     --image-preview-indicator-font-size: ~`pxtorem(14)`;
     --image-preview-indicator-padding: ~`pxtorem(12)` ~`pxtorem(20)`;
@@ -421,70 +542,98 @@
     --dropdown-menu-padding: ~`pxtorem(15)`;
     --dropdown-menu-font-size: ~`pxtorem(16)`;
     --dropdown-menu-line-height: ~`pxtorem(22)`;
+    --dark-dropdown-menu-color: var(--dark-font-color);
     --dropdown-menu-color: var(--font-color);
+    --dark-dropdown-menu-selected-color: var(--dark-primary-color);
     --dropdown-menu-selected-color: var(--primary-color);
+    --dark-dropdown-menu-disabled-color: var(--dark-disabled-color);
     --dropdown-menu-disabled-color: var(--disabled-color);
-    --dropdown-menu-tip-color: #707070;
+    --dark-dropdown-menu-tip-color: var(--dark-sub-info-font-color);
+    --dropdown-menu-tip-color: var(--sub-info-font-color);
     --dropdown-menu-tip-min-width: ~`pxtorem(18)`;
     --dropdown-menu-tip-padding-right: ~`pxtorem(16)`;
     --dropdown-menu-label-max-width: ~`pxtorem(96)`;
     --dropdown-menu-icon-size: 12PX;
+    --dark-dropdown-menu-icon-color: var(--dark-disabled-color);
     --dropdown-menu-icon-color: var(--disabled-color);
+    --dark-dropdown-menu-icon-selected-color: var(--dark-primary-color);
     --dropdown-menu-icon-selected-color: var(--primary-color);
     --dropdown-menu-icon-margin-left: 4PX;
-    --dropdown-options-background-color: #ffffff;
+    --dark-dropdown-options-background-color: var(--dark-container-background-color);
+    --dropdown-options-background-color: var(--container-background-color);
     --dropdown-options-item-padding: ~`pxtorem(16)`;
     --dropdown-options-item-font-size: ~`pxtorem(16)`;
     --dropdown-options-item-line-height: ~`pxtorem(22)`;
+    --dark-dropdown-options-item-color: var(--dark-font-color);
     --dropdown-options-item-color: var(--font-color);
+    --dark-dropdown-options-item-selected-color: var(--dark-primary-color);
     --dropdown-options-item-selected-color: var(--primary-color);
+    --dark-dropdown-options-item-disabled-color: var(--dark-disabled-color);
     --dropdown-options-item-disabled-color: var(--disabled-color);
     --dropdown-options-item-icon-right: ~`pxtorem(16)`;
-    --dropdown-mask-background-color: rgba(0, 0, 0, 0.5);
+    --dropdown-mask-background-color: var(--mask-background);
     --dropdown-multi-rows-options-gutter: ~`pxtorem(12)`;
     --dropdown-multi-rows-options-item-padding: ~`pxtorem(8)`;
     --dropdown-multi-rows-options-item-font-size: ~`pxtorem(14)`;
     --dropdown-multi-rows-options-item-line-height: ~`pxtorem(20)`;
+    --dark-dropdown-multi-rows-options-item-color: var(--dark-sub-font-color);
     --dropdown-multi-rows-options-item-color: var(--sub-font-color);
     --dropdown-multi-rows-options-item-border-radius: 2PX;
-    --dropdown-multi-rows-options-item-background: #f7f8fa;
-    --dropdown-multi-rows-options-item-selected-background: #E8F3FF;
+    --dark-dropdown-multi-rows-options-item-background: var(--dark-card-background-color);
+    --dropdown-multi-rows-options-item-background: var(--card-background-color);
+    --dark-dropdown-multi-rows-options-item-selected-background: var(--dark-lighter-primary-color);
+    --dropdown-multi-rows-options-item-selected-background: var(--lighter-primary-color);
+    --dark-dropdown-multi-rows-options-item-selected-color: var(--dark-primary-color);
     --dropdown-multi-rows-options-item-selected-color: var(--primary-color);
     --dropdown-multi-rows-options-container-padding: ~`pxtorem(16)`;
     --dropdown-multi-rows-options-container-margin: 0 ~`pxtorem(-12)` ~`pxtorem(-12)` 0;
+    --dark-collapse-disabled-header-color: var(--dark-disabled-color);
     --collapse-disabled-header-color: var(--disabled-color);
-    --collapse-header-background: var(--background-color);
+    --dark-collapse-header-background: var(--dark-container-background-color);
+    --collapse-header-background: var(--container-background-color);
     --collapse-header-height: ~`pxtorem(54)`;
     --collapse-header-font-size: ~`pxtorem(16)`;
     --collapse-header-margin-left: ~`pxtorem(16)`;
     --collapse-header-padding: ~`pxtorem(16)` ~`pxtorem(16)` ~`pxtorem(16)` 0;
+    --dark-collapse-header-color: var(--dark-font-color);
     --collapse-header-color: var(--font-color);
     --collapse-header-line-height: ~`pxtorem(22)`;
+    --dark-collapse-header-icon-color: var(--dark-disabled-color);
     --collapse-header-icon-color: var(--disabled-color);
     --collapse-content-padding: ~`pxtorem(12)` ~`pxtorem(16)`;
     --collapse-content-font-size: ~`pxtorem(14)`;
+    --dark-collapse-content-color: var(--dark-sub-info-font-color);
     --collapse-content-color: var(--sub-info-font-color);
     --collapse-content-line-height: ~`pxtorem(22)`;
-    --pull-refresh-label-background-color: #f7f8fa;
+    --dark-pull-refresh-label-background-color: var(--dark-card-background-color);
+    --pull-refresh-label-background-color: var(--card-background-color);
     --pull-refresh-label-font-size: ~`pxtorem(12)`;
+    --dark-pull-refresh-content-background-color: var(--dark-background-color);
     --pull-refresh-content-background-color: var(--background-color);
-    --pull-refresh-label-text-color: #787878;
+    --dark-pull-refresh-label-text-color: var(--dark-sub-info-font-color);
+    --pull-refresh-label-text-color: var(--sub-info-font-color);
+    --dark-pull-refresh-label-loading-color: var(--dark-sub-info-font-color);
     --pull-refresh-label-loading-color: var(--sub-info-font-color);
     --slider-padding: ~`pxtorem(11)` ~`pxtorem(16)`;
     --slider-mask-padding: ~`pxtorem(15)`;
     --slider-has-mark-padding-bottom: ~`pxtorem(35)`;
     --slider-label-font-size: ~`pxtorem(16)`;
     --slider-label-gutter: ~`pxtorem(12)`;
+    --dark-slider-text-color: var(--dark-sub-info-font-color);
     --slider-text-color: var(--sub-info-font-color);
+    --dark-slider-line-color: var(--dark-line-color);
     --slider-line-color: var(--line-color);
     --slider-line-border-radius: ~`pxtorem(4)`;
+    --dark-slider-line-activated-color: var(--dark-primary-color);
     --slider-line-activated-color: var(--primary-color);
+    --dark-slider-line-disabled-color: var(--dark-primary-disabled-color);
     --slider-line-disabled-color: var(--primary-disabled-color);
     --slider-thumb-width: ~`pxtorem(24)`;
     --slider-thumb-height: ~`pxtorem(24)`;
     --slider-thumb-border-radius: 50%;
     --slider-thumb-box-shadow: 0 2PX 8PX rgba(0, 0, 0, .1);
-    --slider-thumb-background: var(--background-color);
+    --dark-slider-thumb-background: var(--dark-mask-content-background);
+    --slider-thumb-background: var(--mask-content-background);
     --slider-popover-arrow-size: 6PX;
     --slider-popover-font-size: ~`pxtorem(12)`;
     --slider-popover-line-height: ~`pxtorem(17)`;
@@ -496,16 +645,21 @@
     --slider-mark-label-line-height: ~`pxtorem(20)`;
     --slider-horizontal-mark-label-top: ~`pxtorem(19)`;
     --slider-vertical-mark-label-right: ~`pxtorem(13)`;
-    --swipe-load-label-background: #f8f8f8;
+    --dark-swipe-load-label-background: var(--dark-card-background-color);
+    --swipe-load-label-background: var(--card-background-color);
     --swipe-load-label-border-radius: 50%;
     --swipe-load-label-text-margin-left: ~`pxtorem(20)`;
     --swipe-load-label-text-width: ~`pxtorem(20)`;
+    --dark-swipe-load-label-text-color: var(--dark-font-color);
     --swipe-load-label-text-color: var(--font-color);
     --swipe-load-label-text-font-size: ~`pxtorem(12)`;
     --notice-bar-wrapper-padding: 0 ~`pxtorem(16)`;
-    --notice-bar-background: #fff7e8;
+    --notice-bar-background: #FFF7E8;
+    --dark-notice-bar-background: #4D1B00;
+    --dark-notice-bar-color: var(--dark-warning-color);
     --notice-bar-color: var(--warning-color);
     --notice-bar-gradient-background: linear-gradient(to right, #fff7e8, rgba(255, 247, 232, 0));
+    --dark-notice-bar-gradient-background: linear-gradient(to right, #4D1B00, rgba(77, 27, 0, 0));
     --notice-bar-line-height: ~`pxtorem(20)`;
     --notice-bar-text-font-size: ~`pxtorem(14)`;
     --notice-bar-icon-font-size: 16PX;
@@ -513,10 +667,15 @@
     --notice-bar-vertical-padding: ~`pxtorem(8)`;
     --notice-bar-horizontal-padding: ~`pxtorem(8)`;
     --notice-bar-gradient-width: ~`pxtorem(8)`;
-    --notify-success-background: #00B42A;
+    --dark-notify-success-background: var(--dark-success-color);
+    --notify-success-background: var(--success-color);
+    --dark-notify-error-background: var(--dark-danger-color);
     --notify-error-background: var(--danger-color);
+    --dark-notify-warn-background: var(--dark-warning-color);
     --notify-warn-background: var(--warning-color);
-    --notify-font-color: #ffffff;
+    --dark-notify-font-color: var(--dark-mask-content-color);
+    --notify-font-color: var(--mask-content-color);
+    --dark-notify-info-font-color: var(--dark-primary-color);
     --notify-info-font-color: var(--primary-color);
     --notify-font-size: ~`pxtorem(14)`;
     --notify-min-height: ~`pxtorem(36)`;
@@ -529,28 +688,47 @@
     --steps-tail-horizontal-left: 9PX;
     --steps-tail-vertical-top: 9PX;
     --steps-tail-standard-size: 1PX;
+    --dark-steps-tail-standard-background: var(--dark-line-color);
     --steps-tail-standard-background: var(--line-color);
+    --dark-steps-tail-finish-background: var(--dark-primary-color);
     --steps-tail-finish-background: var(--primary-color);
-    --steps-finish-icon-num-background: #E8F3FF;
+    --dark-steps-finish-icon-num-background: var(--dark-lighter-primary-color);
+    --steps-finish-icon-num-background: var(--lighter-primary-color);
+    --dark-steps-process-icon-num-background: var(--dark-primary-color);
     --steps-process-icon-num-background: var(--primary-color);
-    --steps-wait-icon-num-background: #F2F3F5;
+    --dark-steps-wait-icon-num-background: var(--dark-lighter-line-color);
+    --steps-wait-icon-num-background: var(--lighter-line-color);
+    --dark-steps-error-icon-num-background: var(--dark-danger-color);
     --steps-error-icon-num-background: var(--danger-color);
     --steps-icon-svg-standard-font-size: 10PX;
+    --dark-steps-finish-icon-svg-color: var(--dark-primary-color);
     --steps-finish-icon-svg-color: var(--primary-color);
-    --steps-error-icon-svg-color: #FFFFFF;
+    --dark-steps-error-icon-svg-color: var(--dark-mask-content-color);
+    --steps-error-icon-svg-color: var(--mask-content-color);
     --steps-error-icon-svg-font-size: 8PX;
     --steps-icon-num-font-size: 12PX;
     --steps-icon-num-line-height: 18PX;
+    --dark-steps-icon-num-color: var(--dark-sub-info-font-color);
     --steps-icon-num-color: var(--sub-info-font-color);
-    --steps-process-icon-num-color: #FFFFFF;
+    --dark-steps-process-icon-num-color: var(--dark-mask-content-color);
+    --steps-process-icon-num-color: var(--mask-content-color);
+    --dark-steps-finish-dot-border-color: var(--dark-primary-color);
     --steps-finish-dot-border-color: var(--primary-color);
+    --dark-steps-process-dot-background: var(--dark-primary-color);
     --steps-process-dot-background: var(--primary-color);
+    --dark-steps-wait-dot-border-color: var(--dark-sub-info-font-color);
     --steps-wait-dot-border-color: var(--sub-info-font-color);
+    --dark-steps-finish-title-color: var(--dark-font-color);
     --steps-finish-title-color: var(--font-color);
+    --dark-steps-error-title-color: var(--dark-danger-color);
     --steps-error-title-color: var(--danger-color);
+    --dark-steps-process-title-color: var(--dark-primary-color);
     --steps-process-title-color: var(--primary-color);
+    --dark-steps-wait-title-color: var(--dark-sub-info-font-color);
     --steps-wait-title-color: var(--sub-info-font-color);
+    --dark-steps-description-color: var(--dark-sub-font-color);
     --steps-description-color: var(--sub-font-color);
+    --dark-steps-wait-description-color: var(--dark-sub-info-font-color);
     --steps-wait-description-color: var(--sub-info-font-color);
     --steps-icon-width: 18PX;
     --steps-icon-height: 18PX;
@@ -567,19 +745,23 @@
     --steps-description-margin-top: ~`pxtorem(2)`;
     --steps-vertical-padding-bottom: 0;
     --steps-vertical-padding-left: ~`pxtorem(20)`;
-    --steps-process-with-config-item-icon-color: #FFFFFF;
+    --dark-steps-process-with-config-item-icon-color: var(--dark-mask-content-color);
+    --steps-process-with-config-item-icon-color: var(--mask-content-color);
     --swipe-action-open-transition: cubic-bezier(0.2, 0.8, 0.32, 1.28);
     --swipe-action-close-transition: cubic-bezier(0.34, 0.69, 0.1, 1);
     --swipe-action-info-padding: ~`pxtorem(16)`;
     --swipe-action-info-bounce-buffer: ~`pxtorem(30)`;
     --swipe-action-text-font-size: ~`pxtorem(16)`;
     --swipe-action-text-line-height: ~`pxtorem(22)`;
-    --swipe-action-text-color: #ffffff;
+    --dark-swipe-action-text-color: var(--dark-mask-content-color);
+    --swipe-action-text-color: var(--mask-content-color);
     --swipe-action-icon-width: ~`pxtorem(20)`;
     --swipe-action-icon-height: ~`pxtorem(20)`;
     --swipe-action-icon-margin-right: ~`pxtorem(4)`;
+    --dark-badge-background-color: var(--dark-danger-color);
     --badge-background-color: var(--danger-color);
-    --badge-text-color: #FFFFFF;
+    --dark-badge-text-color: var(--dark-mask-content-color);
+    --badge-text-color: var(--mask-content-color);
     --badge-font-size: 12PX;
     --badge-dot-width: 8PX;
     --badge-text-width: 16PX;
@@ -587,19 +769,28 @@
     --badge-text-deviation: -8PX;
     --badge-dot-deviation: -4PX;
     --badge-border-radius: 100PX;
-    --badge-border-color: #FFFFFF;
+    --dark-badge-border-color: var(--dark-background-color);
+    --badge-border-color: var(--background-color);
     --circle-progress-font-size: ~`pxtorem(14)`;
+    --dark-circle-progress-primary-color: var(--dark-primary-color);
     --circle-progress-primary-color: var(--primary-color);
-    --circle-progress-track-color: #F2F3F5;
+    --dark-circle-progress-track-color: var(--dark-lighter-line-color);
+    --circle-progress-track-color: var(--lighter-line-color);
+    --dark-circle-progress-disabled-color: var(--dark-disabled-color);
     --circle-progress-disabled-color: var(--disabled-color);
-    --circle-progress-mini-track-color: #E8F3FF;
+    --dark-circle-progress-mini-track-color: var(--dark-lighter-primary-color);
+    --circle-progress-mini-track-color: var(--lighter-primary-color);
     --circle-progress-linear-gradient-start-color: #4776E6;
     --circle-progress-linear-gradient-end-color: #14CAFF;
     --circle-progress-linear-gradient-text-color: #3C89EC;
+    --dark-progress-primary-color: var(--dark-primary-color);
     --progress-primary-color: var(--primary-color);
-    --progress-track-color: #F2F3F5;
+    --dark-progress-track-color: var(--dark-lighter-line-color);
+    --progress-track-color: var(--lighter-line-color);
+    --dark-progress-disabled-color: var(--dark-disabled-color);
     --progress-disabled-color: var(--disabled-color);
-    --progress-disabled-text-color: #86909C;
+    --dark-progress-disabled-text-color: var(--dark-sub-info-font-color);
+    --progress-disabled-text-color: var(--sub-info-font-color);
     --progress-linear-gradient-start-color: #4776E6;
     --progress-linear-gradient-end-color: #14CAFF;
     --progress-linear-gradient-text-color: #3C89EC;
@@ -617,19 +808,30 @@
     --pagination-field-btn-text-font-size: ~`pxtorem(14)`;
     --pagination-field-btn-icon-text-gutter: ~`pxtorem(8)`;
     --pagination-field-btn-icon-side-margin: ~`pxtorem(-3)`;
+    --dark-pagination-field-primary-background: var(--dark-primary-color);
     --pagination-field-primary-background: var(--primary-color);
-    --pagination-field-primary-text-color: #FFFFFF;
-    --pagination-field-default-background: #F7F8FA;
+    --dark-pagination-field-primary-text-color: var(--dark-mask-content-color);
+    --pagination-field-primary-text-color: var(--mask-content-color);
+    --dark-pagination-field-default-background: var(--dark-card-background-color);
+    --pagination-field-default-background: var(--card-background-color);
+    --dark-pagination-field-default-text-color: var(--dark-font-color);
     --pagination-field-default-text-color: var(--font-color);
-    --pagination-field-disabled-background: #F7F8FA;
-    --pagination-field-disabled-text-color: #C9CDD4;
+    --dark-pagination-field-disabled-background: var(--dark-card-background-color);
+    --pagination-field-disabled-background: var(--card-background-color);
+    --dark-pagination-field-disabled-text-color: var(--dark-disabled-color);
+    --pagination-field-disabled-text-color: var(--disabled-color);
+    --dark-pagination-field-text-color: var(--dark-font-color);
     --pagination-field-text-color: var(--font-color);
+    --dark-pagination-field-text-primary-text-color: var(--dark-primary-color);
     --pagination-field-text-primary-text-color: var(--primary-color);
     --pagination-item-font-size: ~`pxtorem(18)`;
     --pagination-item-line-height: ~`pxtorem(22)`;
+    --dark-pagination-item-primary-text-color: var(--dark-primary-color);
     --pagination-item-primary-text-color: var(--primary-color);
+    --dark-pagination-item-default-text-color: var(--dark-font-color);
     --pagination-item-default-text-color: var(--font-color);
-    --progress-text-inner-color: #FFFFFF;
+    --dark-progress-text-inner-color: var(--dark-mask-content-color);
+    --progress-text-inner-color: var(--mask-content-color);
     --progress-text-gutter: ~`pxtorem(8)`;
     --progress-text-font-size: ~`pxtorem(14)`;
     --progress-text-follow-font-size: ~`pxtorem(13)`;
@@ -640,10 +842,13 @@
     --rate-icon-size: 24PX;
     --rate-icon-offset: 6PX;
     --rate-icon-active-color: #FFB400;
-    --rate-icon-normal-color: #E5E6EB;
-    --rate-icon-disabled-active-color: #C9CDD4;
+    --dark-rate-icon-normal-color: var(--dark-line-color);
+    --rate-icon-normal-color: var(--line-color);
+    --dark-rate-icon-disabled-active-color: var(--dark-disabled-color);
+    --rate-icon-disabled-active-color: var(--disabled-color);
     --count-down-font-size: ~`pxtorem(16)`;
     --count-down-line-height: ~`pxtorem(22)`;
+    --dark-count-down-color: var(--dark-font-color);
     --count-down-color: var(--font-color);
     --grid-icon-width: ~`pxtorem(32)`;
     --grid-icon-height: ~`pxtorem(32)`;
@@ -655,149 +860,198 @@
     --grid-vertical-content-line-height: ~`pxtorem(16)`;
     --grid-horizontal-text-margin-left: ~`pxtorem(12)`;
     --grid-horizontal-content-margin-top: ~`pxtorem(0)`;
+    --dark-grid-border-color: var(--dark-line-color);
     --grid-border-color: var(--line-color);
     --grid-border-size: 66.66%;
     --action-sheet-item-height: ~`pxtorem(54)`;
     --action-sheet-item-font-size: ~`pxtorem(16)`;
     --action-sheet-border-radius: ~`pxtorem(8)`;
-    --action-sheet-cancel-border-color: #F2F3F5;
+    --dark-action-sheet-cancel-border-color: var(--dark-lighter-line-color);
+    --action-sheet-cancel-border-color: var(--lighter-line-color);
     --action-sheet-cancel-border-width: ~`pxtorem(8)`;
     --action-sheet-header-padding: ~`pxtorem(16)`;
     --action-sheet-title-font-size: ~`pxtorem(16)`;
     --action-sheet-sub-title-font-size: ~`pxtorem(14)`;
     --search-bar-padding: ~`pxtorem(16)`;
-    --search-bar-background-color: #FFFFFF;
+    --dark-search-bar-background-color: var(--dark-background-color);
+    --search-bar-background-color: var(--background-color);
     --search-bar-square-shape-border-radius: ~`pxtorem(2)`;
     --search-bar-round-shape-border-radius: ~`pxtorem(9999)`;
     --search-bar-input-wrapper-height: ~`pxtorem(36)`;
     --search-bar-input-wrapper-padding: ~`pxtorem(8)` ~`pxtorem(14)`;
-    --search-bar-input-wrapper-background-color: #F2F3F5;
+    --dark-search-bar-input-wrapper-background-color: var(--dark-lighter-line-color);
+    --search-bar-input-wrapper-background-color: var(--lighter-line-color);
     --search-bar-input-wrapper-font-size: ~`pxtorem(14)`;
     --search-bar-input-height: ~`pxtorem(20)`;
+    --dark-search-bar-input-caret-color: var(--dark-primary-color);
     --search-bar-input-caret-color: var(--primary-color);
+    --dark-search-bar-input-placeholder-color: var(--dark-disabled-color);
     --search-bar-input-placeholder-color: var(--disabled-color);
     --search-bar-prefix-margin-right: ~`pxtorem(9)`;
-    --search-bar-clear-icon-color: #C9CDD4;
+    --dark-search-bar-clear-icon-color: var(--dark-disabled-color);
+    --search-bar-clear-icon-color: var(--disabled-color);
     --search-bar-clear-icon-font-size: 16PX;
     --search-bar-clear-icon-padding-left: ~`pxtorem(16)`;
-    --search-bar-search-icon-color: #86909C;
+    --dark-search-bar-search-icon-color: var(--dark-sub-info-font-color);
+    --search-bar-search-icon-color: var(--sub-info-font-color);
     --search-bar-search-icon-font-size: ~`pxtorem(16)`;
+    --dark-search-bar-cancel-btn-color: var(--dark-primary-color);
     --search-bar-cancel-btn-color: var(--primary-color);
     --search-bar-cancel-btn-font-size: ~`pxtorem(15)`;
     --search-bar-cancel-btn-margin-left: ~`pxtorem(16)`;
-    --search-bar-association-background-color: #FFFFFF;
+    --dark-search-bar-association-background-color: var(--dark-container-background-color);
+    --search-bar-association-background-color: var(--container-background-color);
     --search-bar-association-item-height: ~`pxtorem(52)`;
     --search-bar-association-item-padding: ~`pxtorem(16)`;
     --search-bar-association-item-font-size: ~`pxtorem(15)`;
+    --dark-search-bar-association-item-color: var(--dark-font-color);
     --search-bar-association-item-color: var(--font-color);
+    --dark-search-bar-association-item-highlight-color: var(--dark-primary-color);
     --search-bar-association-item-highlight-color: var(--primary-color);
     --image-picker-font-size: ~`pxtorem(14)`;
     --image-picker-disabled-opacity: 0.7;
     --image-picker-border-radius: ~`pxtorem(2)`;
-    --image-picker-add-background: #f7f8fa;
+    --dark-image-picker-add-background: var(--dark-card-background-color);
+    --image-picker-add-background: var(--card-background-color);
     --image-picker-add-icon-font-size: ~`pxtorem(30)`;
-    --image-picker-add-icon-color: #d8d8d8;
+    --dark-image-picker-add-icon-color: var(--dark-disabled-color);
+    --image-picker-add-icon-color: var(--disabled-color);
     --image-picker-add-text-font-size: ~`pxtorem(12)`;
+    --dark-image-picker-add-text-color: var(--dark-sub-info-font-color);
     --image-picker-add-text-color: var(--sub-info-font-color);
-    --image-picker-error-color: #ffffff;
+    --dark-image-picker-error-color: var(--dark-mask-content-color);
+    --image-picker-error-color: var(--mask-content-color);
     --image-picker-error-background: rgba(0, 0, 0, 0.5);
-    --image-picker-close-color: #ffffff;
+    --dark-image-picker-close-color: var(--dark-mask-content-color);
+    --image-picker-close-color: var(--mask-content-color);
     --image-picker-close-font-size: ~`pxtorem(12)`;
     --image-picker-close-width: ~`pxtorem(18)`;
     --image-picker-close-height: ~`pxtorem(18)`;
     --image-picker-close-background: rgba(0, 0, 0, 0.3);
     --image-picker-close-border-radius: 0 ~`pxtorem(2)`;
-    --index-bar-background: white;
+    --dark-index-bar-background: var(--dark-background-color);
+    --index-bar-background: var(--background-color);
+    --dark-index-bar-group-active-color: var(--dark-primary-color);
     --index-bar-group-active-color: var(--primary-color);
     --index-bar-group-left-spacing: ~`pxtorem(16)`;
     --index-bar-group-title-height: ~`pxtorem(24)`;
     --index-bar-group-title-background: #f7f8fa;
+    --dark-index-bar-group-title-background: #2e2e30;
+    --dark-index-bar-group-title-font-color: var(--dark-sub-info-font-color);
     --index-bar-group-title-font-color: var(--sub-info-font-color);
     --index-bar-group-title-font-size: ~`pxtorem(14)`;
     --index-bar-group-item-height: ~`pxtorem(54)`;
     --index-bar-group-item-font-size: ~`pxtorem(16)`;
+    --dark-index-bar-sidebar-active-color: var(--dark-primary-color);
     --index-bar-sidebar-active-color: var(--primary-color);
     --index-bar-sidebar-item-font-size: ~`pxtorem(10)`;
     --index-bar-sidebar-item-line-height: ~`pxtorem(14)`;
     --index-bar-sidebar-item-padding: ~`pxtorem(2)` ~`pxtorem(8)`;
     --index-bar-sidebar-item-width: ~`pxtorem(10)`;
     --index-bar-sidebar-sweat-padding: 0 ~`pxtorem(8)`;
-    --index-bar-sidebar-sweat-background: #323232;
-    --index-bar-sidebar-sweat-color: white;
+    --index-bar-sidebar-sweat-background: rgba(0, 0, 0, 0.8);
+    --dark-index-bar-sidebar-sweat-color: var(--dark-mask-content-color);
+    --index-bar-sidebar-sweat-color: var(--mask-content-color);
     --index-bar-sidebar-sweat-right: ~`pxtorem(36)`;
     --index-bar-sidebar-sweat-font-size: ~`pxtorem(24)`;
     --index-bar-sidebar-sweat-radius: ~`pxtorem(50)`;
     --index-bar-sidebar-sweat-triangle-position: ~`pxtorem(-27)`;
     --index-bar-sidebar-sweat-triangle-border: ~`pxtorem(18)` solid transparent;
-    --index-bar-sidebar-toast-background: #323232;
-    --index-bar-sidebar-toast-color: white;
+    --index-bar-sidebar-toast-background: rgba(0, 0, 0, 0.8);
+    --dark-index-bar-sidebar-toast-color: var(--dark-mask-content-color);
+    --index-bar-sidebar-toast-color: var(--mask-content-color);
     --index-bar-sidebar-toast-height: ~`pxtorem(48)`;
     --index-bar-sidebar-toast-radius: ~`pxtorem(4)`;
     --index-bar-sidebar-toast-padding: 0 ~`pxtorem(8)`;
     --index-bar-sidebar-toast-font-size: ~`pxtorem(24)`;
     --stepper-font-size: ~`pxtorem(14)`;
-    --stepper-square-border: 1PX solid #f2f3f5;
+    --dark-stepper-square-border-color: var(--dark-lighter-line-color);
+    --stepper-square-border-color: var(--lighter-line-color);
     --stepper-square-border-radius: ~`pxtorem(2)`;
-    --stepper-square-background-color: #ffffff;
+    --stepper-square-background-color: transparent;
     --stepper-round-button-border-radius: 50%;
     --stepper-round-input-background-color: transparent;
     --stepper-button-size: ~`pxtorem(28)`;
     --stepper-button-icon-size: ~`pxtorem(10)`;
-    --stepper-default-background-color: #f7f8fa;
-    --stepper-content-color: #1d2129;
-    --stepper-disable-color: #c9cdd4;
+    --dark-stepper-default-background-color: var(--dark-card-background-color);
+    --stepper-default-background-color: var(--card-background-color);
+    --dark-stepper-content-color: var(--dark-font-color);
+    --stepper-content-color: var(--font-color);
+    --dark-stepper-disable-color: var(--dark-disabled-color);
+    --stepper-disable-color: var(--disabled-color);
     --stepper-input-width: ~`pxtorem(40)`;
     --stepper-input-height: ~`pxtorem(28)`;
     --stepper-input-margin: 0 1PX;
     --form-item-label-item-font-size: ~`pxtorem(16)`;
     --form-item-label-item-line-height: ~`pxtorem(54)`;
+    --dark-form-item-label-item-color: var(--dark-font-color);
     --form-item-label-item-color: var(--font-color);
     --form-item-label-item-gutter: ~`pxtorem(16)`;
     --form-item-label-item-width: ~`pxtorem(96)`;
-    --form-item-border-divider-color: rgba(0, 0, 0, 0.08);
+    --dark-form-item-border-divider-color: var(--dark-line-color);
+    --form-item-border-divider-color: var(--line-color);
+    --dark-form-item-label-item-required-asterisk-color: var(--dark-danger-color);
     --form-item-label-item-required-asterisk-color: var(--danger-color);
+    --dark-form-item-error-message-color: var(--dark-danger-color);
     --form-item-error-message-color: var(--danger-color);
+    --dark-form-item-warning-message-color: var(--dark-warning-color);
     --form-item-warning-message-color: var(--warning-color);
     --time-line-dot-width: ~`pxtorem(9)`;
+    --dark-time-line-dot-border-color: var(--dark-primary-color);
     --time-line-dot-border-color: var(--primary-color);
+    --dark-time-line-dot-background-color: var(--dark-background-color);
     --time-line-dot-background-color: var(--background-color);
     --time-line-axis-width: ~`pxtorem(1)`;
+    --dark-time-line-axis-color: var(--dark-line-color);
     --time-line-axis-color: var(--line-color);
     --time-line-label-font-size: ~`pxtorem(12)`;
+    --dark-time-line-label-color: var(--dark-sub-info-font-color);
     --time-line-label-color: var(--sub-info-font-color);
     --time-line-content-margin-top: ~`pxtorem(7)`;
     --time-line-content-margin-bottom: ~`pxtorem(19)`;
     --time-line-content-margin-left: ~`pxtorem(8)`;
     --time-line-content-border-radius: ~`pxtorem(4)`;
     --time-line-content-font-size: ~`pxtorem(16)`;
+    --dark-time-line-content-background-color: var(--dark-line-color);
     --time-line-content-background-color: var(--line-color);
+    --dark-time-line-content-color: var(--dark-font-color);
     --time-line-content-color: var(--font-color);
     --keyboard-background: #f2f3f5;
+    --dark-keyboard-background: #232324;
     --keyboard-content-padding: ~`pxtorem(8)`;
     --keyboard-unified-margin: ~`pxtorem(8)`;
-    --keyboard-confirm-key-background: #165dff;
-    --keyboard-confirm-key-color: #ffffff;
+    --dark-keyboard-confirm-key-background: var(--dark-primary-color);
+    --keyboard-confirm-key-background: var(--primary-color);
+    --dark-keyboard-confirm-key-color: var(--dark-mask-content-color);
+    --keyboard-confirm-key-color: var(--mask-content-color);
     --keyboard-confirm-key-font-size: ~`pxtorem(18)`;
     --keyboard-key-font-weight: 500;
     --keyboard-key-font-size: ~`pxtorem(22)`;
     --keyboard-key-icon-size: ~`pxtorem(26)`;
     --keyboard-key-line-height: ~`pxtorem(30)`;
     --keyboard-key-background: #ffffff;
-    --keyboard-key-active-background: #e5e6eb;
+    --dark-keyboard-key-background: #2e2e30;
+    --dark-keyboard-key-active-background: var(--dark-line-color);
+    --keyboard-key-active-background: var(--line-color);
     --keyboard-key-border-radius: ~`pxtorem(4)`;
     --keyboard-key-height: ~`pxtorem(48)`;
-    --keyboard-key-color: #1d2129;
+    --dark-keyboard-key-color: var(--dark-font-color);
+    --keyboard-key-color: var(--font-color);
     --divider-line-thickness: 1PX;
+    --dark-divider-line-color: var(--dark-line-color);
     --divider-line-color: var(--line-color);
     --divider-content-font-size: ~`pxtorem(14)`;
+    --dark-divider-content-font-color: var(--dark-sub-font-color);
     --divider-content-font-color: var(--sub-font-color);
     --divider-left-width: ~`pxtorem(28)`;
     --divider-right-width: ~`pxtorem(28)`;
     --divider-content-padding: ~`pxtorem(12)`;
     --divider-padding: ~`pxtorem(16)`;
     --skeleton-border-radius: ~`pxtorem(0)`;
-    --skeleton-background-color: #F2F3F5;
+    --dark-skeleton-background-color: var(--dark-lighter-line-color);
+    --skeleton-background-color: var(--lighter-line-color);
     --skeleton-gradient-animation-color: rgba(255, 255, 255, 0.6);
+    --dark-skeleton-gradient-animation-color: hsla(0, 0%, 100%, 0.08);
     --skeleton-breath-opacity: 0.4;
     --skeleton-gradient-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
     --skeleton-gradient-animation-duration: 1.5s;