diff --git a/.github/workflows/unit-test.yml b/.github/workflows/unit-test.yml
index 52795f7ac2..9023a3f349 100644
--- a/.github/workflows/unit-test.yml
+++ b/.github/workflows/unit-test.yml
@@ -18,13 +18,3 @@ jobs:
         run: yarn lint
       - name: Test
         run: yarn test
-
-  dependabot:
-    needs:
-      - build
-    runs-on: ubuntu-latest
-    steps:
-      - name: auto-merge
-        uses: ridedott/dependabot-auto-merge-action@master
-        with:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/packages/theme-chalk/src/breadcrumb.scss b/packages/theme-chalk/src/breadcrumb.scss
index ad725053d5..495de3f221 100644
--- a/packages/theme-chalk/src/breadcrumb.scss
+++ b/packages/theme-chalk/src/breadcrumb.scss
@@ -32,7 +32,7 @@
         color: $--color-text-primary;
 
         &:hover {
-          color: $--color-primary;
+          color: var(--el-color-primary);
           cursor: pointer;
         }
       }
diff --git a/packages/theme-chalk/src/check-tag.scss b/packages/theme-chalk/src/check-tag.scss
index da6119854f..ff4596975d 100644
--- a/packages/theme-chalk/src/check-tag.scss
+++ b/packages/theme-chalk/src/check-tag.scss
@@ -6,7 +6,7 @@
 @include b(check-tag) {
   background-color: $--background-color-base;
   border-radius: $--border-radius-base;
-  color: $--color-info;
+  color: var(--el-color-info);
   cursor: pointer;
   display: inline-block;
   font-size: var(--el-font-size-base);
diff --git a/packages/theme-chalk/src/collapse.scss b/packages/theme-chalk/src/collapse.scss
index 2cac52f868..0b7cef1438 100644
--- a/packages/theme-chalk/src/collapse.scss
+++ b/packages/theme-chalk/src/collapse.scss
@@ -35,7 +35,7 @@
       }
     }
     &.focusing:focus:not(:hover) {
-      color: $--color-primary;
+      color: var(--el-color-primary);
     }
     @include when(active) {
       border-bottom-color: transparent;
diff --git a/packages/theme-chalk/src/color-picker.scss b/packages/theme-chalk/src/color-picker.scss
index 20c33fcd42..1544d142ce 100644
--- a/packages/theme-chalk/src/color-picker.scss
+++ b/packages/theme-chalk/src/color-picker.scss
@@ -25,7 +25,7 @@
     }
 
     &.selected {
-      box-shadow: 0 0 3px 2px $--color-primary;
+      box-shadow: 0 0 3px 2px var(--el-color-primary);
     }
 
     > div {
@@ -237,14 +237,14 @@
       cursor: not-allowed;
     }
     &:hover {
-      color: $--color-primary;
-      border-color: $--color-primary;
+      color: var(--el-color-primary);
+      border-color: var(--el-color-primary);
     }
   }
 
   @include e(link-btn) {
     cursor: pointer;
-    color: $--color-primary;
+    color: var(--el-color-primary);
     text-decoration: none;
     padding: 15px;
     font-size: 12px;
diff --git a/packages/theme-chalk/src/date-picker/date-table.scss b/packages/theme-chalk/src/date-picker/date-table.scss
index 7e1307b8d5..fbb2c876d9 100644
--- a/packages/theme-chalk/src/date-picker/date-table.scss
+++ b/packages/theme-chalk/src/date-picker/date-table.scss
@@ -67,7 +67,7 @@
     &.today {
       position: relative;
       span {
-        color: $--color-primary;
+        color: var(--el-color-primary);
         font-weight: bold;
       }
       &.start-date span,
diff --git a/packages/theme-chalk/src/date-picker/month-table.scss b/packages/theme-chalk/src/date-picker/month-table.scss
index 130bd8a63e..2dd24570f3 100644
--- a/packages/theme-chalk/src/date-picker/month-table.scss
+++ b/packages/theme-chalk/src/date-picker/month-table.scss
@@ -16,7 +16,7 @@
     }
     &.today {
       .cell {
-        color: $--color-primary;
+        color: var(--el-color-primary);
         font-weight: bold;
       }
       &.start-date .cell,
diff --git a/packages/theme-chalk/src/date-picker/picker.scss b/packages/theme-chalk/src/date-picker/picker.scss
index 38bfd51ac2..e7af2d03b2 100644
--- a/packages/theme-chalk/src/date-picker/picker.scss
+++ b/packages/theme-chalk/src/date-picker/picker.scss
@@ -116,10 +116,10 @@
   }
 
   @include when(active) {
-    border-color: $--color-primary;
+    border-color: var(--el-color-primary);
 
     &:hover {
-      border-color: $--color-primary;
+      border-color: var(--el-color-primary);
     }
   }
 
diff --git a/packages/theme-chalk/src/date-picker/time-spinner.scss b/packages/theme-chalk/src/date-picker/time-spinner.scss
index e2297427a3..e4f7cba7bd 100644
--- a/packages/theme-chalk/src/date-picker/time-spinner.scss
+++ b/packages/theme-chalk/src/date-picker/time-spinner.scss
@@ -49,7 +49,7 @@
     cursor: pointer;
 
     &:hover {
-      color: $--color-primary;
+      color: var(--el-color-primary);
     }
 
     &.#{$namespace}-icon-arrow-up {
diff --git a/packages/theme-chalk/src/date-picker/year-table.scss b/packages/theme-chalk/src/date-picker/year-table.scss
index 8c46c9c575..ceb5160bff 100644
--- a/packages/theme-chalk/src/date-picker/year-table.scss
+++ b/packages/theme-chalk/src/date-picker/year-table.scss
@@ -16,7 +16,7 @@
 
     &.today {
       .cell {
-        color: $--color-primary;
+        color: var(--el-color-primary);
         font-weight: bold;
       }
     }
diff --git a/packages/theme-chalk/src/dialog.scss b/packages/theme-chalk/src/dialog.scss
index abf6b69234..72e2c9ef23 100644
--- a/packages/theme-chalk/src/dialog.scss
+++ b/packages/theme-chalk/src/dialog.scss
@@ -48,13 +48,13 @@
     font-size: var(--el-message-close-size);
 
     .#{$namespace}-dialog__close {
-      color: $--color-info;
+      color: var(--el-color-info);
     }
 
     &:focus,
     &:hover {
       .#{$namespace}-dialog__close {
-        color: $--color-primary;
+        color: var(--el-color-primary);
       }
     }
   }
diff --git a/packages/theme-chalk/src/drawer.scss b/packages/theme-chalk/src/drawer.scss
index c15374979d..75bb3da828 100644
--- a/packages/theme-chalk/src/drawer.scss
+++ b/packages/theme-chalk/src/drawer.scss
@@ -53,7 +53,8 @@
 
 @mixin animation-in($direction) {
   &.#{$direction} {
-    animation: #{$direction}-drawer-animation var(--el-transition-duration) linear reverse;
+    animation: #{$direction}-drawer-animation var(--el-transition-duration) linear
+      reverse;
   }
 }
 
@@ -118,7 +119,7 @@ $directions: rtl, ltr, ttb, btt;
     outline: none;
     &:hover {
       i {
-        color: $--color-primary;
+        color: var(--el-color-primary);
       }
     }
   }
diff --git a/packages/theme-chalk/src/form.scss b/packages/theme-chalk/src/form.scss
index 31cf3c80bb..8efb74ce1e 100644
--- a/packages/theme-chalk/src/form.scss
+++ b/packages/theme-chalk/src/form.scss
@@ -110,7 +110,7 @@
     }
   }
   @include e(error) {
-    color: $--color-danger;
+    color: var(--el-color-danger);
     font-size: 12px;
     line-height: 1;
     padding-top: 4px;
@@ -131,7 +131,7 @@
     @include pseudo('not(.is-no-asterisk)') {
       & > .#{$namespace}-form-item__label:before {
         content: '*';
-        color: $--color-danger;
+        color: var(--el-color-danger);
         margin-right: 4px;
       }
     }
@@ -142,7 +142,7 @@
     & .#{$namespace}-textarea__inner {
       &,
       &:focus {
-        border-color: $--color-danger;
+        border-color: var(--el-color-danger);
       }
     }
     & .#{$namespace}-input-group__append,
@@ -152,7 +152,7 @@
       }
     }
     .#{$namespace}-input__validateIcon {
-      color: $--color-danger;
+      color: var(--el-color-danger);
     }
   }
 
diff --git a/packages/theme-chalk/src/input-number.scss b/packages/theme-chalk/src/input-number.scss
index 16d57c7325..000d11639c 100644
--- a/packages/theme-chalk/src/input-number.scss
+++ b/packages/theme-chalk/src/input-number.scss
@@ -35,7 +35,7 @@
     font-size: 13px;
 
     &:hover {
-      color: $--color-primary;
+      color: var(--el-color-primary);
 
       & ~ .#{$namespace}-input:not(.is-disabled) .#{$namespace}-input__inner {
         border-color: $--input-focus-border;
diff --git a/packages/theme-chalk/src/input.scss b/packages/theme-chalk/src/input.scss
index 66335f91ca..1164add676 100644
--- a/packages/theme-chalk/src/input.scss
+++ b/packages/theme-chalk/src/input.scss
@@ -40,7 +40,7 @@
   }
 
   & .#{$namespace}-input__count {
-    color: $--color-info;
+    color: var(--el-color-info);
     background: $--color-white;
     position: absolute;
     font-size: 12px;
@@ -64,11 +64,11 @@
 
   @include when(exceed) {
     .#{$namespace}-textarea__inner {
-      border-color: $--color-danger;
+      border-color: var(--el-color-danger);
     }
 
     .#{$namespace}-input__count {
-      color: $--color-danger;
+      color: var(--el-color-danger);
     }
   }
 }
@@ -96,7 +96,7 @@
     height: 100%;
     display: inline-flex;
     align-items: center;
-    color: $--color-info;
+    color: var(--el-color-info);
     font-size: 12px;
 
     .#{$namespace}-input__count-inner {
@@ -208,12 +208,12 @@
 
   @include when(exceed) {
     .#{$namespace}-input__inner {
-      border-color: $--color-danger;
+      border-color: var(--el-color-danger);
     }
 
     .#{$namespace}-input__suffix {
       .#{$namespace}-input__count {
-        color: $--color-danger;
+        color: var(--el-color-danger);
       }
     }
   }
@@ -267,7 +267,7 @@
 
   @include e((append, prepend)) {
     background-color: $--background-color-base;
-    color: $--color-info;
+    color: var(--el-color-info);
     vertical-align: middle;
     display: table-cell;
     position: relative;
diff --git a/packages/theme-chalk/src/loading.scss b/packages/theme-chalk/src/loading.scss
index 492237bbdb..876ece8293 100644
--- a/packages/theme-chalk/src/loading.scss
+++ b/packages/theme-chalk/src/loading.scss
@@ -46,7 +46,7 @@
   position: absolute;
 
   .#{$namespace}-loading-text {
-    color: $--color-primary;
+    color: var(--el-color-primary);
     margin: 3px 0;
     font-size: 14px;
   }
@@ -62,12 +62,12 @@
     stroke-dasharray: 90, 150;
     stroke-dashoffset: 0;
     stroke-width: 2;
-    stroke: $--color-primary;
+    stroke: var(--el-color-primary);
     stroke-linecap: round;
   }
 
   i {
-    color: $--color-primary;
+    color: var(--el-color-primary);
   }
 }
 
diff --git a/packages/theme-chalk/src/menu.scss b/packages/theme-chalk/src/menu.scss
index d234246090..296a5bf922 100644
--- a/packages/theme-chalk/src/menu.scss
+++ b/packages/theme-chalk/src/menu.scss
@@ -13,7 +13,9 @@
   list-style: none;
   cursor: pointer;
   position: relative;
-  transition: border-color var(--el-transition-duration), background-color var(--el-transition-duration), color var(--el-transition-duration);
+  transition: border-color var(--el-transition-duration),
+    background-color var(--el-transition-duration),
+    color var(--el-transition-duration);
   box-sizing: border-box;
   white-space: nowrap;
 
@@ -83,7 +85,7 @@
 
       &.is-active {
         .#{$namespace}-submenu__title {
-          border-bottom: 2px solid $--color-primary;
+          border-bottom: 2px solid var(--el-color-primary);
           color: $--color-text-primary;
         }
       }
@@ -126,7 +128,7 @@
       color: $--color-text-primary;
     }
     & > .#{$namespace}-menu-item.is-active {
-      border-bottom: 2px solid $--color-primary;
+      border-bottom: 2px solid var(--el-color-primary);
       color: $--color-text-primary;
     }
   }
@@ -201,7 +203,7 @@
     vertical-align: middle;
   }
   @include when(active) {
-    color: $--color-primary;
+    color: var(--el-color-primary);
     i {
       color: inherit;
     }
@@ -239,7 +241,7 @@
   }
   @include when(active) {
     .#{$namespace}-submenu__title {
-      border-bottom-color: $--color-primary;
+      border-bottom-color: var(--el-color-primary);
     }
   }
   @include when(opened) {
diff --git a/packages/theme-chalk/src/progress.scss b/packages/theme-chalk/src/progress.scss
index db59139611..3db940a375 100644
--- a/packages/theme-chalk/src/progress.scss
+++ b/packages/theme-chalk/src/progress.scss
@@ -61,31 +61,31 @@
 
   @include when(success) {
     .#{$namespace}-progress-bar__inner {
-      background-color: $--color-success;
+      background-color: var(--el-color-success);
     }
 
     .#{$namespace}-progress__text {
-      color: $--color-success;
+      color: var(--el-color-success);
     }
   }
 
   @include when(warning) {
     .#{$namespace}-progress-bar__inner {
-      background-color: $--color-warning;
+      background-color: var(--el-color-warning);
     }
 
     .#{$namespace}-progress__text {
-      color: $--color-warning;
+      color: var(--el-color-warning);
     }
   }
 
   @include when(exception) {
     .#{$namespace}-progress-bar__inner {
-      background-color: $--color-danger;
+      background-color: var(--el-color-danger);
     }
 
     .#{$namespace}-progress__text {
-      color: $--color-danger;
+      color: var(--el-color-danger);
     }
   }
 }
@@ -107,7 +107,7 @@
     left: 0;
     top: 0;
     height: 100%;
-    background-color: $--color-primary;
+    background-color: var(--el-color-primary);
     text-align: right;
     border-radius: 100px;
     line-height: 1;
diff --git a/packages/theme-chalk/src/radio-button.scss b/packages/theme-chalk/src/radio-button.scss
index 2be27e0e5c..cf2788390f 100644
--- a/packages/theme-chalk/src/radio-button.scss
+++ b/packages/theme-chalk/src/radio-button.scss
@@ -36,7 +36,7 @@
     );
 
     &:hover {
-      color: $--color-primary;
+      color: var(--el-color-primary);
     }
 
     & [class*='#{$namespace}-icon-'] {
diff --git a/packages/theme-chalk/src/radio.scss b/packages/theme-chalk/src/radio.scss
index f29a06f5e6..3cdfde2d89 100644
--- a/packages/theme-chalk/src/radio.scss
+++ b/packages/theme-chalk/src/radio.scss
@@ -26,7 +26,7 @@
     height: map.get($--radio-bordered-height, 'default');
 
     &.is-checked {
-      border-color: $--color-primary;
+      border-color: var(--el-color-primary);
     }
 
     &.is-disabled {
diff --git a/packages/theme-chalk/src/reset.scss b/packages/theme-chalk/src/reset.scss
index 0dc2934e1e..3cffd3d73a 100644
--- a/packages/theme-chalk/src/reset.scss
+++ b/packages/theme-chalk/src/reset.scss
@@ -10,7 +10,7 @@ body {
 }
 
 a {
-  color: $--color-primary;
+  color: var(--el-color-primary);
   text-decoration: none;
 
   &:hover,
diff --git a/packages/theme-chalk/src/select-v2.scss b/packages/theme-chalk/src/select-v2.scss
index 926e012c74..fa55646867 100644
--- a/packages/theme-chalk/src/select-v2.scss
+++ b/packages/theme-chalk/src/select-v2.scss
@@ -27,7 +27,8 @@ $--input-inline-start: 7px !default;
     padding-bottom: 1px;
     border: 1px solid var(--el-border-color-base);
     border-radius: $--border-radius-base;
-    transition: border-color var(--el-transition-duration-fast) cubic-bezier(0.645, 0.045, 0.355, 1);
+    transition: border-color var(--el-transition-duration-fast)
+      cubic-bezier(0.645, 0.045, 0.355, 1);
 
     &:hover {
       border-color: $--color-text-placeholder;
@@ -38,7 +39,7 @@ $--input-inline-start: 7px !default;
     }
 
     @include when(focused) {
-      border-color: $--color-primary;
+      border-color: var(--el-color-primary);
     }
 
     @include when(hovering) {
@@ -238,7 +239,8 @@ $--input-inline-start: 7px !default;
     border: 1px solid #d9d9d9;
     border-radius: $--border-radius-base;
     position: relative;
-    transition: all var(--el-transition-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
+    transition: all var(--el-transition-duration)
+      cubic-bezier(0.645, 0.045, 0.355, 1);
   }
 
   @include e(input-calculator) {
diff --git a/packages/theme-chalk/src/slider.scss b/packages/theme-chalk/src/slider.scss
index 85c5ae4ab5..25ab5f64f5 100644
--- a/packages/theme-chalk/src/slider.scss
+++ b/packages/theme-chalk/src/slider.scss
@@ -162,7 +162,7 @@
       position: absolute;
       transform: translateX(-50%);
       font-size: 14px;
-      color: $--color-info;
+      color: var(--el-color-info);
       margin-top: 15px;
     }
   }
diff --git a/packages/theme-chalk/src/step.scss b/packages/theme-chalk/src/step.scss
index 73b117ed7f..5c411e913f 100644
--- a/packages/theme-chalk/src/step.scss
+++ b/packages/theme-chalk/src/step.scss
@@ -37,18 +37,18 @@
     }
 
     @include when(success) {
-      color: $--color-success;
-      border-color: $--color-success;
+      color: var(--el-color-success);
+      border-color: var(--el-color-success);
     }
 
     @include when(error) {
-      color: $--color-danger;
-      border-color: $--color-danger;
+      color: var(--el-color-danger);
+      border-color: var(--el-color-danger);
     }
 
     @include when(finish) {
-      color: $--color-primary;
-      border-color: $--color-primary;
+      color: var(--el-color-primary);
+      border-color: var(--el-color-primary);
     }
   }
 
@@ -131,15 +131,15 @@
     }
 
     @include when(success) {
-      color: $--color-success;
+      color: var(--el-color-success);
     }
 
     @include when(error) {
-      color: $--color-danger;
+      color: var(--el-color-danger);
     }
 
     @include when(finish) {
-      color: $--color-primary;
+      color: var(--el-color-primary);
     }
   }
 
@@ -159,15 +159,15 @@
     }
 
     @include when(success) {
-      color: $--color-success;
+      color: var(--el-color-success);
     }
 
     @include when(error) {
-      color: $--color-danger;
+      color: var(--el-color-danger);
     }
 
     @include when(finish) {
-      color: $--color-primary;
+      color: var(--el-color-primary);
     }
   }
 
diff --git a/packages/theme-chalk/src/table-column.scss b/packages/theme-chalk/src/table-column.scss
index ace0f7249f..7f9c6ae17d 100644
--- a/packages/theme-chalk/src/table-column.scss
+++ b/packages/theme-chalk/src/table-column.scss
@@ -40,7 +40,7 @@
     }
 
     @include when(active) {
-      background-color: $--color-primary;
+      background-color: var(--el-color-primary);
       color: $--color-white;
     }
   }
@@ -62,7 +62,7 @@
       padding: 0 3px;
 
       &:hover {
-        color: $--color-primary;
+        color: var(--el-color-primary);
       }
 
       &:focus {
diff --git a/packages/theme-chalk/src/tabs.scss b/packages/theme-chalk/src/tabs.scss
index a42484ba8d..9724daf7ad 100644
--- a/packages/theme-chalk/src/tabs.scss
+++ b/packages/theme-chalk/src/tabs.scss
@@ -12,9 +12,10 @@
     bottom: 0;
     left: 0;
     height: 2px;
-    background-color: $--color-primary;
+    background-color: var(--el-color-primary);
     z-index: 1;
-    transition: transform var(--el-transition-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
+    transition: transform var(--el-transition-duration)
+      cubic-bezier(0.645, 0.045, 0.355, 1);
     list-style: none;
   }
   @include e(new-tab) {
@@ -36,7 +37,7 @@
     }
 
     &:hover {
-      color: $--color-primary;
+      color: var(--el-color-primary);
     }
   }
   @include e(nav-wrap) {
@@ -112,7 +113,8 @@
     & .#{$namespace}-icon-close {
       border-radius: 50%;
       text-align: center;
-      transition: all var(--el-transition-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
+      transition: all var(--el-transition-duration)
+        cubic-bezier(0.645, 0.045, 0.355, 1);
       margin-left: 5px;
       &:before {
         transform: scale(0.9);
@@ -126,11 +128,11 @@
     }
 
     @include when(active) {
-      color: $--color-primary;
+      color: var(--el-color-primary);
     }
 
     &:hover {
-      color: $--color-primary;
+      color: var(--el-color-primary);
       cursor: pointer;
     }
 
@@ -176,8 +178,10 @@
     > .#{$namespace}-tabs__header .#{$namespace}-tabs__item {
       border-bottom: 1px solid transparent;
       border-left: 1px solid var(--el-border-color-light);
-      transition: color var(--el-transition-duration) cubic-bezier(0.645, 0.045, 0.355, 1),
-        padding var(--el-transition-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
+      transition: color var(--el-transition-duration)
+          cubic-bezier(0.645, 0.045, 0.355, 1),
+        padding var(--el-transition-duration)
+          cubic-bezier(0.645, 0.045, 0.355, 1);
       &:first-child {
         border-left: none;
       }
@@ -222,7 +226,8 @@
       content: none;
     }
     > .#{$namespace}-tabs__header .#{$namespace}-tabs__item {
-      transition: all var(--el-transition-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
+      transition: all var(--el-transition-duration)
+        cubic-bezier(0.645, 0.045, 0.355, 1);
       border: 1px solid transparent;
       margin-top: -1px;
       color: $--color-text-secondary;
@@ -236,13 +241,13 @@
       }
 
       &.is-active {
-        color: $--color-primary;
+        color: var(--el-color-primary);
         background-color: $--color-white;
         border-right-color: var(--el-border-color-base);
         border-left-color: var(--el-border-color-base);
       }
       &:not(.is-disabled):hover {
-        color: $--color-primary;
+        color: var(--el-color-primary);
       }
       &.is-disabled {
         color: $--disabled-color-base;
diff --git a/packages/theme-chalk/src/time-select.scss b/packages/theme-chalk/src/time-select.scss
index 11b047369f..cf6486e5c0 100644
--- a/packages/theme-chalk/src/time-select.scss
+++ b/packages/theme-chalk/src/time-select.scss
@@ -21,7 +21,7 @@
 }
 
 .time-select-item.selected:not(.disabled) {
-  color: $--color-primary;
+  color: var(--el-color-primary);
   font-weight: bold;
 }
 
diff --git a/packages/theme-chalk/src/timeline-item.scss b/packages/theme-chalk/src/timeline-item.scss
index 5c2a885d0f..10072e482c 100644
--- a/packages/theme-chalk/src/timeline-item.scss
+++ b/packages/theme-chalk/src/timeline-item.scss
@@ -43,19 +43,19 @@
     }
 
     @include m(primary) {
-      background-color: $--color-primary;
+      background-color: var(--el-color-primary);
     }
     @include m(success) {
-      background-color: $--color-success;
+      background-color: var(--el-color-success);
     }
     @include m(warning) {
-      background-color: $--color-warning;
+      background-color: var(--el-color-warning);
     }
     @include m(danger) {
-      background-color: $--color-danger;
+      background-color: var(--el-color-danger);
     }
     @include m(info) {
-      background-color: $--color-info;
+      background-color: var(--el-color-info);
     }
   }
 
diff --git a/packages/theme-chalk/src/transfer.scss b/packages/theme-chalk/src/transfer.scss
index 6021f2f341..83e895f1e1 100644
--- a/packages/theme-chalk/src/transfer.scss
+++ b/packages/theme-chalk/src/transfer.scss
@@ -86,7 +86,7 @@
     }
 
     &:hover {
-      color: $--color-primary;
+      color: var(--el-color-primary);
     }
 
     &.#{$namespace}-checkbox .#{$namespace}-checkbox__label {
diff --git a/packages/theme-chalk/src/tree.scss b/packages/theme-chalk/src/tree.scss
index 5ae2166117..2823f5f0ee 100644
--- a/packages/theme-chalk/src/tree.scss
+++ b/packages/theme-chalk/src/tree.scss
@@ -31,7 +31,7 @@
     left: 0;
     right: 0;
     height: 1px;
-    background-color: $--color-primary;
+    background-color: var(--el-color-primary);
   }
 }
 
@@ -47,7 +47,7 @@
 
   @include when(drop-inner) {
     > .#{$namespace}-tree-node__content .#{$namespace}-tree-node__label {
-      background-color: $--color-primary;
+      background-color: var(--el-color-primary);
       color: #fff;
     }
   }
diff --git a/packages/theme-chalk/src/upload.scss b/packages/theme-chalk/src/upload.scss
index d2525b66e9..91c3173950 100644
--- a/packages/theme-chalk/src/upload.scss
+++ b/packages/theme-chalk/src/upload.scss
@@ -44,16 +44,16 @@
     }
 
     &:hover {
-      border-color: $--color-primary;
-      color: $--color-primary;
+      border-color: var(--el-color-primary);
+      color: var(--el-color-primary);
     }
   }
   &:focus {
-    border-color: $--color-primary;
-    color: $--color-primary;
+    border-color: var(--el-color-primary);
+    color: var(--el-color-primary);
 
     .#{$namespace}-upload-dragger {
-      border-color: $--color-primary;
+      border-color: var(--el-color-primary);
     }
   }
 }
@@ -93,18 +93,18 @@
     text-align: center;
 
     em {
-      color: $--color-primary;
+      color: var(--el-color-primary);
       font-style: normal;
     }
   }
 
   &:hover {
-    border-color: $--color-primary;
+    border-color: var(--el-color-primary);
   }
 
   @include when(dragover) {
     background-color: rgba(32, 159, 255, 0.06);
-    border: 2px dashed $--color-primary;
+    border: 2px dashed var(--el-color-primary);
   }
 }
 
@@ -146,7 +146,7 @@
     }
 
     & .#{$namespace}-icon-upload-success {
-      color: $--color-success;
+      color: var(--el-color-success);
     }
 
     .#{$namespace}-icon-close {
@@ -172,7 +172,7 @@
       font-size: 12px;
       cursor: pointer;
       opacity: 1;
-      color: $--color-primary;
+      color: var(--el-color-primary);
     }
 
     &:hover {
@@ -265,7 +265,7 @@
     display: none;
 
     &:hover {
-      color: $--color-primary;
+      color: var(--el-color-primary);
     }
   }
 
diff --git a/website/components/demo/color/color-box.vue b/website/components/demo/color/color-box.vue
new file mode 100644
index 0000000000..c560ca9f7c
--- /dev/null
+++ b/website/components/demo/color/color-box.vue
@@ -0,0 +1,46 @@
+<template>
+  <el-row :gutter="12">
+    <el-col
+      v-for="(type, i) in colorsType"
+      :key="i"
+      :span="6"
+      :xs="{ span: 12 }"
+    >
+      <div class="demo-color-box" :style="{ background: getColorValue(type) }">
+        {{ type.charAt(0).toUpperCase() + type.slice(1) }}
+        <div class="value">{{ getColorValue(type).toUpperCase() }}</div>
+        <div class="bg-color-sub">
+          <div
+            v-for="(item, key) in Array(2)"
+            :key="key"
+            class="bg-success-sub-item"
+            :style="{
+              background: tintColor(getColorValue(type), (key + 8) / 10),
+            }"
+          ></div>
+        </div>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+const colorsType = ['success', 'warning', 'danger', 'info']
+import { tintColor } from '../../../color.js'
+
+export default {
+  data: function() {
+    return {
+      colorsType,
+    }
+  },
+  methods: {
+    getColorValue(type) {
+      return getComputedStyle(document.documentElement).getPropertyValue(
+        `--el-color-${type}`,
+      )
+    },
+    tintColor,
+  },
+}
+</script>
diff --git a/website/docs/en-US/color.md b/website/docs/en-US/color.md
index 48b47e8b8d..54f792f011 100644
--- a/website/docs/en-US/color.md
+++ b/website/docs/en-US/color.md
@@ -2,6 +2,7 @@
   import bus from '../../bus';
   import { tintColor } from '../../color.js';
   import BorderBox from "../../components/demo/color/border-box.vue"
+  import ColorBox from "../../components/demo/color/color-box.vue"
   const varMap = {
     'primary': '$--color-primary',
     'success': '$--color-success',
@@ -50,7 +51,8 @@
   }
   export default {
     components: {
-      BorderBox
+      BorderBox,
+      ColorBox,
     },
     mounted() {
       this.setGlobal();
@@ -134,76 +136,7 @@ The main color of Element Plus is bright and friendly blue.
 
 Besides the main color, you need to use different scene colors in different scenarios (for example, dangerous color indicates dangerous operation)
 
-<el-row :gutter="12">
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box"
-    :style="{ background: success }"
-    >Success<div class="value">#67C23A</div>
-      <div
-        class="bg-color-sub"
-      >
-        <div
-          class="bg-success-sub-item"
-          v-for="(item, key) in Array(2)"
-          :key="key"
-          :style="{ background: tintColor(success, (key + 8) / 10) }"
-            >
-        </div>
-      </div>
-    </div>
-  </el-col>
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box"
-    :style="{ background: warning }"
-    >Warning<div class="value">#E6A23C</div>
-      <div
-          class="bg-color-sub"
-        >
-        <div
-          class="bg-success-sub-item"
-          v-for="(item, key) in Array(2)"
-          :key="key"
-          :style="{ background: tintColor(warning, (key + 8) / 10) }"
-            >
-        </div>
-      </div>
-    </div>
-  </el-col>
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box"
-    :style="{ background: danger }"
-    >Danger<div class="value">#F56C6C</div>
-      <div
-          class="bg-color-sub"
-        >
-        <div
-          class="bg-success-sub-item"
-          v-for="(item, key) in Array(2)"
-          :key="key"
-          :style="{ background: tintColor(danger, (key + 8) / 10) }"
-            >
-        </div>
-      </div>
-    </div>
-  </el-col>
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box"
-    :style="{ background: info }"
-    >Info<div class="value">#909399</div>
-      <div
-          class="bg-color-sub"
-        >
-        <div
-          class="bg-success-sub-item"
-          v-for="(item, key) in Array(2)"
-          :key="key"
-          :style="{ background: tintColor(info, (key + 8) / 10) }"
-            >
-        </div>
-      </div>
-    </div>
-  </el-col>
-</el-row>
+<color-box />
 
 ### Neutral Color
 
diff --git a/website/docs/es/color.md b/website/docs/es/color.md
index e7380e2d41..9e59313ebb 100644
--- a/website/docs/es/color.md
+++ b/website/docs/es/color.md
@@ -2,6 +2,7 @@
   import bus from '../../bus';
   import { tintColor } from '../../color.js';
   import BorderBox from "../../components/demo/color/border-box.vue"
+  import ColorBox from "../../components/demo/color/color-box.vue"
   const borderColors = [
     {
       name: 'Borde base',
@@ -53,7 +54,8 @@
   }
   export default {
     components: {
-      BorderBox
+      BorderBox,
+      ColorBox,
     },
     mounted() {
       this.setGlobal();
@@ -137,76 +139,7 @@ El color principal de Element Plus es el azul brillante y amigable.
 
 Además del color principal, se necesitan utilizar distintos colores para diferentes escenarios (por ejemplo, el color en tono rojo indica una operación peligrosa).
 
-<el-row :gutter="12">
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box"
-    :style="{ background: success }"
-    >Success<div class="value">#67C23A</div>
-      <div
-        class="bg-color-sub"
-      >
-        <div
-          class="bg-success-sub-item"
-          v-for="(item, key) in Array(2)"
-          :key="key"
-          :style="{ background: tintColor(success, (key + 8) / 10) }"
-            >
-        </div>
-      </div>
-    </div>
-  </el-col>
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box"
-    :style="{ background: warning }"
-    >Warning<div class="value">#E6A23C</div>
-      <div
-          class="bg-color-sub"
-        >
-        <div
-          class="bg-success-sub-item"
-          v-for="(item, key) in Array(2)"
-          :key="key"
-          :style="{ background: tintColor(warning, (key + 8) / 10) }"
-            >
-        </div>
-      </div>
-    </div>
-  </el-col>
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box"
-    :style="{ background: danger }"
-    >Danger<div class="value">#F56C6C</div>
-      <div
-          class="bg-color-sub"
-        >
-        <div
-          class="bg-success-sub-item"
-          v-for="(item, key) in Array(2)"
-          :key="key"
-          :style="{ background: tintColor(danger, (key + 8) / 10) }"
-            >
-        </div>
-      </div>
-    </div>
-  </el-col>
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box"
-    :style="{ background: info }"
-    >Info<div class="value">#909399</div>
-      <div
-          class="bg-color-sub"
-        >
-        <div
-          class="bg-success-sub-item"
-          v-for="(item, key) in Array(2)"
-          :key="key"
-          :style="{ background: tintColor(info, (key + 8) / 10) }"
-            >
-        </div>
-      </div>
-    </div>
-  </el-col>
-</el-row>
+<color-box />
 
 ### Color neutro
 
diff --git a/website/docs/fr-FR/color.md b/website/docs/fr-FR/color.md
index e74569363d..94b3976f04 100644
--- a/website/docs/fr-FR/color.md
+++ b/website/docs/fr-FR/color.md
@@ -2,6 +2,7 @@
   import bus from '../../bus';
   import { tintColor } from '../../color.js';
   import BorderBox from "../../components/demo/color/border-box.vue"
+  import ColorBox from "../../components/demo/color/color-box.vue"
   const borderColors = [
     {
       name: 'Bordure de base',
@@ -52,7 +53,8 @@
   }
   export default {
     components: {
-      BorderBox
+      BorderBox,
+      ColorBox,
     },
     mounted() {
       this.setGlobal();
@@ -129,60 +131,7 @@ La couleur principale d'Element Plus est un bleu clair et agréable.
 
 En plus de la couleur principale, vous devrez sans doute utiliser d'autres couleurs pour différents cas de figures, par exemple une couleur de danger pour indiquer une opération dangereuse.
 
-<el-row :gutter="12">
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box" :style="{ background: success }">Succès
-      <div class="value">#67C23A</div>
-      <div class="bg-color-sub">
-        <div
-          class="bg-success-sub-item"
-          v-for="(item, key) in Array(2)"
-          :key="key"
-          :style="{ background: tintColor(success, (key + 8) / 10) }"
-        ></div>
-      </div>
-    </div>
-  </el-col>
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box" :style="{ background: warning }">Avertissement
-      <div class="value">#E6A23C</div>
-      <div class="bg-color-sub">
-        <div
-          class="bg-success-sub-item"
-          v-for="(item, key) in Array(2)"
-          :key="key"
-          :style="{ background: tintColor(warning, (key + 8) / 10) }"
-        ></div>
-      </div>
-    </div>
-  </el-col>
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box" :style="{ background: danger }">Danger
-      <div class="value">#F56C6C</div>
-      <div class="bg-color-sub">
-        <div
-          class="bg-success-sub-item"
-          v-for="(item, key) in Array(2)"
-          :key="key"
-          :style="{ background: tintColor(danger, (key + 8) / 10) }"
-        ></div>
-      </div>
-    </div>
-  </el-col>
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box" :style="{ background: info }">Info
-      <div class="value">#909399</div>
-      <div class="bg-color-sub">
-        <div
-          class="bg-success-sub-item"
-          v-for="(item, key) in Array(2)"
-          :key="key"
-          :style="{ background: tintColor(info, (key + 8) / 10) }"
-        ></div>
-      </div>
-    </div>
-  </el-col>
-</el-row>
+<color-box />
 
 ### Couleurs neutres
 
diff --git a/website/docs/jp/color.md b/website/docs/jp/color.md
index 22671c63ed..366a96c74d 100644
--- a/website/docs/jp/color.md
+++ b/website/docs/jp/color.md
@@ -2,6 +2,7 @@
   import bus from '../../bus';
   import { tintColor } from '../../color.js';
   import BorderBox from "../../components/demo/color/border-box.vue"
+  import ColorBox from "../../components/demo/color/color-box.vue"
   const borderColors = [
     {
       type: 'base',
@@ -48,7 +49,8 @@
   }
   export default {
     components: {
-      BorderBox
+      BorderBox,
+      ColorBox,
     },
     mounted() {
       this.setGlobal();
@@ -132,76 +134,7 @@ Element Plus のメインカラーは明るく親しみやすいブルーです
 
 メインカラーの他にも、シーンカラーを別のシナリオで使用する必要があります（例えば、危険な色は危険な操作を示します）。
 
-<el-row :gutter="12">
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box"
-    :style="{ background: success }"
-    >Success<div class="value">#67C23A</div>
-      <div
-        class="bg-color-sub"
-      >
-        <div
-          class="bg-success-sub-item"
-          v-for="(item, key) in Array(2)"
-          :key="key"
-          :style="{ background: tintColor(success, (key + 8) / 10) }"
-            >
-        </div>
-      </div>
-    </div>
-  </el-col>
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box"
-    :style="{ background: warning }"
-    >Warning<div class="value">#E6A23C</div>
-      <div
-          class="bg-color-sub"
-        >
-        <div
-          class="bg-success-sub-item"
-          v-for="(item, key) in Array(2)"
-          :key="key"
-          :style="{ background: tintColor(warning, (key + 8) / 10) }"
-            >
-        </div>
-      </div>
-    </div>
-  </el-col>
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box"
-    :style="{ background: danger }"
-    >Danger<div class="value">#F56C6C</div>
-      <div
-          class="bg-color-sub"
-        >
-        <div
-          class="bg-success-sub-item"
-          v-for="(item, key) in Array(2)"
-          :key="key"
-          :style="{ background: tintColor(danger, (key + 8) / 10) }"
-            >
-        </div>
-      </div>
-    </div>
-  </el-col>
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box"
-    :style="{ background: info }"
-    >Info<div class="value">#909399</div>
-      <div
-          class="bg-color-sub"
-        >
-        <div
-          class="bg-success-sub-item"
-          v-for="(item, key) in Array(2)"
-          :key="key"
-          :style="{ background: tintColor(info, (key + 8) / 10) }"
-            >
-        </div>
-      </div>
-    </div>
-  </el-col>
-</el-row>
+<color-box />
 
 ### ニュートラルカラー
 
diff --git a/website/docs/zh-CN/color.md b/website/docs/zh-CN/color.md
index 831103aebf..0d0fff00a7 100644
--- a/website/docs/zh-CN/color.md
+++ b/website/docs/zh-CN/color.md
@@ -2,6 +2,7 @@
   import bus from '../../bus';
   import { tintColor } from '../../color.js';
   import BorderBox from "../../components/demo/color/border-box.vue"
+  import ColorBox from "../../components/demo/color/color-box.vue"
   const borderColors = [
     {
       name: '一级边框',
@@ -52,7 +53,8 @@
   }
   export default {
     components: {
-      BorderBox
+      BorderBox,
+      ColorBox,
     },
     mounted() {
       this.setGlobal();
@@ -129,76 +131,7 @@ Element Plus 主要品牌颜色是鲜艳、友好的蓝色。
 
 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
 
-<el-row :gutter="12">
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box"
-    :style="{ background: success }"
-    >Success<div class="value">#67C23A</div>
-      <div
-        class="bg-color-sub"
-      >
-        <div
-          class="bg-success-sub-item"
-          v-for="(item, key) in Array(2)"
-          :key="key"
-          :style="{ background: tintColor(success, (key + 8) / 10) }"
-            >
-        </div>
-      </div>
-    </div>
-  </el-col>
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box"
-    :style="{ background: warning }"
-    >Warning<div class="value">#E6A23C</div>
-      <div
-          class="bg-color-sub"
-        >
-        <div
-          class="bg-success-sub-item"
-          v-for="(item, key) in Array(2)"
-          :key="key"
-          :style="{ background: tintColor(warning, (key + 8) / 10) }"
-            >
-        </div>
-      </div>
-    </div>
-  </el-col>
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box"
-    :style="{ background: danger }"
-    >Danger<div class="value">#F56C6C</div>
-      <div
-          class="bg-color-sub"
-        >
-        <div
-          class="bg-success-sub-item"
-          v-for="(item, key) in Array(2)"
-          :key="key"
-          :style="{ background: tintColor(danger, (key + 8) / 10) }"
-            >
-        </div>
-      </div>
-    </div>
-  </el-col>
-  <el-col :span="6" :xs="{span: 12}">
-    <div class="demo-color-box"
-    :style="{ background: info }"
-    >Info<div class="value">#909399</div>
-      <div
-          class="bg-color-sub"
-        >
-        <div
-          class="bg-success-sub-item"
-          v-for="(item, key) in Array(2)"
-          :key="key"
-          :style="{ background: tintColor(info, (key + 8) / 10) }"
-            >
-        </div>
-      </div>
-    </div>
-  </el-col>
-</el-row>
+<color-box />
 
 ### 中性色