feat(theme): support custom theme base on css variables @rex-zsd (#2049)

docs/markdown/theme.md

@@ -0,0 +1,116 @@
+# 定制主题
+
+### 背景知识
+
+由于小程序基于 [Shadow DOM](https://developers.google.com/web/fundamentals/web-components/shadowdom?hl=zh-cn) 来实现自定义组件，所以 Vant Weapp 使用 [Css 变量](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties) 来实现定制主题。链接中的内容可以帮助你对这两个概念有基本的认识，避免许多不必要的困扰。
+
+Css变量 的兼容性要求可以在 [这里](https://caniuse.com/#feat=css-variables) 查看。对于不支持 Css变量 的设备，定制主题将不会生效，不过不必担心，默认样式仍会生效。
+
+### 样式变量
+
+定制使用的 Css 变量 与 Less 变量 同名，下面是一些基本的样式变量，所有可用的颜色变量请参考 [配置文件](https://github.com/youzan/vant-weapp/blob/dev/src/style/var.less)。
+
+```less
+// Component Colors
+@text-color: #323233;
+@border-color: #ebedf0;
+@active-color: #f2f3f5;
+@background-color: #f8f8f8;
+@background-color-light: #fafafa;
+```
+
+## 定制方法
+
+### 定制单个组件的主题样式
+
+> 在 wxss 中为组件设置 Css 变量
+
+```html
+<van-button class="my-button">
+  默认按钮
+</van-button>
+```
+
+```less
+.my-button {
+  --button-border-radius: 10px;
+  --button-default-color: #f2f3f5;
+}
+```
+
+> 或通过 style 属性来设置 Css 变量，这使你能够轻松实现主题的动态切换
+
+```html
+<van-button style="{{ buttonStyle }}">
+  默认按钮
+</van-button>
+```
+
+```js
+Page({
+  data: {
+    buttonStyle: `
+      --button-border-radius: 10px;
+      --button-default-color: green;
+    `
+  },
+
+  onLoad() {
+    setTimeout(() => {
+      this.setData({
+        buttonStyle: `
+          --button-border-radius: 2px;
+          --button-default-color: pink;
+        `
+      });
+    }, 2000);
+  }
+});
+```
+
+### 定制多个组件的主题样式
+
+> 与单个组件的定制方式类似，只需用一个container节点包裹住需要定制的组件，并将 Css变量 设置在container节点上
+
+```html
+<view class="container">
+  <van-button bind:click="onClick">
+    默认按钮
+  </van-button>
+
+  <van-toast id="van-toast" />
+</view>
+```
+
+```js
+import Toast from 'path/to/vant-weapp/dist/toast/toast';
+
+Page({
+  onClick() {
+    Toast('我是提示文案，建议不超过十五字~');
+  }
+});
+```
+
+```less
+.container {
+  --button-border-radius: 10px;
+  --button-default-color: #f2f3f5;
+  --toast-max-width: 100px;
+  --toast-background-color: pink;
+}
+```
+
+### 定制全局主题样式
+
+> 在 app.wxss 中，写入 Css变量，即可对全局生效
+
+```less
+page {
+  --button-border-radius: 10px;
+  --button-default-color: #f2f3f5;
+  --toast-max-width: 100px;
+  --toast-background-color: pink;
+}
+```
+

docs/src/doc.config.js

@@ -51,6 +51,11 @@ export default {
             {
               path: '/common',
               title: '内置样式'
+            },
+            {
+              path: '/theme',
+              title: '定制主题',
+              md: true
             }
           ]
         }

packages/action-sheet/index.less

@@ -1,8 +1,9 @@
 @import '../common/style/var.less';
+@import '../common/style/theme.less';
 
 .van-action-sheet {
   max-height: 90% !important;
-  color: @text-color;
+  .theme(color, '@text-color');
 
   &__item,
   &__cancel {
@@ -10,10 +11,10 @@
     font-size: 16px;
     line-height: 50px;
     text-align: center;
-    background-color: @white;
+    .theme(background-color, '@white');
 
     &--hover {
-      background-color: @active-color;
+      .theme(background-color, '@active-color');
     }
   }
 
@@ -23,23 +24,23 @@
     &::before {
       display: block;
       height: 10px;
-      background-color: @background-color;
       content: ' ';
+      .theme(background-color, '@background-color');
     }
   }
 
   &__item--disabled {
-    color: @gray;
+    .theme(color, '@gray');
   }
 
   &__item--disabled&__item--hover {
-    background-color: @white;
+    .theme(background-color, '@white');
   }
 
   &__subname {
     margin-left: 5px;
-    color: @gray-darker;
     font-size: 12px;
+    .theme(color, '@gray-darker');
   }
 
   &__header {
@@ -54,8 +55,8 @@
     top: 0;
     right: 0;
     padding: 0 15px;
-    color: @gray-dark;
     font-size: 18px !important;
     line-height: inherit !important;
+    .theme(color, '@gray-dark');
   }
 }

packages/button/index.less

@@ -1,4 +1,5 @@
 @import '../common/style/var.less';
+@import '../common/style/theme.less';
 
 .van-button {
   position: relative;
@@ -10,7 +11,8 @@
   line-height: 42px;
   text-align: center;
   vertical-align: middle;
-  border-radius: @button-border-radius;
+  .theme(border-radius, '@button-border-radius');
+
   -webkit-appearance: none;
   -webkit-text-size-adjust: 100%;
 
@@ -20,13 +22,14 @@
     left: 50%;
     width: 100%;
     height: 100%;
-    background-color: @black;
     border: inherit;
-    border-color: @black;
     border-radius: inherit; /* inherit parent's border radius */
     transform: translate(-50%, -50%);
     opacity: 0;
     content: ' ';
+
+    .theme(background-color, '@black');
+    .theme(border-color, '@black');
   }
 
   // reset weapp default border
@@ -43,52 +46,52 @@
   }
 
   &--default {
-    color: @button-default-color;
+    .theme(color, '@button-default-color');
-    background-color: @button-default-background-color;
+    .theme(background-color, '@button-default-background-color');
-    border: 1px solid @button-default-border-color;
+    .theme(border, '1px solid @button-default-border-color');
   }
 
   &--primary {
-    color: @button-primary-color;
+    .theme(color, '@button-primary-color');
-    background-color: @button-primary-background-color;
+    .theme(background-color, '@button-primary-background-color');
-    border: 1px solid @button-primary-border-color;
+    .theme(border, '1px solid @button-primary-border-color');
   }
 
   &--info {
-    color: @button-info-color;
+    .theme(color, '@button-info-color');
-    background-color: @button-info-background-color;
+    .theme(background-color, '@button-info-background-color');
-    border: 1px solid @button-info-border-color;
+    .theme(border, '1px solid @button-info-border-color');
   }
 
   &--danger {
-    color: @button-danger-color;
+    .theme(color, '@button-danger-color');
-    background-color: @button-danger-background-color;
+    .theme(background-color, '@button-danger-background-color');
-    border: 1px solid @button-danger-border-color;
+    .theme(border, '1px solid @button-danger-border-color');
   }
 
   &--warning {
-    color: @button-warning-color;
+    .theme(color, '@button-warning-color');
-    background-color: @button-warning-background-color;
+    .theme(background-color, '@button-warning-background-color');
-    border: 1px solid @button-warning-border-color;
+    .theme(border, '1px solid @button-warning-border-color');
   }
 
   &--plain {
-    background-color: @white;
+    .theme(background-color, '@white');
 
     &.van-button--primary {
-      color: @button-primary-background-color;
+      .theme(color, '@button-primary-background-color');
     }
 
     &.van-button--info {
-      color: @button-info-background-color;
+      .theme(color, '@button-info-background-color');
     }
 
     &.van-button--danger {
-      color: @button-danger-background-color;
+      .theme(color, '@button-danger-background-color');
     }
 
     &.van-button--warning {
-      color: @button-warning-background-color;
+      .theme(color, '@button-warning-background-color');
     }
   }
 
@@ -130,7 +133,7 @@
   }
 
   &--round {
-    border-radius: @button-round-border-radius;
+    .theme(border-radius, '@button-round-border-radius');
   }
 
   &--square {
@@ -170,11 +173,11 @@
     &::after {
       border-color: inherit;
       border-width: 1px;
-      border-radius: @button-border-radius * 2;
+      .theme(border-radius, 'calc(@button-border-radius * 2)');
     }
 
     &.van-button--round::after {
-      border-radius: @button-round-border-radius;
+      .theme(border-radius, '@button-round-border-radius');
     }
 
     &.van-button--square::after {

packages/card/index.less

@@ -1,12 +1,13 @@
 @import '../common/style/var.less';
+@import '../common/style/theme.less';
 
 .van-card {
   position: relative;
   box-sizing: border-box;
   padding: 5px 15px;
-  color: @text-color;
   font-size: 12px;
-  background-color: @background-color-light;
+  .theme(color, '@text-color');
+  .theme(background-color, '@background-color-light');
 
   &__header {
     display: flex;
@@ -51,8 +52,8 @@
   }
 
   &__desc {
-    color: @gray-darker;
     line-height: 20px;
+    .theme(color, '@gray-darker');
   }
 
   &__bottom {
@@ -61,16 +62,16 @@
 
   &__price {
     display: inline-block;
-    color: @red;
     font-weight: bold;
+    .theme(color, '@red');
   }
 
   &__origin-price {
     display: inline-block;
     margin-left: 5px;
-    color: @gray-darker;
     font-size: 10px;
     text-decoration: line-through;
+    .theme(color, '@gray-darker');
   }
 
   &__num {

packages/cell-group/index.less

@@ -1,10 +1,11 @@
 @import '../common/style/var.less';
+@import '../common/style/theme.less';
 
 .van-cell-group {
   &__title {
     padding: 15px 15px 5px;
-    color: @gray-dark;
     font-size: 14px;
     line-height: 16px;
+    .theme(color, '@gray-dark');
   }
 }

packages/cell/index.less

@@ -1,4 +1,5 @@
 @import '../common/style/var.less';
+@import '../common/style/theme.less';
 @import '../common/style/mixins/hairline.less';
 
 .van-cell {
@@ -7,10 +8,10 @@
   box-sizing: border-box;
   width: 100%;
   padding: 10px 15px;
-  color: @text-color;
   font-size: 14px;
   line-height: 24px;
-  background-color: @white;
+  .theme(color, '@text-color');
+  .theme(background-color, '@white');
 
   &::after {
     .hairline-bottom(@border-color, 15px);
@@ -21,21 +22,21 @@
   }
 
   &-group {
-    background-color: @white;
+    .theme(background-color, '@white');
   }
 
   &__label {
     margin-top: 3px;
-    color: @gray-dark;
     font-size: 12px;
     line-height: 18px;
+    .theme(color, '@gray-dark');
   }
 
   &__value {
     overflow: hidden;
-    color: @gray-dark;
     text-align: right;
     vertical-align: middle;
+    .theme(color, '@gray-dark');
   }
 
   &__title,
@@ -61,7 +62,7 @@
 
   &__right-icon-wrap {
     margin-left: 5px;
-    color: @gray-dark;
+    .theme(color, '@gray-dark');
   }
 
   &__left-icon {
@@ -74,7 +75,7 @@
   }
 
   &--clickable&--hover {
-    background-color: @active-color;
+    .theme(background-color, '@active-color');
   }
 
   &--required {
@@ -83,9 +84,9 @@
     &::before {
       position: absolute;
       left: 7px;
-      color: @red;
       font-size: 14px;
       content: '*';
+      .theme(color, '@red');
     }
   }
 

packages/checkbox/index.less

@@ -1,4 +1,5 @@
 @import '../common/style/var.less';
+@import '../common/style/theme.less';
 
 .van-checkbox {
   display: flex;
@@ -7,7 +8,7 @@
 
   &__icon-wrap,
   &__label {
-    line-height: @checkbox-size;
+    .theme(line-height, '@checkbox-size');
   }
 
   &__icon-wrap {
@@ -20,44 +21,46 @@
     width: 1em;
     height: 1em;
     color: transparent;
-    font-size: @checkbox-size;
     text-align: center;
-    border: 1px solid @checkbox-border-color;
-    transition-duration: @checkbox-transition-duration;
     transition-property: color, border-color, background-color;
 
+    .theme(font-size, '@checkbox-size');
+    .theme(border, '1px solid @checkbox-border-color');
+    .theme(transition-duration, '@checkbox-transition-duration');
+
     &--round {
       border-radius: 100%;
     }
 
     &--checked {
-      color: @white;
+      .theme(color, '@white');
-      background-color: @checkbox-checked-icon-color;
+      .theme(background-color, '@checkbox-checked-icon-color');
-      border-color: @checkbox-checked-icon-color;
+      .theme(border-color, '@checkbox-checked-icon-color');
     }
 
     &--disabled {
-      background-color: @checkbox-disabled-background-color;
+      .theme(background-color, '@checkbox-disabled-background-color');
-      border-color: @checkbox-disabled-icon-color;
+      .theme(border-color, '@checkbox-disabled-icon-color');
     }
 
     &--disabled&--checked {
-      color: @checkbox-disabled-icon-color;
+      .theme(color, '@checkbox-disabled-icon-color');
     }
   }
 
   &__label {
-    margin-left: @checkbox-label-margin;
-    color: @checkbox-label-color;
     word-break: break-all;
 
+    .theme(margin-left, '@checkbox-label-margin');
+    .theme(color, '@checkbox-label-color');
+
     &--left {
       float: left;
-      margin: 0 @checkbox-label-margin 0 0;
+      .theme(margin, '0 @checkbox-label-margin 0 0');
     }
 
     &--disabled {
-      color: @checkbox-disabled-label-color;
+      .theme(color, '@checkbox-disabled-label-color');
     }
 
     &:empty {

packages/circle/index.less

@@ -1,4 +1,5 @@
 @import '../common/style/var.less';
+@import '../common/style/theme.less';
 
 .van-circle {
   position: relative;
@@ -10,7 +11,8 @@
     top: 50%;
     left: 0;
     width: 100%;
-    color: @circle-text-color;
     transform: translateY(-50%);
+
+    .theme(color, '@circle-text-color');
   }
 }

packages/collapse-item/index.less

@@ -1,10 +1,11 @@
 @import '../common/style/var.less';
+@import '../common/style/theme.less';
 
 .van-collapse-item {
   &__title {
     .van-cell__right-icon {
       transform: rotate(90deg);
-      transition: transform @collapse-item-transition-duration;
+      .theme(transition, 'transform @collapse-item-transition-duration');
     }
 
     &--expanded {
@@ -16,11 +17,11 @@
     &--disabled {
       .van-cell,
       .van-cell__right-icon {
-        color: @collapse-item-title-disabled-color !important;
+        .theme(color, '@collapse-item-title-disabled-color') !important;
       }
 
       .van-cell--hover {
-        background-color: @white !important;
+        .theme(background-color, '@white') !important;
       }
     }
   }
@@ -34,10 +35,10 @@
   }
 
   &__content {
-    padding: @collapse-item-content-padding;
+    .theme(padding, '@collapse-item-content-padding');
-    color: @collapse-item-content-text-color;
+    .theme(color, '@collapse-item-content-text-color');
-    font-size: @collapse-item-content-font-size;
+    .theme(font-size, '@collapse-item-content-font-size');
-    line-height: @collapse-item-content-line-height;
+    .theme(line-height, '@collapse-item-content-line-height');
-    background-color: @collapse-item-content-background-color;
+    .theme(background-color, '@collapse-item-content-background-color');
   }
 }

packages/common/style/theme.less

@@ -0,0 +1,6 @@
+@import (reference) './var.less';
+
+.theme(@property, @imp) {
+  @{property}: e(replace(@imp, '@([^() ]+)', '@{$1}', 'ig'));
+  @{property}: e(replace(@imp, '@([^() ]+)', 'var(--$1, @{$1})', 'ig'));
+}

packages/dialog/index.less

@@ -1,12 +1,13 @@
 @import '../common/style/var.less';
+@import '../common/style/theme.less';
 
 .van-dialog {
   top: 45% !important;
   width: 85%;
   overflow: hidden;
   font-size: 16px;
-  background-color: @white;
   border-radius: 4px;
+  .theme(background-color, '@white');
 
   &__header {
     padding-top: 25px;
@@ -30,7 +31,7 @@
 
     &--has-title {
       padding-top: 12px;
-      color: @gray-darker;
+      .theme(color, '@gray-darker');
     }
 
     &--left {
@@ -56,7 +57,7 @@
   }
 
   &__confirm {
-    color: @blue !important;
+    .theme(color, '@blue') !important;
   }
 
   &-bounce-enter {

packages/field/README.md

@@ -215,7 +215,7 @@ Page({
 | bind:change | 输入内容时触发 | value: 当前输入值 |
 | bind:confirm | 点击完成按钮时触发 | value: 当前输入值 |
 | bind:click-icon | 点击尾部图标时触发 | - |
-| bind:focus | 输入框聚焦时触发 | event.detail.value: 当前输入值; <br>event.detail.height: 键盘高度(在基础库 1.9.90 起支持) |
+| bind:focus | 输入框聚焦时触发 | event.detail.value: 当前输入值; <br>event.detail.height: 键盘高度 |
 | bind:blur | 输入框失焦时触发 | event.detail.value: 当前输入值; <br>event.detail.cursor: 游标位置(如果 `type` 不为 `textarea`，值为 `0`) |
 | bind:clear | 点击清空控件时触发 | - |
 

packages/field/index.less

@@ -1,4 +1,5 @@
 @import '../common/style/var.less';
+@import '../common/style/theme.less';
 
 .van-field {
   &__body {
@@ -24,12 +25,12 @@
     min-height: 24px;
     margin: 0;
     padding: 0;
-    color: @text-color;
     line-height: inherit;
     text-align: left;
     background-color: transparent;
     border: 0;
     resize: none;
+    .theme(color, '@text-color');
 
     &--textarea {
       height: 18px;
@@ -37,13 +38,13 @@
     }
 
     &--error {
-      color: @red;
+      .theme(color, '@red');
     }
 
     &--disabled {
-      color: @gray-dark;
       background-color: transparent;
       opacity: 1;
+      .theme(color, '@gray-dark');
     }
 
     &--center {
@@ -60,11 +61,11 @@
     top: 0;
     right: 0;
     left: 0;
-    color: @gray-dark;
     pointer-events: none;
+    .theme(color, '@gray-dark');
 
     &--error {
-      color: @red;
+      .theme(color, '@red');
     }
   }
 
@@ -89,11 +90,11 @@
   }
 
   &__clear-root {
-    color: @gray;
+    .theme(color, '@gray');
   }
 
   &__icon-container {
-    color: @gray-dark;
+    .theme(color, '@gray-dark');
 
     &:empty {
       display: none;
@@ -109,9 +110,9 @@
   }
 
   &__error-message {
-    color: @red;
     font-size: 12px;
     text-align: left;
+    .theme(color, '@red');
 
     &--center {
       text-align: center;

packages/goods-action-icon/index.less

@@ -1,4 +1,5 @@
 @import '../common/style/var.less';
+@import '../common/style/theme.less';
 
 .van-goods-action-icon {
   width: 50px !important;
@@ -9,9 +10,9 @@
     flex-direction: column;
     justify-content: center;
     height: 100%;
-    color: @gray-darker;
     font-size: 10px;
     line-height: 1;
+    .theme(color, '@gray-darker');
   }
 
   &__icon {

packages/goods-action/index.less

@@ -1,4 +1,5 @@
 @import '../common/style/var.less';
+@import '../common/style/theme.less';
 
 .van-goods-action {
   position: fixed;
@@ -6,9 +7,9 @@
   bottom: 0;
   left: 0;
   display: flex;
-  background-color: @white;
+  .theme(background-color, '@white');
 
   &--safe {
-    padding-bottom: @safe-area-inset-bottom;
+    .theme(padding-bottom, '@safe-area-inset-bottom');
   }
 }

packages/grid-item/index.less

@@ -1,4 +1,5 @@
 @import '../common/style/var.less';
+@import '../common/style/theme.less';
 
 .van-grid-item {
   position: relative;
@@ -14,8 +15,8 @@
     flex-direction: column;
     box-sizing: border-box;
     height: 100%;
-    padding: @grid-item-content-padding;
+    .theme(padding, '@grid-item-content-padding');
-    background-color: @grid-item-content-background-color;
+    .theme(background-color, '@grid-item-content-background-color');
 
     &::after {
       z-index: 1;
@@ -41,17 +42,17 @@
     }
 
     &--clickable:active {
-      background-color: @grid-item-content-active-color;
+      .theme(background-color, '@grid-item-content-active-color');
     }
   }
 
   &__icon {
-    font-size: @grid-item-icon-size;
+    .theme(font-size, '@grid-item-icon-size');
   }
 
   &__text {
-    color: @grid-item-text-color;
-    font-size: @grid-item-text-font-size;
     word-break: break-all;
+    .theme(color, '@grid-item-text-color');
+    .theme(font-size, '@grid-item-text-font-size');
   }
 }

packages/info/index.less

@@ -1,22 +1,24 @@
 @import '../common/style/var.less';
+@import '../common/style/theme.less';
 
 .van-info {
   position: absolute;
-  top: -@info-size / 2;
   right: 0;
   box-sizing: border-box;
-  min-width: @info-size;
-  padding: @info-padding;
-  color: @info-color;
-  font-weight: @info-font-weight;
-  font-size: @info-font-size;
-  font-family: @info-font-family;
-  line-height: @info-size - @info-border-width * 2;
   white-space: nowrap;
   text-align: center;
-  background-color: @info-background-color;
-  border: @info-border-width solid @white;
-  border-radius: @info-size;
   transform: translateX(50%);
   transform-origin: 100%;
+
+  .theme(top, 'calc(@info-size / -2)');
+  .theme(min-width, '@info-size');
+  .theme(padding, '@info-padding');
+  .theme(color, '@info-color');
+  .theme(font-weight, '@info-font-weight');
+  .theme(font-size, '@info-font-size');
+  .theme(font-family, '@info-font-family');
+  .theme(line-height, 'calc(@info-size - @info-border-width * 2)');
+  .theme(background-color, '@info-background-color');
+  .theme(border, '@info-border-width solid @white');
+  .theme(border-radius, '@info-size');
 }

packages/nav-bar/index.less

@@ -1,28 +1,29 @@
 @import '../common/style/var.less';
+@import '../common/style/theme.less';
 
 .van-nav-bar {
   position: relative;
-  height: @nav-bar-height;
-  line-height: @nav-bar-height;
   text-align: center;
-  background-color: @white;
   user-select: none;
+  .theme(height, '@nav-bar-height');
+  .theme(line-height, '@nav-bar-height');
+  .theme(background-color, '@white');
 
   &__text {
     display: inline-block;
     margin: 0 -15px;
     padding: 0 15px;
-    color: @blue;
     vertical-align: middle;
+    .theme(color, '@blue');
 
     &--hover {
-      background-color: @active-color;
+      .theme(background-color, '@active-color');
     }
   }
 
   &__arrow {
-    color: @blue;
     vertical-align: middle;
+    .theme(color, '@blue');
 
     + .van-nav-bar__text {
       margin-left: -20px;

packages/notify/index.less

@@ -1,28 +1,30 @@
 @import '../common/style/var.less';
+@import '../common/style/theme.less';
 
 .van-notify {
   position: fixed;
   top: 0;
   box-sizing: border-box;
   width: 100%;
-  padding: @notify-padding;
-  font-size: @notify-font-size;
-  line-height: @notify-line-height;
   text-align: center;
+  word-break: break-all;
+  .theme(padding, '@notify-padding');
+  .theme(font-size, '@notify-font-size');
+  .theme(line-height, '@notify-line-height');
 
   &--primary {
-    background-color: @notify-primary-background-color;
+    .theme(background-color, "@notify-primary-background-color");
   }
 
   &--success {
-    background-color: @notify-success-background-color;
+    .theme(background-color, "@notify-success-background-color");
   }
 
   &--danger {
-    background-color: @notify-danger-background-color;
+    .theme(background-color, "@notify-danger-background-color");
   }
 
   &--warning {
-    background-color: @notify-warning-background-color;
+    .theme(background-color, "@notify-warning-background-color");
   }
 }

packages/overlay/index.less

@@ -1,4 +1,5 @@
 @import '../common/style/var.less';
+@import '../common/style/theme.less';
 
 .van-overlay {
   position: fixed;
@@ -6,5 +7,5 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: @overlay-background-color;
+  .theme(background-color, '@overlay-background-color');
 }

packages/panel/index.less

@@ -1,10 +1,11 @@
 @import '../common/style/var.less';
+@import '../common/style/theme.less';
 
 .van-panel {
-  background: @white;
+  .theme(background, '@white');
 
   &__header-value {
-    color: @red;
+    .theme(color, '@red');
   }
 
   &__footer {

packages/picker-column/index.less

@@ -1,17 +1,18 @@
 @import '../common/style/var';
+@import '../common/style/theme';
 
 .van-picker-column {
   overflow: hidden;
-  color: @gray-dark;
   font-size: 16px;
   text-align: center;
+  .theme(color, '@gray-dark');
 
   &__item {
     padding: 0 5px;
 
     &--selected {
-      color: @text-color;
       font-weight: 500;
+      .theme(color, '@text-color');
     }
 
     &--disabled {

packages/picker/index.less

@@ -1,11 +1,12 @@
 @import '../common/style/var';
+@import '../common/style/theme.less';
 
 .van-picker {
   position: relative;
   overflow: hidden;
   -webkit-text-size-adjust: 100%; /* avoid iOS text size adjust */
-  background-color: @white;
   user-select: none;
+  .theme(background-color, '@white');
 
   &__toolbar {
     display: flex;
@@ -17,11 +18,11 @@
   &__cancel,
   &__confirm {
     padding: 0 15px;
-    color: @blue;
     font-size: 14px;
+    .theme(color, '@blue');
 
     &--hover {
-      background-color: @active-color;
+      .theme(background-color, '@active-color');
     }
   }
 

packages/popup/index.less

@@ -1,4 +1,5 @@
 @import '../common/style/var.less';
+@import '../common/style/theme.less';
 
 .van-popup {
   position: fixed;
@@ -7,16 +8,16 @@
   box-sizing: border-box;
   max-height: 100%;
   overflow-y: auto;
-  background-color: @white;
   transition-timing-function: ease;
   animation: ease both;
   -webkit-overflow-scrolling: touch;
+  .theme(background-color, '@white');
 
   &--center {
     transform: translate3d(-50%, -50%, 0);
 
     &.van-popup--round {
-      border-radius: @popup-round-border-radius;
+      .theme(border-radius, '@popup-round-border-radius');
     }
   }
 
@@ -29,7 +30,10 @@
     transform: translate3d(-50%, 0, 0);
 
     &.van-popup--round {
-      border-radius: 0 0 @popup-round-border-radius @popup-round-border-radius;
+      .theme(
+        border-radius,
+        '0 0 @popup-round-border-radius @popup-round-border-radius'
+      );
     }
   }
 
@@ -41,7 +45,10 @@
     transform: translate3d(0, -50%, 0);
 
     &.van-popup--round {
-      border-radius: @popup-round-border-radius 0 0 @popup-round-border-radius;
+      .theme(
+        border-radius,
+        '@popup-round-border-radius 0 0 @popup-round-border-radius'
+      );
     }
   }
 
@@ -54,7 +61,10 @@
     transform: translate3d(-50%, 0, 0);
 
     &.van-popup--round {
-      border-radius: @popup-round-border-radius @popup-round-border-radius 0 0;
+      .theme(
+        border-radius,
+        '@popup-round-border-radius @popup-round-border-radius 0 0'
+      );
     }
   }
 
@@ -66,24 +76,27 @@
     transform: translate3d(0, -50%, 0);
 
     &.van-popup--round {
-      border-radius: 0 @popup-round-border-radius @popup-round-border-radius 0;
+      .theme(
+        border-radius,
+        '0 @popup-round-border-radius @popup-round-border-radius 0'
+      );
     }
   }
 
   &--bottom&--safe {
-    padding-bottom: @safe-area-inset-bottom;
+    .theme(padding-bottom, '@safe-area-inset-bottom');
   }
 
   &__close-icon {
     position: absolute;
-    top: @popup-close-icon-margin;
+    .theme(top, '@popup-close-icon-margin');
-    right: @popup-close-icon-margin;
+    .theme(right, '@popup-close-icon-margin');
-    z-index: @popup-close-icon-z-index;
+    .theme(z-index, '@popup-close-icon-z-index');
-    color: @popup-close-icon-color;
+    .theme(color, '@popup-close-icon-color');
-    font-size: @popup-close-icon-size;
+    .theme(font-size, '@popup-close-icon-size');
 
     &:active {
-      opacity: .6;
+      opacity: 0.6;
     }
   }
 }

packages/progress/index.less

@@ -1,10 +1,11 @@
 @import '../common/style/var.less';
+@import '../common/style/theme.less';
 
 .van-progress {
   position: relative;
   height: 4px;
-  background: @gray-light;
   border-radius: 4px;
+  .theme(background, '@gray-light');
 
   &__portion {
     position: absolute;
@@ -24,8 +25,8 @@
     line-height: 1.6;
     text-align: center;
     word-break: keep-all;
-    background-color: @gray-light;
     border-radius: 1em;
     transform: translateY(-50%);
+    .theme(background-color, '@gray-light');
   }
 }

packages/radio/index.less

@@ -1,4 +1,5 @@
 @import '../common/style/var.less';
+@import '../common/style/theme.less';
 
 .van-radio {
   display: flex;
@@ -17,42 +18,42 @@
     height: 1em;
     color: transparent;
     text-align: center;
-    border: 1px solid @radio-border-color;
-    transition-duration: @radio-transition-duration;
     transition-property: color, border-color, background-color;
+    .theme(border, '1px solid @radio-border-color');
+    .theme(transition-duration, '@radio-transition-duration');
 
     &--round {
       border-radius: 100%;
     }
 
     &--checked {
-      color: @white;
+      .theme(color, '@white');
-      background-color: @radio-checked-icon-color;
+      .theme(background-color, '@radio-checked-icon-color');
-      border-color: @radio-checked-icon-color;
+      .theme(border-color, '@radio-checked-icon-color');
     }
 
     &--disabled {
-      background-color: @radio-disabled-background-color;
+      .theme(background-color, '@radio-disabled-background-color');
-      border-color: @radio-disabled-icon-color;
+      .theme(border-color, '@radio-disabled-icon-color');
     }
 
     &--disabled&--checked {
-      color: @radio-disabled-icon-color;
+      .theme(color, '@radio-disabled-icon-color');
     }
   }
 
   &__label {
-    margin-left: @radio-label-margin;
-    color: @radio-label-color;
     word-break: break-all;
+    .theme(margin-left, '@radio-label-margin');
+    .theme(color, '@radio-label-color');
 
     &--left {
       float: left;
-      margin: 0 @radio-label-margin 0 0;
+      .theme(margin, '0 @radio-label-margin 0 0');
     }
 
     &--disabled {
-      color: @radio-disabled-label-color;
+      .theme(color, '@radio-disabled-label-color');
     }
 
     &:empty {

packages/rate/index.less

@@ -1,4 +1,5 @@
 @import '../common/style/var.less';
+@import '../common/style/theme.less';
 
 .van-rate {
   display: inline-block;
@@ -7,7 +8,7 @@
   &__item {
     position: relative;
     display: inline-block;
-    padding: 0 @rate-horizontal-padding;
+    .theme(padding, '0 @rate-horizontal-padding');
   }
 
   &__icon {
@@ -17,9 +18,9 @@
     &--half {
       position: absolute;
       top: 0;
-      left: @rate-horizontal-padding;
       width: 0.5em;
       overflow: hidden;
+      .theme(left, '@rate-horizontal-padding');
     }
   }
 }

packages/search/index.less

@@ -1,4 +1,5 @@
 @import '../common/style/var.less';
+@import '../common/style/theme.less';
 
 .van-search {
   display: flex;
@@ -10,8 +11,8 @@
     display: flex;
     flex: 1;
     padding-left: 10px;
-    background-color: @search-background-color;
     border-radius: 2px;
+    .theme(background-color, '@search-background-color');
 
     &--round {
       border-radius: 17px;
@@ -20,16 +21,16 @@
 
   &__label {
     padding: 0 5px;
-    color: @text-color;
     font-size: 14px;
     line-height: 34px;
+    .theme(color, '@text-color');
   }
 
   &__field {
     flex: 1;
 
     &__left-icon {
-      color: @gray-dark;
+      .theme(color, '@gray-dark');
     }
   }
 
@@ -39,12 +40,12 @@
 
   &__action {
     padding: 0 10px;
-    color: @text-color;
     font-size: 14px;
     line-height: 34px;
+    .theme(color, '@text-color');
 
     &--hover {
-      background-color: @active-color;
+      .theme(background-color, '@active-color');
     }
   }
 }

packages/sidebar-item/index.less

@@ -1,20 +1,21 @@
 @import '../common/style/var.less';
+@import '../common/style/theme.less';
 
 .van-sidebar-item {
   display: block;
   box-sizing: border-box;
   padding: 20px 12px 20px 9px;
   overflow: hidden;
-  color: @gray-darker;
   font-size: 14px;
   line-height: 1.4;
   word-break: break-all;
-  background-color: @background-color;
   border-left: 3px solid transparent;
   user-select: none;
+  .theme(color, '@gray-darker');
+  .theme(background-color, '@background-color');
 
   &--hover {
-    background-color: @active-color;
+    .theme(background-color, '@active-color');
   }
 
   &::after {
@@ -22,9 +23,9 @@
   }
 
   &--active {
-    color: @text-color;
     font-weight: bold;
-    border-color: @red;
+    .theme(color, '@text-color');
+    .theme(border-color, '@red');
 
     &::after {
       border-right-width: 1px;
@@ -33,7 +34,7 @@
 
   &--active,
   &--active&--hover {
-    background-color: @white;
+    .theme(background-color, '@white');
   }
 
   &__text {

packages/slider/index.less

@@ -1,22 +1,23 @@
 @import '../common/style/var.less';
+@import '../common/style/theme.less';
 
 .van-slider {
   position: relative;
-  background-color: @gray-light;
   border-radius: 999px;
+  .theme(background-color, '@gray-light');
 
   &__bar {
     position: relative;
-    background-color: @blue;
     border-radius: inherit;
+    .theme(background-color, '@blue');
   }
 
   &__button {
     width: 20px;
     height: 20px;
-    background-color: @white;
     border-radius: 50%;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+    .theme(background-color, '@white');
 
     &-wrapper {
       position: absolute;
@@ -37,6 +38,6 @@
   }
 
   &--disabled {
-    opacity: .3;
+    opacity: 0.3;
   }
 }

packages/stepper/index.less

@@ -1,4 +1,5 @@
 @import '../common/style/var.less';
+@import '../common/style/theme.less';
 
 .van-stepper {
   font-size: 0;
@@ -13,8 +14,8 @@
     margin: 1px;
     padding: 5px;
     vertical-align: middle;
-    background-color: @stepper-background-color;
     border: 0;
+    .theme(background-color, '@stepper-background-color');
 
     &::before {
       width: 9px;
@@ -34,30 +35,30 @@
       bottom: 0;
       left: 0;
       margin: auto;
-      background-color: @text-color;
       content: '';
+      .theme(background-color, '@text-color');
     }
 
     &--hover {
-      background-color: @stepper-active-color;
+      .theme(background-color, '@stepper-active-color');
     }
 
     &--disabled {
-      background-color: @stepper-button-disabled-color;
+      .theme(background-color, '@stepper-button-disabled-color');
 
       &::before,
       &::after {
-        background-color: @gray;
+        .theme(background-color, '@gray');
       }
     }
 
     &--disabled&--hover {
-      background-color: @stepper-button-disabled-color;
+      .theme(background-color, '@stepper-button-disabled-color');
     }
   }
 
   &__minus {
-    border-radius: @stepper-border-radius 0 0 @stepper-border-radius;
+    .theme(border-radius, '@stepper-border-radius 0 0 @stepper-border-radius');
 
     &::after {
       display: none;
@@ -65,32 +66,32 @@
   }
 
   &__plus {
-    border-radius: 0 @stepper-border-radius @stepper-border-radius 0;
+    .theme(border-radius, '0 @stepper-border-radius @stepper-border-radius 0');
   }
 
   &__input {
     display: inline-block;
     box-sizing: border-box;
+    width: 32px;
+    height: 28px;
     // 覆盖 common style 中 input 的 min-height: 1.4rem;
     // 避免 button-size 对 input 设置的 height 不生效
     min-height: 0;
-    width: 32px;
-    height: 28px;
     margin: 1px;
     padding: 1px;
-    color: @text-color;
     font-size: 14px;
     text-align: center;
     vertical-align: middle;
-    background-color: @stepper-background-color;
     border: 0;
     border-width: 1px 0;
     border-radius: 0;
     -webkit-appearance: none;
+    .theme(color, '@text-color');
+    .theme(background-color, '@stepper-background-color');
 
     &--disabled {
-      color: @gray;
+      .theme(color, '@gray');
-      background-color: @stepper-input-disabled-color;
+      .theme(background-color, '@stepper-input-disabled-color');
     }
   }
-}
+}

packages/steps/index.less

@@ -1,8 +1,9 @@
 @import '../common/style/var.less';
+@import '../common/style/theme.less';
 
 .van-steps {
   overflow: hidden;
-  background-color: @white;
+  .theme(background-color, '@white');
 
   &--horizontal {
     padding: 10px;
@@ -26,18 +27,18 @@
 .van-step {
   position: relative;
   flex: 1;
-  color: @gray-dark;
   font-size: 14px;
+  .theme(color, '@gray-dark');
 
   &--finish {
-    color: @text-color;
+    .theme(color, '@text-color');
   }
 
   &__circle {
     width: 5px;
     height: 5px;
-    background-color: @gray-dark;
     border-radius: 50%;
+    .theme(background-color, '@gray-dark');
   }
 
   &--horizontal {
@@ -76,8 +77,8 @@
       bottom: 6px;
       z-index: 1;
       padding: 0 8px;
-      background-color: @white;
       transform: translate3d(-50%, 50%, 0);
+      .theme(background-color, '@white');
     }
 
     .van-step__title {
@@ -92,12 +93,12 @@
       bottom: 6px;
       left: 0;
       height: 1px;
-      background-color: @border-color;
       transform: translate3d(0, 50%, 0);
+      .theme(background-color, '@border-color');
     }
 
     &.van-step--process {
-      color: @text-color;
+      .theme(color, '@text-color');
 
       .van-step__active {
         display: block;
@@ -128,8 +129,8 @@
         z-index: 1;
         width: 1px;
         height: 20px;
-        background-color: @white;
         content: '';
+        .theme(background-color, '@white');
       }
     }
 
@@ -152,8 +153,8 @@
       z-index: 1;
       width: 1px;
       height: 100%;
-      background-color: @border-color;
       transform: translate3d(-50%, 0, 0);
+      .theme(background-color, '@border-color');
     }
   }
 }

packages/submit-bar/index.less

@@ -1,19 +1,20 @@
 @import '../common/style/var.less';
+@import '../common/style/theme.less';
 
 .van-submit-bar {
   position: fixed;
   bottom: 0;
   left: 0;
-  z-index: @submit-bar-z-index;
   width: 100%;
   user-select: none;
+  .theme(z-index, '@submit-bar-z-index');
 
   &__tip {
-    padding: @submit-bar-tip-padding;
+    .theme(padding, '@submit-bar-tip-padding');
-    color: @submit-bar-tip-color;
+    .theme(color, '@submit-bar-tip-color');
-    font-size: @submit-bar-tip-font-size;
+    .theme(font-size, '@submit-bar-tip-font-size');
-    line-height: @submit-bar-tip-line-height;
+    .theme(line-height, '@submit-bar-tip-line-height');
-    background-color: @submit-bar-tip-background-color;
+    .theme(background-color, '@submit-bar-tip-background-color');
 
     &:empty {
       display: none;
@@ -36,30 +37,30 @@
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    height: @submit-bar-height;
+    .theme(height, '@submit-bar-height');
-    font-size: @submit-bar-text-font-size;
+    .theme(font-size, '@submit-bar-text-font-size');
-    background-color: @submit-bar-background-color;
+    .theme(background-color, '@submit-bar-background-color');
 
     &--safe {
-      padding-bottom: @safe-area-inset-bottom;
+      .theme(padding-bottom, '@safe-area-inset-bottom');
     }
   }
 
   &__text {
     flex: 1;
     padding-right: 12px;
-    color: @submit-bar-text-color;
     font-weight: 500;
     text-align: right;
+    .theme(color, '@submit-bar-text-color');
   }
 
   &__price {
-    color: @submit-bar-price-color;
+    .theme(color, '@submit-bar-price-color');
-    font-size: @submit-bar-price-font-size;
+    .theme(font-size, '@submit-bar-price-font-size');
   }
 
   &__currency {
-    font-size: @submit-bar-currency-font-size;
+    .theme(font-size, '@submit-bar-currency-font-size');
   }
 
   &__suffix-label {
@@ -67,6 +68,6 @@
   }
 
   &__button {
-    width: @submit-bar-button-width;
+    .theme(width, '@submit-bar-button-width');
   }
 }

packages/switch/index.less

@@ -1,27 +1,28 @@
 @import '../common/style/var.less';
+@import '../common/style/theme.less';
 
 .van-switch {
   position: relative;
   display: inline-block;
   box-sizing: content-box;
-  width: @switch-width;
+  .theme(width, '@switch-width');
-  height: @switch-height;
+  .theme(height, '@switch-height');
-  background-color: @switch-background-color;
+  .theme(background-color, '@switch-background-color');
-  border: @switch-border;
+  .theme(border, '@switch-border');
-  border-radius: @switch-node-size;
+  .theme(border-radius, '@switch-node-size');
-  transition: background-color @switch-transition-duration;
+  .theme(transition, 'background-color @switch-transition-duration');
 
   &__node {
     position: absolute;
     top: 0;
     left: 0;
-    z-index: @switch-node-z-index;
-    width: @switch-node-size;
-    height: @switch-node-size;
-    background-color: @switch-node-background-color;
     border-radius: 100%;
-    box-shadow: @switch-node-box-shadow;
+    .theme(z-index, '@switch-node-z-index');
-    transition: transform @switch-transition-duration;
+    .theme(width, '@switch-node-size');
+    .theme(height, '@switch-node-size');
+    .theme(background-color, '@switch-node-background-color');
+    .theme(box-shadow, '@switch-node-box-shadow');
+    .theme(transition, 'transform @switch-transition-duration');
   }
 
   &__loading {
@@ -31,14 +32,14 @@
   }
 
   &--on {
-    background-color: @switch-on-background-color;
+    .theme(background-color, '@switch-on-background-color');
 
     .van-switch__node {
-      transform: translateX(@switch-width - @switch-node-size);
+      .theme(transform, 'translateX(calc(@switch-width - @switch-node-size))');
     }
   }
 
   &--disabled {
-    opacity: @switch-disabled-opacity;
+    .theme(opacity, '@switch-disabled-opacity');
   }
 }

packages/tabbar-item/index.less

@@ -1,4 +1,5 @@
 @import '../common/style/var.less';
+@import '../common/style/theme.less';
 
 :host {
   flex: 1;
@@ -10,9 +11,9 @@
   align-items: center;
   justify-content: center;
   height: 100%;
-  color: @gray-darker;
   font-size: 12px;
   line-height: 1;
+  .theme(color, '@gray-darker');
 
   &__icon {
     position: relative;
@@ -26,9 +27,9 @@
         right: -8px;
         width: 8px;
         height: 8px;
-        background-color: @red;
         border-radius: 100%;
         content: ' ';
+        .theme(background-color, '@red');
       }
     }
 
@@ -40,6 +41,6 @@
   }
 
   &--active {
-    color: @blue;
+    .theme(color, '@blue');
   }
 }

packages/tabbar/index.less

@@ -1,10 +1,11 @@
 @import '../common/style/var.less';
+@import '../common/style/theme.less';
 
 .van-tabbar {
   display: flex;
   width: 100%;
   height: 50px;
-  background-color: @white;
+  .theme(background-color, '@white');
 
   &--fixed {
     position: fixed;
@@ -13,6 +14,6 @@
   }
 
   &--safe {
-    padding-bottom: @safe-area-inset-bottom;
+    .theme(padding-bottom, '@safe-area-inset-bottom');
   }
 }

packages/tabs/index.less

@@ -1,4 +1,5 @@
 @import '../common/style/var.less';
+@import '../common/style/theme.less';
 
 @tabs-line-height: 44px;
 @tabs-card-height: 30px;
@@ -13,7 +14,7 @@
     right: 0;
     left: 0;
     display: flex;
-    background-color: @white;
+    .theme(background-color, '@white');
 
     &--page-top {
       position: fixed;
@@ -32,8 +33,8 @@
   }
 
   &__scroll--card {
-    border: 1px solid @red;
     border-radius: 2px;
+    .theme(border, '1px solid @red');
   }
 
   &__nav {
@@ -46,20 +47,20 @@
     }
 
     &--card {
-      height: @tabs-card-height;
+      .theme(height, '@tabs-card-height');
 
       .van-tab {
-        color: @red;
+        .theme(color, '@red');
-        line-height: @tabs-card-height;
+        .theme(line-height, '@tabs-card-height');
-        border-right: 1px solid @red;
+        .theme(border-right, '1px solid @red');
 
         &:last-child {
           border-right: none;
         }
 
         &.van-tab--active {
-          color: @white;
+          .theme(color, '@white');
-          background-color: @red;
+          .theme(background-color, '@red');
         }
       }
     }
@@ -71,24 +72,24 @@
     left: 0;
     z-index: 1;
     height: 3px;
-    background-color: @red;
     border-radius: 3px;
+    .theme(background-color, '@red');
   }
 
   &--line {
-    padding-top: @tabs-line-height;
+    .theme(padding-top, '@tabs-line-height');
 
     .van-tabs__wrap {
-      height: @tabs-line-height;
+      .theme(height, '@tabs-line-height');
     }
   }
 
   &--card {
     margin: 0 15px;
-    padding-top: @tabs-card-height;
+    .theme(padding-top, '@tabs-card-height');
 
     .van-tabs__wrap {
-      height: @tabs-card-height;
+      .theme(height, '@tabs-card-height');
     }
   }
 
@@ -107,19 +108,19 @@
   box-sizing: border-box;
   min-width: 0; /* hack for flex ellipsis */
   padding: 0 5px;
-  color: @gray-darker;
   font-size: 14px;
-  line-height: @tabs-line-height;
   text-align: center;
   cursor: pointer;
+  .theme(color, '@gray-darker');
+  .theme(line-height, '@tabs-line-height');
 
   &--active {
-    color: @text-color;
     font-weight: 500;
+    .theme(color, '@text-color');
   }
 
   &--disabled {
-    color: @gray;
+    .theme(color, '@gray');
   }
 
   &__title {
@@ -129,9 +130,9 @@
         width: 8px;
         height: 8px;
         vertical-align: middle;
-        background-color: @red;
         border-radius: 100%;
         content: '';
+        .theme(background-color, '@red');
       }
     }
 

packages/tag/index.less

@@ -1,65 +1,66 @@
 @import '../common/style/var.less';
+@import '../common/style/theme.less';
 
 .van-tag {
   display: inline-block;
-  padding: .2em .5em;
+  padding: 0.2em 0.5em;
-  color: @white;
   font-size: 10px;
   line-height: normal;
-  border-radius: .2em;
+  border-radius: 0.2em;
+  .theme(color, '@white');
 
   &::after {
     border-color: currentColor;
-    border-radius: .4em;
+    border-radius: 0.4em;
   }
 
   &--default {
-    background-color: @tag-default-color;
+    .theme(background-color, '@tag-default-color');
 
     &.van-tag--plain {
-      color: @tag-default-color;
+      .theme(color, '@tag-default-color');
     }
   }
 
   &--danger {
-    background-color: @tag-dander-color;
+    .theme(background-color, '@tag-dander-color');
 
     &.van-tag--plain {
-      color: @tag-dander-color;
+      .theme(color, '@tag-dander-color');
     }
   }
 
   &--primary {
-    background-color: @tag-primary-color;
+    .theme(background-color, '@tag-primary-color');
 
     &.van-tag--plain {
-      color: @tag-primary-color;
+      .theme(color, '@tag-primary-color');
     }
   }
 
   &--success {
-    background-color: @tag-success-color;
+    .theme(background-color, '@tag-success-color');
 
     &.van-tag--plain {
-      color: @tag-success-color;
+      .theme(color, '@tag-success-color');
     }
   }
 
   &--warning {
-    background-color: @tag-warning-color;
+    .theme(background-color, '@tag-warning-color');
 
     &.van-tag--plain {
-      color: @tag-warning-color;
+      .theme(color, '@tag-warning-color');
     }
   }
 
   &--plain {
-    background-color: @tag-plain-background-color;
+    .theme(background-color, '@tag-plain-background-color');
   }
 
   &--mark {
-    padding-right: .6em;
+    padding-right: 0.6em;
-    border-radius: 0 .8em .8em 0;
+    border-radius: 0 0.8em 0.8em 0;
 
     &::after {
       border-radius: 0 1.6em 1.6em 0;
@@ -67,7 +68,7 @@
   }
 
   &--round {
-    border-radius: .8em;
+    border-radius: 0.8em;
 
     &::after {
       border-radius: 1.6em;

packages/toast/index.less

@@ -1,4 +1,5 @@
 @import '../common/style/var.less';
+@import '../common/style/theme.less';
 
 .van-toast {
   display: flex;
@@ -6,15 +7,15 @@
   align-items: center;
   justify-content: center;
   box-sizing: content-box;
-  color: @toast-text-color;
+  .theme(color, '@toast-text-color');
-  font-size: @toast-font-size;
+  .theme(font-size, '@toast-font-size');
-  line-height: @toast-line-height;
+  .theme(line-height, '@toast-line-height');
 
   // allow newline charactor
   white-space: pre-wrap;
   word-break: break-all;
-  background-color: @toast-background-color;
+  .theme(background-color, '@toast-background-color');
-  border-radius: @toast-border-radius;
+  .theme(border-radius, '@toast-border-radius');
 
   &__container {
     position: fixed;
@@ -22,22 +23,22 @@
     left: 50%;
     // hack for avoid max-width when use left & fixed
     width: fit-content;
-    max-width: @toast-max-width;
     transform: translate(-50%, -50%);
+    .theme(max-width, '@toast-max-width');
   }
 
   &--text {
-    min-width: @toast-text-min-width;
+    .theme(min-width, '@toast-text-min-width');
-    padding: @toast-text-padding;
+    .theme(padding, '@toast-text-padding');
   }
 
   &--icon {
-    width: @toast-default-width;
+    .theme(width, '@toast-default-width');
-    min-height: @toast-default-min-height;
+    .theme(min-height, '@toast-default-min-height');
-    padding: @toast-default-padding;
+    .theme(padding, '@toast-default-padding');
 
     .van-toast__icon {
-      font-size: @toast-icon-size;
+      .theme(font-size, '@toast-icon-size');
     }
 
     .van-toast__text {

packages/tree-select/index.less

@@ -1,4 +1,5 @@
 @import '../common/style/var.less';
+@import '../common/style/theme.less';
 
 .van-tree-select {
   position: relative;
@@ -12,7 +13,7 @@
     left: 0;
     width: 35%;
     min-width: 120px;
-    background-color: @background-color-light;
+    .theme(background-color, '@background-color-light');
   }
 
   &__nitem {
@@ -26,17 +27,17 @@
       bottom: 0;
       left: 0;
       width: 3.6px;
-      background-color: @red;
       content: '';
+      .theme(background-color, '@red');
     }
 
     &--active {
       font-weight: bold;
-      background-color: @white;
+      .theme(background-color, '@white');
     }
 
     &--disabled {
-      color: @gray-dark;
+      .theme(color, '@gray-dark');
     }
   }
 
@@ -45,7 +46,7 @@
     width: 65%;
     margin-left: 35%;
     padding-left: 15px;
-    background-color: @white;
+    .theme(background-color, '@white');
   }
 
   &__item {
@@ -54,11 +55,11 @@
     line-height: 44px;
 
     &--active {
-      color: @red;
+      .theme(color, '@red');
     }
 
     &--disabled {
-      color: @gray-dark;
+      .theme(color, '@gray-dark');
     }
   }