diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 504208982..fb66a5c82 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -136,31 +136,31 @@
 }
 
 @mixin text-wariant($bg-color, $name) {
-  a.bg-#{$name}:hover {
+  a.bg-#{'' + $name}:hover {
     background-color: darken($bg-color, 5%);
   }
 
-  a.text-#{$name}:hover {
+  a.text-#{'' + $name}:hover {
     color: darken($bg-color, 5%);
   }
 
-  .text-#{$name} {
+  .text-#{'' + $name} {
     color: $bg-color;
   }
 
-  .text-#{$name}-lt {
+  .text-#{'' + $name}-lt {
     color: darken($bg-color, 5%);
   }
 
-  .text-#{$name}-lter {
+  .text-#{'' + $name}-lter {
     color: darken($bg-color, 10%);
   }
 
-  .text-#{$name}-dk {
+  .text-#{'' + $name}-dk {
     color: darken($bg-color, 5%);
   }
 
-  .text-#{$name}-dker {
+  .text-#{'' + $name}-dker {
     color: darken($bg-color, 10%);
   }
 }
diff --git a/scss/components/_crud.scss b/scss/components/_crud.scss
index 40c5a8d7a..a71fb28ef 100644
--- a/scss/components/_crud.scss
+++ b/scss/components/_crud.scss
@@ -115,26 +115,26 @@
       flex-grow: 1;
       @include clearfix();
     }
-  }
 
-  &-toolbar-item {
-    margin-left: $Crud-toolbar-gap;
-    line-height: $Crud-toolbar-lineHeight;
-    height: $Crud-toolbar-height;
-    vertical-align: middle;
-
-    &--left {
-      float: left;
-    }
-
-    &--right {
-      float: right;
-    }
-  }
-
-  &-actions {
-    > .#{$ns}Button + .#{$ns}Button {
+    &-toolbar-item {
       margin-left: $Crud-toolbar-gap;
+      line-height: $Crud-toolbar-lineHeight;
+      height: $Crud-toolbar-height;
+      vertical-align: middle;
+
+      &--left {
+        float: left;
+      }
+
+      &--right {
+        float: right;
+      }
+    }
+
+    &-actions {
+      > .#{$ns}Button + .#{$ns}Button {
+        margin-left: $Crud-toolbar-gap;
+      }
     }
   }
 }
diff --git a/scss/themes/_cxd-variables.scss b/scss/themes/_cxd-variables.scss
index 25debe2e5..59da8fe34 100644
--- a/scss/themes/_cxd-variables.scss
+++ b/scss/themes/_cxd-variables.scss
@@ -1,4 +1,5 @@
-// 等以后 @use 语句支持了，就不用搞得这么麻烦了。
+@import '../functions';
+
 $remFactor: 16px;
 
 $ns: 'cxd-';
@@ -469,3 +470,5 @@ $ListMenu-item--onHover-bg: #eaf6fe;
 $Transfer-title-bg: $Table-thead-bg;
 
 $Satus-icon-width: px2rem(14px);
+
+@import '../variables';
diff --git a/scss/themes/_dark-variables.scss b/scss/themes/_dark-variables.scss
new file mode 100644
index 000000000..c701dcc16
--- /dev/null
+++ b/scss/themes/_dark-variables.scss
@@ -0,0 +1,128 @@
+@import '../functions';
+
+// dark 主题
+// 参考： https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/color/
+
+$ns: 'dark-';
+
+$orange: #ff9f0b;
+$yellow: #ffd609;
+$green: #32d74b;
+$turquoise: #00d1b2;
+$cyan: #17a2b8;
+$blue: #0983ff;
+$purple: #bf5af2;
+$red: #dc3545;
+
+$primary: $blue;
+$info: #2296f3;
+$success: $green;
+$warning: $orange;
+$danger: $red;
+$light: #3a3a3a;
+$dark: #1e1f22;
+$black: #141316;
+
+$text-color: rgb(243, 241, 241);
+
+$text--muted-color: #6c6c6c;
+$text--loud-color: lighten($text-color, 10%);
+
+$background: #333538;
+$background-head: #191c22;
+
+$body-bg: $background;
+$Page-aside-bg: #3c3c3c;
+$Panel-bg: #302d2a;
+$borderColor: $black;
+$link-color: $info;
+
+$borderColor: #656565;
+
+$Button--default-bg: $black;
+$Calendar-btnCancel-bg: $background-head;
+$Calendar-cell-bg: $Panel-bg;
+
+$Card-bg: $Panel-bg;
+$Card-onModified-bg: $dark;
+$Card-onModified-color: $text-color;
+$Card-onChecked-bg: $black;
+$Card-onChecked-color: $text-color;
+$Card-actions-onHover-bg: $dark;
+$Card-actions-onHover-color: $text-color;
+
+$Checkbox-gb: linear-gradient(#515151, #4b4b4b);
+$Checkbox-onHover-color: $blue;
+$ColorPicker-bg: $background;
+$DatePicker-bg: $background;
+$DatePicker-header-select-borderColor: $background;
+$DropDown-menu-bg: $background;
+$Fieldset-legend-bgColor: $background;
+
+$Form-input-bg: #3c3c3c;
+
+$Form-input-addOnBg: $Form-input-bg;
+$Form-input-color: $text-color;
+$Form-input-onDisabled-bg: $Panel-bg;
+$Form-select-bg: $background;
+$Form-select-menu-bg: $background;
+$Form-select-onHover-bg: $background-head;
+$Form-selectValue-bg: $Panel-bg;
+$Form-selectValue-color: $text-color;
+
+$TreeSelect-popover-bg: $Panel-bg;
+
+$IconPicker-tab-onActive-bg: $background;
+$InputGroup-select-bg: $background;
+$InputGroup-select-onFocused-bg: $Panel-bg;
+$istItem-onModified-bg: $black;
+
+$Layout-aside-bg: $background-head;
+$Layout-aside-onAcitve-bg: $Panel-bg;
+$Layout-aside-onHover-bg: #404040;
+$Layout-aside-subList-bg: #131519;
+$Layout-header-bg: $background-head;
+
+$List-bg: $Panel-bg;
+$ListControl-item-bg: $background;
+$ListControl-item-onActive-before-bg: $background;
+$ListItem--strip-bg: $background;
+$ListItem-onChecked-bg: $black;
+$ListItem-onChecked-color: $text-color;
+$ListItem-onModified-color: $text-color;
+
+$Number-handler-bg: $background;
+
+$Panel--default-bg: linear-gradient(#524e48, #423e3a);
+$Panel-footerBg: linear-gradient(#524e48, #423e3a);
+$PopOver-bg: $background;
+
+$Table-onHover-bg: $dark;
+$Table-strip-bg: $Panel-bg;
+$Table-thead-bg: #2f2f2f;
+$Table-onChecked-bg: $black;
+$Table-onChecked-color: $text-color;
+$Table-onModified-bg: $black;
+$Table-onModified-color: $text-color;
+
+$Tabs--card-bg: #323639;
+$Tabs--card-borderTopColor: $background;
+$Tabs--card-onActive-bg: $Panel-bg;
+$Tabs--radio-bg: $Panel-bg;
+$Tabs-content-bg: $Panel-bg;
+$Tabs-onActive-bg: $Panel-bg;
+$Tabs-onActive-borderColor: $borderColor;
+$Tabs-onActive-color: lighten($text-color, 10%);
+$Tabs-onHover-borderColor: $Tabs-onActive-borderColor;
+
+$Tabs--radio-bg: $Panel-bg;
+
+$Tooltip--attr-color: $text-color;
+$TransferSelect--table-heading-bg: $background;
+$Wizard-steps-bg: $background-head;
+$Wizard-steps-li-onActive-arrow-bg: $Panel-bg;
+$Wizard-steps-li-onActive-bg: $Panel-bg;
+
+$Transfer-title-bg: #2f2f2f;
+
+@import '../variables';
diff --git a/scss/themes/_default-variables.scss b/scss/themes/_default-variables.scss
new file mode 100644
index 000000000..3f8b4b9d5
--- /dev/null
+++ b/scss/themes/_default-variables.scss
@@ -0,0 +1,19 @@
+@import '../functions';
+
+$ns: 'a-';
+
+$primary: #7266ba;
+$info: #23b7e5;
+$success: #27c24c;
+$warning: #fad733;
+$danger: #f05050;
+$light: #edf1f2;
+$dark: #3a3f51;
+$black: #1c2b36;
+
+$text-color: #58666e;
+$link-color: $info;
+
+$Form-input-borderColor: #cfdadd;
+
+@import '../variables';
diff --git a/scss/themes/cxd.scss b/scss/themes/cxd.scss
index 277c1a64e..de165c391 100644
--- a/scss/themes/cxd.scss
+++ b/scss/themes/cxd.scss
@@ -1,9 +1,7 @@
 // 百度云舍主题：http://console.yunshe.design/docs/index
 // 更新时间: 2019-08-14 14:31:00
-@import '../functions';
-@import 'cxd-variables';
+@import './cxd-variables';
 
-@import '../variables';
 @import '../mixins';
 @import '../base/reset';
 @import '../base/normalize';
diff --git a/scss/themes/dark.scss b/scss/themes/dark.scss
index 58b10275c..9d0fd3b76 100644
--- a/scss/themes/dark.scss
+++ b/scss/themes/dark.scss
@@ -1,161 +1,5 @@
-// dark 主题
-// 参考： https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/color/
+@import './dark-variables';
 
-$ns: 'dark-';
-
-$orange: #ff9f0b;
-$yellow: #ffd609;
-$green: #32d74b;
-$turquoise: #00d1b2;
-$cyan: #17a2b8;
-$blue: #0983ff;
-$purple: #bf5af2;
-$red: #dc3545;
-
-$primary: $blue;
-$info: #2296f3;
-$success: $green;
-$warning: $orange;
-$danger: $red;
-$light: #3a3a3a;
-$dark: #1e1f22;
-$black: #141316;
-
-$text-color: rgb(243, 241, 241);
-
-$text--muted-color: #6c6c6c;
-$text--loud-color: lighten($text-color, 10%);
-
-$background: #333538;
-$background-head: #191c22;
-
-$body-bg: $background;
-$Page-aside-bg: #3c3c3c;
-$Panel-bg: #302d2a;
-$borderColor: $black;
-$link-color: $info;
-
-$borderColor: #656565;
-
-$Button--default-bg: $black;
-$Calendar-btnCancel-bg: $background-head;
-$Calendar-cell-bg: $Panel-bg;
-
-$Card-bg: $Panel-bg;
-$Card-onModified-bg: $dark;
-$Card-onModified-color: $text-color;
-$Card-onChecked-bg: $black;
-$Card-onChecked-color: $text-color;
-$Card-actions-onHover-bg: $dark;
-$Card-actions-onHover-color: $text-color;
-
-$Checkbox-gb: linear-gradient(#515151, #4b4b4b);
-$Checkbox-onHover-color: $blue;
-$ColorPicker-bg: $background;
-$DatePicker-bg: $background;
-$DatePicker-header-select-borderColor: $background;
-$DropDown-menu-bg: $background;
-$Fieldset-legend-bgColor: $background;
-
-$Form-input-bg: #3c3c3c;
-
-$Form-input-addOnBg: $Form-input-bg;
-$Form-input-color: $text-color;
-$Form-input-onDisabled-bg: $Panel-bg;
-$Form-select-bg: $background;
-$Form-select-menu-bg: $background;
-$Form-select-onHover-bg: $background-head;
-$Form-selectValue-bg: $Panel-bg;
-$Form-selectValue-color: $text-color;
-
-$TreeSelect-popover-bg: $Panel-bg;
-
-$IconPicker-tab-onActive-bg: $background;
-$InputGroup-select-bg: $background;
-$InputGroup-select-onFocused-bg: $Panel-bg;
-$istItem-onModified-bg: $black;
-
-$Layout-aside-bg: $background-head;
-$Layout-aside-onAcitve-bg: $Panel-bg;
-$Layout-aside-onHover-bg: #404040;
-$Layout-aside-subList-bg: #131519;
-$Layout-header-bg: $background-head;
-
-$List-bg: $Panel-bg;
-$ListControl-item-bg: $background;
-$ListControl-item-onActive-before-bg: $background;
-$ListItem--strip-bg: $background;
-$ListItem-onChecked-bg: $black;
-$ListItem-onChecked-color: $text-color;
-$ListItem-onModified-color: $text-color;
-
-$Number-handler-bg: $background;
-
-$Panel--default-bg: linear-gradient(#524e48, #423e3a);
-$Panel-footerBg: linear-gradient(#524e48, #423e3a);
-$PopOver-bg: $background;
-
-$Table-onHover-bg: $dark;
-$Table-strip-bg: $Panel-bg;
-$Table-thead-bg: #2f2f2f;
-$Table-onChecked-bg: $black;
-$Table-onChecked-color: $text-color;
-$Table-onModified-bg: $black;
-$Table-onModified-color: $text-color;
-
-$Tabs--card-bg: #323639;
-$Tabs--card-borderTopColor: $background;
-$Tabs--card-onActive-bg: $Panel-bg;
-$Tabs--radio-bg: $Panel-bg;
-$Tabs-content-bg: $Panel-bg;
-$Tabs-onActive-bg: $Panel-bg;
-$Tabs-onActive-borderColor: $borderColor;
-$Tabs-onActive-color: lighten($text-color, 10%);
-$Tabs-onHover-borderColor: $Tabs-onActive-borderColor;
-
-$Tabs--radio-bg: $Panel-bg;
-
-$Tooltip--attr-color: $text-color;
-$TransferSelect--table-heading-bg: $background;
-$Wizard-steps-bg: $background-head;
-$Wizard-steps-li-onActive-arrow-bg: $Panel-bg;
-$Wizard-steps-li-onActive-bg: $Panel-bg;
-
-$Transfer-title-bg: #2f2f2f;
-
-button[disabled],
-html input[disabled] {
-  cursor: not-allowed;
-}
-
-input {
-  color: $text-color;
-  background: $Form-input-bg;
-}
-
-pre {
-  color: $text-color;
-  background: $background;
-}
-
-.rdtPicker {
-  background: $background;
-}
-
-.rdtPicker th {
-  border-bottom: none;
-}
-
-.fr-toolbar {
-  background: $background;
-}
-
-.markdown-body {
-  color: $text-color;
-}
-
-@import '../functions';
-@import '../variables';
 @import '../mixins';
 @import '../base/reset';
 @import '../base/normalize';
diff --git a/scss/themes/default.scss b/scss/themes/default.scss
index 17137474a..8291b3e14 100644
--- a/scss/themes/default.scss
+++ b/scss/themes/default.scss
@@ -1,24 +1,5 @@
 // 默认主题
-
-// 更新时间: 2019-08-14 14:31:00
-$ns: 'a-';
-
-$primary: #7266ba;
-$info: #23b7e5;
-$success: #27c24c;
-$warning: #fad733;
-$danger: #f05050;
-$light: #edf1f2;
-$dark: #3a3f51;
-$black: #1c2b36;
-
-$text-color: #58666e;
-$link-color: $info;
-
-$Form-input-borderColor: #cfdadd;
-
-@import '../functions';
-@import '../variables';
+@import './default-variables';
 @import '../mixins';
 @import '../base/reset';
 @import '../base/normalize';