diff --git a/examples/components/theme-configurator/index.vue b/examples/components/theme-configurator/index.vue
index 46be047f3..04ed6f180 100644
--- a/examples/components/theme-configurator/index.vue
+++ b/examples/components/theme-configurator/index.vue
@@ -10,7 +10,6 @@
       @select="onSelectChange"
     ></action-panel>
     <main-panel
-      ref='configuratorMain'
       v-if="defaultConfig"
       :currentConfig="currentConfig"
       :defaultConfig="defaultConfig"
@@ -180,7 +179,6 @@ export default {
       bus.$emit(ACTION_COMPONECT_SELECT, val);
       this.selectedComponent = val;
       this.filterCurrentConfig();
-      this.$refs.configuratorMain.focus();
     }
   },
   watch: {
diff --git a/packages/theme-chalk/src/common/popup.scss b/packages/theme-chalk/src/common/popup.scss
index e1806c9d9..00030ba6c 100644
--- a/packages/theme-chalk/src/common/popup.scss
+++ b/packages/theme-chalk/src/common/popup.scss
@@ -1,3 +1,4 @@
+@import "./var.scss";
 @import "../mixins/mixins";
 
 .v-modal-enter {
@@ -30,8 +31,8 @@
   top: 0;
   width: 100%;
   height: 100%;
-  opacity: 0.5;
-  background: #000;
+  opacity: $--popup-modal-opacity;
+  background: $--popup-modal-background-color;
 }
 
 @include b(popup-parent) {
diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index 645739bfe..9f3760ccb 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -667,6 +667,13 @@ $--pagination-button-disabled-background-color: $--color-white !default;
 /// color||Color|0
 $--pagination-hover-color: $--color-primary !default;
 
+/* Popup
+-------------------------- */
+/// color||Color|0
+$--popup-modal-background-color: $--color-black !default;
+/// opacity||Other|1
+$--popup-modal-opacity: 0.5 !default;
+
 /* Popover
 -------------------------- */
 /// color||Color|0