diff --git a/vue-admin-wonderful-next/src/App.vue b/vue-admin-wonderful-next/src/App.vue
index 0b7198a..9de6b91 100644
--- a/vue-admin-wonderful-next/src/App.vue
+++ b/vue-admin-wonderful-next/src/App.vue
@@ -56,14 +56,14 @@ export default {
     });
     function colorChange() {
       document.documentElement.style.setProperty(
-        "--primary-color",
+        "--color-primary",
         state.color
       );
     }
     function onSwitchChange1() {
-      document.documentElement.style.setProperty(
-        "--color-grayscale",
-        state.value1 ? 1 : 0
+      document.body.setAttribute(
+        "style",
+        `filter:grayscale(${state.value1 ? 1 : 0})`
       );
     }
     return {
diff --git a/vue-admin-wonderful-next/src/style/base.scss b/vue-admin-wonderful-next/src/style/base.scss
index c66d575..82728be 100644
--- a/vue-admin-wonderful-next/src/style/base.scss
+++ b/vue-admin-wonderful-next/src/style/base.scss
@@ -1,11 +1,11 @@
 @import 'common/transition.scss';
 @import 'common/var.scss';
 
-// .el-button--primary {
-//   color: #ffffff;
-//   background-color: var(--primary-color);
-//   border-color: var(--primary-color);
-// }
+.el-button--primary {
+  color: #ffffff;
+  background-color: setColor(primary);
+  border-color: setColor(primary);
+}
 
 // .el-button--primary:hover {
 //   color: #ffffff;
@@ -13,21 +13,21 @@
 //   border-color: var(--primary--color-hover);
 // }
 
-// .el-switch.is-checked .el-switch__core {
-//   border-color: var(--primary-color) !important;
-//   background-color: var(--primary-color) !important;
-// }
+.el-switch.is-checked .el-switch__core {
+  border-color: setColor(primary) !important;
+  background-color: setColor(primary) !important;
+}
 
-// .el-tabs__item:hover,
-// .el-tabs__item.is-active {
-//   color: var(--primary-color) !important;
-// }
-// .el-tabs__active-bar {
-//   background-color: var(--primary-color) !important;
-// }
+.el-tabs__item:hover,
+.el-tabs__item.is-active {
+  color: setColor(primary) !important;
+}
+.el-tabs__active-bar {
+  background-color: setColor(primary) !important;
+}
 
-// .el-menu-item.is-active,
-// .el-submenu.is-active .el-submenu__title {
-//   color: var(--primary-color) !important;
-//   border-bottom-color: var(--primary-color) !important;
-// }
+.el-menu-item.is-active,
+.el-submenu.is-active .el-submenu__title {
+  color: setColor(primary) !important;
+  border-bottom-color: setColor(primary) !important;
+}
diff --git a/vue-admin-wonderful-next/src/style/common/var.scss b/vue-admin-wonderful-next/src/style/common/var.scss
index 4f6f0aa..738b1e5 100644
--- a/vue-admin-wonderful-next/src/style/common/var.scss
+++ b/vue-admin-wonderful-next/src/style/common/var.scss
@@ -8,10 +8,6 @@ $root: (
   info: #909399,
 );
 
-:root {
-  --grayscales: 0;
-}
-
 /* 循环赋值给:root
 ------------------------------- */
 :root {
@@ -65,5 +61,4 @@ body {
   width: 100%;
   height: 100%;
   border: 1px solid red;
-  filter: grayscale(red);
 }