diff --git a/app/appearance/themes/daylight/theme.css b/app/appearance/themes/daylight/theme.css
index 37b62af25..4b335676f 100644
--- a/app/appearance/themes/daylight/theme.css
+++ b/app/appearance/themes/daylight/theme.css
@@ -136,10 +136,10 @@
 
     /* switch */
     --b3-switch-background: #e1e3e1;
-    --b3-switch-border: #747775;
+    --b3-switch-border: #aeaeae;
     --b3-switch-hover: rgba(31, 31, 31, 0.06);
     --b3-switch-checked: #fff;
-    --b3-switch-checked-background: #0b57d0;
+    --b3-switch-checked-background: var(--b3-theme-primary);
     --b3-switch-checked-hover: #d3e3fd;
     --b3-switch-checked-hover2: rgba(31, 31, 31, .06);
 
diff --git a/app/appearance/themes/midnight/theme.css b/app/appearance/themes/midnight/theme.css
index 09a90d28f..769de9da3 100644
--- a/app/appearance/themes/midnight/theme.css
+++ b/app/appearance/themes/midnight/theme.css
@@ -137,9 +137,9 @@
     --b3-switch-background: #444746;
     --b3-switch-border: #8e918f;
     --b3-switch-hover: rgba(253, 252, 251, .10);
-    --b3-switch-checked: #0842a0;
+    --b3-switch-checked: var(--b3-theme-primary);
     --b3-switch-checked-background: #a8c7fa;
-    --b3-switch-checked-hover: #0842a0;
+    --b3-switch-checked-hover: var(--b3-theme-primary);
     --b3-switch-checked-hover2: rgba( 253,252,251, .10);
 
     /* 阴影 */
diff --git a/app/src/assets/scss/component/_switch.scss b/app/src/assets/scss/component/_switch.scss
index ed961669b..cb5c8323c 100644
--- a/app/src/assets/scss/component/_switch.scss
+++ b/app/src/assets/scss/component/_switch.scss
@@ -1,8 +1,8 @@
 .b3-switch {
   flex-shrink: 0;
   -webkit-appearance: none;
-  width: 36px;
-  height: 20px;
+  width: 26px;
+  height: 16px;
   border: 1px solid var(--b3-switch-border);
   border-radius: var(--b3-border-radius-b);
   margin: 0;
@@ -25,15 +25,15 @@
   }
 
   &:after {
-    width: 12px;
-    height: 12px;
+    width: 8px;
+    height: 8px;
     border-radius: 50%;
     pointer-events: none;
     z-index: 1;
     content: "";
     background-color: var(--b3-switch-border);
     display: block;
-    left: 9px;
+    left: 7px;
     position: absolute;
     top: 50%;
     transform: translate(-50%, -50%);
@@ -43,12 +43,12 @@
   &:before {
     z-index: 2;
     content: "";
-    left: 9px;
+    left: 7px;
     position: absolute;
     top: 50%;
     transform: translate(-50%, -50%);
-    width: 24px;
-    height: 24px;
+    width: 20px;
+    height: 20px;
     background-color: var(--b3-switch-hover);
     display: none;
     border-radius: 50%;
@@ -61,13 +61,13 @@
 
     &:after {
       background-color: var(--b3-switch-checked);
-      height: 16px;
-      width: 16px;
+      height: 12px;
+      width: 12px;
     }
 
     &:before,
     &:after {
-      left: 25px;
+      left: 17px;
     }
 
     &:hover:not(:disabled) {
@@ -81,8 +81,8 @@
     }
 
     &:active:not(:disabled):after {
-      height: 18px;
-      width: 18px;
+      height: 14px;
+      width: 14px;
     }
   }
 
@@ -92,8 +92,8 @@
   }
 
   &:active:not(:disabled):after {
-    height: 14px;
-    width: 14px;
+    height: 10px;
+    width: 10px;
   }
 
   &:hover:not(:disabled):before {