diff --git a/packages/common/style/var.less b/packages/common/style/var.less
index 0f57a86d..94679b8e 100644
--- a/packages/common/style/var.less
+++ b/packages/common/style/var.less
@@ -228,6 +228,7 @@
 @panel-footer-padding: @padding-xs @padding-md;
 
 // Popup
+@popup-background-color: @white;
 @popup-round-border-radius: 20px;
 @popup-close-icon-size: 18px;
 @popup-close-icon-color: @gray-dark;
diff --git a/packages/popup/index.less b/packages/popup/index.less
index 8d7a027f..8fd62a2d 100644
--- a/packages/popup/index.less
+++ b/packages/popup/index.less
@@ -9,7 +9,7 @@
   transition-timing-function: ease;
   animation: ease both;
   -webkit-overflow-scrolling: touch;
-  .theme(background-color, '@white');
+  .theme(background-color, '@popup-background-color');
 
   &--center {
     top: 50%;
@@ -27,10 +27,7 @@
     width: 100%;
 
     &.van-popup--round {
-      .theme(
-        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');
     }
   }
 
@@ -40,10 +37,7 @@
     transform: translate3d(0, -50%, 0);
 
     &.van-popup--round {
-      .theme(
-        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');
     }
   }
 
@@ -53,10 +47,7 @@
     width: 100%;
 
     &.van-popup--round {
-      .theme(
-        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,10 +57,7 @@
     transform: translate3d(0, -50%, 0);
 
     &.van-popup--round {
-      .theme(
-        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');
     }
   }