diff --git a/packages/common/Checkbox/src/main.vue b/packages/common/Checkbox/src/main.vue
index 6c0efc405..ec1ed86f8 100644
--- a/packages/common/Checkbox/src/main.vue
+++ b/packages/common/Checkbox/src/main.vue
@@ -14,9 +14,6 @@
   >
     <div
       class="n-checkbox-box"
-      :class="{
-        'simulate-hollow-out-fill': !disabled
-      }"
       @click="handleClick"
     >
       <check-mark class="n-checkbox-box__check-mark" />
@@ -35,7 +32,6 @@
 <script>
 import withapp from '../../../mixins/withapp'
 import themeable from '../../../mixins/themeable'
-import hollowoutable from '../../../mixins/hollowoutable'
 import asformitem from '../../../mixins/asformitem'
 import CheckMark from './CheckMark'
 import LineMark from './LineMark'
@@ -55,7 +51,6 @@ export default {
   mixins: [
     withapp,
     themeable,
-    hollowoutable,
     asformitem(),
     collectable('NCheckboxGroup', 'collectedCheckboxValues')
   ],
diff --git a/packages/common/Transfer/src/TransferListItem.vue b/packages/common/Transfer/src/TransferListItem.vue
index b3745b3d3..6c24b294d 100644
--- a/packages/common/Transfer/src/TransferListItem.vue
+++ b/packages/common/Transfer/src/TransferListItem.vue
@@ -15,7 +15,7 @@
       <div class="n-transfer-list-item__checkbox">
         <n-checkbox
           :disabled="disabled"
-          :value="checked"
+          :checked="checked"
           @input="handleInput"
         />
       </div>
diff --git a/packages/common/Transfer/src/main.vue b/packages/common/Transfer/src/main.vue
index b147d00d9..e9b06b68b 100644
--- a/packages/common/Transfer/src/main.vue
+++ b/packages/common/Transfer/src/main.vue
@@ -1,5 +1,10 @@
 <template>
-  <div class="n-transfer">
+  <div
+    class="n-transfer"
+    :class="{
+      [`n-${synthesizedTheme}-theme`]: synthesizedTheme
+    }"
+  >
     <div class="n-transfer-list">
       <div class="n-transfer-list-header">
         <div class="n-transfer-list-header__checkbox">
@@ -135,6 +140,9 @@ import NTransferButton from './TransferButton'
 import cloneDeep from 'lodash/cloneDeep'
 import withlightbar from '../../../mixins/withlightbar'
 import withsecondlightbar from '../../../mixins/withsecondlightbar'
+import asformitem from '../../../mixins/asformitem'
+import withapp from '../../../mixins/withapp'
+import themeable from '../../../mixins/themeable'
 
 export default {
   name: 'NTransfer',
@@ -144,7 +152,7 @@ export default {
     NTransferListItem,
     NTransferButton
   },
-  mixins: [withlightbar, withsecondlightbar],
+  mixins: [withapp, themeable, asformitem(), withlightbar, withsecondlightbar],
   props: {
     value: {
       type: Array,
@@ -244,6 +252,9 @@ export default {
       }).then(() => {
         this.init = false
       })
+    },
+    value (value, oldValue) {
+      this.$emit('change', value, oldValue)
     }
   },
   mounted () {
@@ -259,7 +270,6 @@ export default {
     emitInputEvent (value) {
       const newValue = this.cleanValue(value)
       this.$emit('input', newValue)
-      this.$emit('change', newValue)
     },
     cleanValue (value) {
       if (Array.isArray(value)) {
diff --git a/styles/Transfer.scss b/styles/Transfer.scss
index 1878b11df..ca6d2f937 100644
--- a/styles/Transfer.scss
+++ b/styles/Transfer.scss
@@ -1,133 +1,138 @@
 @import './mixins/mixins.scss';
 @import './themes/vars.scss';
 
-@include b(transfer) {
-  display: flex;
-  @include b(transfer-list) {
-    width: 182px;
-    height: 312px;
-    background-color: rgba(75,81,106,1);
-    border-radius: 6px;
-    @include b(transfer-list-header) {
-      background:rgba(255,255,255,0.2);
-      display: flex;
-      border-radius: 6px 6px 0 0;
-      align-items: center;
-      height: 40px;
-      @include e(checkbox) {
-        position: relative;
-        padding: 0 8px 0 14px;
-        @include b(checkbox) {
-          display: block;
-        }
-      }
-      @include e(header) {
-        flex: 1;
-        line-height: 1;
-        font-size: 16px;
-        font-weight: 700;
-        color: rgba(255, 255, 255, 1);
-        @include m(disabled) {
-          color: rgba(255, 255, 255, 0.25);
-        }
-      }
-      @include e(label) {
-        font-size: 12px;
-        justify-self: flex-end;
-        margin-right: 14px;
-      }
-    }
-    @include b(transfer-list-body) {
-      overflow: hidden;
-      position: relative;
-      height: 272px;
-      @include b(scrollbar-content) {
-        width: 100%;
-      }
-      @include b(transfer-list-body-content) {
-        padding: 0;
-        margin: 0;
-        position: relative;
-        @include b(transfer-list-light-bar) {
-          @include fade-in-transition(transfer-list-light-bar);
-          height: 34px;
-          transition: top .15s $default-cubic-bezier;
-          background-color: rgba(96, 220, 178, 0.3);
-          width: 100%;
-          position: absolute;
-        }
-        @include b(transfer-list-item) {
-          @include slide-right-transition(transfer-list-item-source);
-          @include slide-left-transition(transfer-list-item-target);
+@include themes-mixin {
+  @include b(transfer) {
+    display: flex;
+    @include b(transfer-list) {
+      width: 182px;
+      height: 312px;
+      transition: background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
+      background-color: map-get($--transfer-panel-background-color, 'default');
+      border-radius: 6px;
+      border: 1px solid $--transfer-panel-border-color;
+      @include b(transfer-list-header) {
+        background-color: map-get($--transfer-panel-header-background-color, 'default');
+        transition: background-color .3s $default-cubic-bezier;
+        display: flex;
+        border-radius: 6px 6px 0 0;
+        align-items: center;
+        height: 40px;
+        @include e(checkbox) {
           position: relative;
-          cursor: pointer;
-          max-height: 34px;
-          display: flex;
-          align-items: center;
-          font-size: 14px;
-          height: 34px;
-          color: rgba(255, 255, 255, 1);
-          @include e(label) {
-            text-overflow: ellipsis;
-            overflow: hidden;
-            white-space: nowrap;
-            padding-right: 4px;
+          padding: 0 8px 0 14px;
+          @include b(checkbox) {
+            display: block;
           }
-          @include e(checkbox) {
+        }
+        @include e(header) {
+          flex: 1;
+          line-height: 1;
+          font-size: 16px;
+          font-weight: 700;
+          color: map-get($--transfer-panel-header-text-color, 'default');
+          transition: color .3s $default-cubic-bezier;
+          @include m(disabled) {
+            color: map-get($--transfer-panel-header-text-color, 'disabled');
+          }
+        }
+        @include e(label) {
+          transition: color .3s $default-cubic-bezier;
+          color: map-get($--transfer-panel-header-label-text-color, 'default');
+          font-size: 12px;
+          justify-self: flex-end;
+          margin-right: 14px;
+        }
+      }
+      @include b(transfer-list-body) {
+        overflow: hidden;
+        position: relative;
+        height: 272px;
+        @include b(scrollbar-content) {
+          width: 100%;
+        }
+        @include b(transfer-list-body-content) {
+          padding: 0;
+          margin: 0;
+          position: relative;
+          @include b(transfer-list-light-bar) {
+            @include fade-in-transition(transfer-list-light-bar);
+            height: 34px;
+            transition: top .15s $default-cubic-bezier;
+            background-color: map-get($--tranfer-item-lightbar-background-color, 'default');
+            width: 100%;
+            position: absolute;
+          }
+          @include b(transfer-list-item) {
+            @include slide-right-transition(transfer-list-item-source);
+            @include slide-left-transition(transfer-list-item-target);
+            transition: color .3s $default-cubic-bezier;
             position: relative;
-            padding: 0 8px 0 14px;
-            @include b(checkbox) {
-              display: block;
+            cursor: pointer;
+            max-height: 34px;
+            display: flex;
+            align-items: center;
+            font-size: 14px;
+            height: 34px;
+            color: map-get($--transfer-item-text-color, 'default');
+            @include e(label) {
+              text-overflow: ellipsis;
+              overflow: hidden;
+              white-space: nowrap;
+              padding-right: 4px;
+            }
+            @include e(checkbox) {
+              position: relative;
+              padding: 0 8px 0 14px;
+              @include b(checkbox) {
+                display: block;
+              }
+            }
+            @include m(disabled) {
+              color: map-get($--transfer-item-text-color, 'disabled');
+              cursor: not-allowed;
             }
           }
-          @include m(disabled) {
-            color: rgba(255, 255, 255, 0.25);
-            cursor: not-allowed;
-          }
-          @include m(selected) {
-            color: rgba(99, 226, 183, 1);
-          }
         }
       }
-      
     }
-  }
-  @include b(transfer-gap) {
-    width: 96px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    @include b(transfer-button) {
-      width: 36px;
-      height: 36px;
-      border-radius: 18px;
-      cursor: pointer;
-      &:first-child {
-        margin-bottom: 12px;
-      }
-      @include e(icon) {
-        pointer-events: none;
-        fill: rgba(255, 255, 255, 0.3);
-        transition: fill .3s $default-cubic-bezier;
-      }
-      &:hover {
-        @include e(icon) {
-          fill: rgba(99, 226, 183, 1);
+    @include b(transfer-gap) {
+      width: 96px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      @include b(transfer-button) {
+        width: 36px;
+        height: 36px;
+        border-radius: 18px;
+        cursor: pointer;
+        &:first-child {
+          margin-bottom: 12px;
         }
-      }
-      &:active {
         @include e(icon) {
-          fill: rgba(77, 177, 153, 1);
+          pointer-events: none;
+          fill: map-get($--transfer-gap-button-background-color, 'default');
+          transition: fill .3s $default-cubic-bezier;
         }
-      }
-      @include m(to) {
-        transform: rotate(180deg);
-      }
-      @include m(disabled) {
-        cursor: not-allowed;
-        @include e(icon) {
-          fill: rgba(255, 255, 255, .15)!important;
+        &:hover {
+          @include e(icon) {
+            fill: map-get($--transfer-gap-button-background-color, 'hover');
+          }
+        }
+        &:active {
+          @include e(icon) {
+            fill: map-get($--transfer-gap-button-background-color, 'active');
+          }
+        }
+        @include m(to) {
+          transform: rotate(180deg);
+        }
+        @include m(disabled) {
+          cursor: not-allowed;
+          @include e(icon) {
+            fill: map-get($--transfer-gap-button-background-color, 'disabled') !important;
+          }
         }
       }
     }
diff --git a/styles/themes/dark/components/CheckBox.scss b/styles/themes/dark/components/CheckBox.scss
index db28e8382..4960a1442 100644
--- a/styles/themes/dark/components/CheckBox.scss
+++ b/styles/themes/dark/components/CheckBox.scss
@@ -6,5 +6,5 @@
   $--checkbox-indeterminate-color: $--neutral-10 !global;
   $--checkbox-disabled: $border-color !global;
   $--checkbox-disabled-bg-color: rgba(255, 255, 255, 0.16) !global;
-  $--checkbox-icon-fill: black !global;
+  $--checkbox-icon-fill: $--n-background-color !global;
 }
\ No newline at end of file
diff --git a/styles/themes/dark/components/Transfer.scss b/styles/themes/dark/components/Transfer.scss
new file mode 100644
index 000000000..96670b6d0
--- /dev/null
+++ b/styles/themes/dark/components/Transfer.scss
@@ -0,0 +1,29 @@
+@mixin setup-dark-transfer {
+  $--transfer-panel-background-color: (
+    'default': rgba(255, 255, 255, .1)
+  ) !global;
+  $--transfer-panel-header-background-color: (
+    'default': rgba(255, 255, 255, .1)
+  ) !global;
+  $--transfer-panel-header-text-color: (
+    'default': $--n-text-color
+  ) !global;
+  $--transfer-panel-header-label-text-color: (
+    'default': $--n-secondary-text-color,
+    'disabled': $--n-disabled-text-color
+  ) !global;
+  $--transfer-gap-button-background-color: (
+    'default': rgba(255, 255, 255, 0.3),
+    'disabled': rgba(255, 255, 255, .15),
+    'hover': $--primary-6,
+    'active': $--primary-7
+  ) !global;
+  $--transfer-item-text-color: (
+    'default': $--n-secondary-text-color,
+    'disabled': $--n-disabled-text-color
+  ) !global;
+  $--tranfer-item-lightbar-background-color: (
+    'default': change-color($--n-primary-color, $alpha: .3)
+  ) !global;
+  $--transfer-panel-border-color: transparent !global;
+}
\ No newline at end of file
diff --git a/styles/themes/dark/index.scss b/styles/themes/dark/index.scss
index abc105123..56e0b0236 100644
--- a/styles/themes/dark/index.scss
+++ b/styles/themes/dark/index.scss
@@ -38,6 +38,7 @@
 @import "components/Tabs.scss";
 @import "components/Statistic.scss";
 @import "components/Breadcrumb.scss";
+@import "components/Transfer.scss";
 
 @mixin setup-dark-theme() {
   @include setup-dark-colors();
@@ -103,4 +104,5 @@
   @include setup-dark-tabs;
   @include setup-dark-statistic;
   @include setup-dark-breadcrumb;
+  @include setup-dark-transfer;
 }
diff --git a/styles/themes/light/components/Transfer.scss b/styles/themes/light/components/Transfer.scss
new file mode 100644
index 000000000..8689c1b6b
--- /dev/null
+++ b/styles/themes/light/components/Transfer.scss
@@ -0,0 +1,30 @@
+@mixin setup-light-transfer {
+  $--transfer-panel-background-color: (
+    'default': $--n-background-color
+  ) !global;
+  $--transfer-panel-header-background-color: (
+    'default': $--n-table-header-color
+  ) !global;
+  $--transfer-panel-header-text-color: (
+    'default': $--n-text-color,
+    'disabled': $--n-disabled-text-color
+  ) !global;
+  $--transfer-panel-header-label-text-color: (
+    'default': $--n-secondary-text-color,
+    'disabled': $--n-disabled-text-color
+  ) !global;
+  $--transfer-gap-button-background-color: (
+    'default': rgba(0, 0, 0, .2),
+    'disabled': rgba(0, 0, 0, .1),
+    'hover': $--primary-6,
+    'active': $--primary-7
+  ) !global;
+  $--transfer-item-text-color: (
+    'default': $--n-secondary-text-color,
+    'disabled': $--n-disabled-text-color
+  ) !global;
+  $--tranfer-item-lightbar-background-color: (
+    'default': change-color($--n-primary-color, $alpha: .2)
+  ) !global;
+  $--transfer-panel-border-color: $--n-border-color !global;
+}
\ No newline at end of file
diff --git a/styles/themes/light/index.scss b/styles/themes/light/index.scss
index 10121bb86..21b7f36a0 100644
--- a/styles/themes/light/index.scss
+++ b/styles/themes/light/index.scss
@@ -38,6 +38,7 @@
 @import "components/Tabs.scss";
 @import "components/Statistic.scss";
 @import "components/Breadcrumb.scss";
+@import "components/Transfer.scss";
 
 @mixin setup-light-theme() {
   @include setup-light-colors();
@@ -53,6 +54,7 @@
   $--n-divider-color: $--neutral-7 !global;
   $--n-border-color: $--neutral-6 !global;
 
+  $--n-table-header-color: $--neutral-8 !global;
   $--n-secondary-text-color: $--neutral-3 !global;
   $--n-text-color: $--neutral-2 !global;
   $--n-disabled-text-color: $--neutral-5 !global;
@@ -99,4 +101,5 @@
   @include setup-light-tabs;
   @include setup-light-statistic;
   @include setup-light-breadcrumb;
+  @include setup-light-transfer;
 }