From 54f2a61f1e9681503ed2ad22d8ce9d2563d32716 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Mon, 21 Oct 2024 10:17:19 +0800
Subject: [PATCH] :lipstick: https://github.com/siyuan-note/siyuan/issues/12844

---
 app/appearance/themes/daylight/theme.css   |  9 +++
 app/appearance/themes/midnight/theme.css   |  9 +++
 app/src/assets/scss/component/_switch.scss | 87 +++++++++++++---------
 3 files changed, 68 insertions(+), 37 deletions(-)

diff --git a/app/appearance/themes/daylight/theme.css b/app/appearance/themes/daylight/theme.css
index c6d609fe0..37b62af25 100644
--- a/app/appearance/themes/daylight/theme.css
+++ b/app/appearance/themes/daylight/theme.css
@@ -134,6 +134,15 @@
     /* 下拉菜单 */
     --b3-select-background: url("data:image/svg+xml;utf8,<svg fill='rgba(95, 99, 104, .68)' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>") no-repeat right 2px center var(--b3-theme-background);
 
+    /* switch */
+    --b3-switch-background: #e1e3e1;
+    --b3-switch-border: #747775;
+    --b3-switch-hover: rgba(31, 31, 31, 0.06);
+    --b3-switch-checked: #fff;
+    --b3-switch-checked-background: #0b57d0;
+    --b3-switch-checked-hover: #d3e3fd;
+    --b3-switch-checked-hover2: rgba(31, 31, 31, .06);
+
     /* 阴影 */
     --b3-point-shadow: 0 0 1px 0 rgba(0, 0, 0, .1), 0 0 2px 0 rgba(0, 0, 0, .2);
     --b3-dialog-shadow: 0 8px 24px rgba(0, 0, 0, .2);
diff --git a/app/appearance/themes/midnight/theme.css b/app/appearance/themes/midnight/theme.css
index ec66a5655..09a90d28f 100644
--- a/app/appearance/themes/midnight/theme.css
+++ b/app/appearance/themes/midnight/theme.css
@@ -133,6 +133,15 @@
     /* 下拉菜单 */
     --b3-select-background: url("data:image/svg+xml;utf8,<svg fill='rgba(154, 160, 166, .68)' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>") no-repeat right 2px center var(--b3-theme-background);
 
+    /* switch */
+    --b3-switch-background: #444746;
+    --b3-switch-border: #8e918f;
+    --b3-switch-hover: rgba(253, 252, 251, .10);
+    --b3-switch-checked: #0842a0;
+    --b3-switch-checked-background: #a8c7fa;
+    --b3-switch-checked-hover: #0842a0;
+    --b3-switch-checked-hover2: rgba( 253,252,251, .10);
+
     /* 阴影 */
     --b3-point-shadow: inset 0 .5px .5px .5px rgba(255, 255, 255, .09), 0 3px 6px rgba(0, 0, 0, .04), 0 0 0 0 transparent;
     --b3-dialog-shadow: 0 8px 24px #010409;
diff --git a/app/src/assets/scss/component/_switch.scss b/app/src/assets/scss/component/_switch.scss
index 453e74b04..277da213d 100644
--- a/app/src/assets/scss/component/_switch.scss
+++ b/app/src/assets/scss/component/_switch.scss
@@ -1,17 +1,16 @@
 .b3-switch {
   flex-shrink: 0;
   -webkit-appearance: none;
-  box-sizing: border-box;
-  width: 28px;
-  height: 12px;
-  border: 1px solid transparent;
+  width: 36px;
+  height: 20px;
+  border: 1px solid var(--b3-switch-border);
   border-radius: var(--b3-border-radius-b);
   margin: 0;
   outline: none;
   display: inline-block;
   position: relative;
   cursor: pointer;
-  background-color: var(--b3-theme-surface-lighter);
+  background-color: var(--b3-switch-background);
   overflow: inherit;
   user-select: none;
 
@@ -21,54 +20,68 @@
   }
 
   &--menu {
-   margin: 13px 6px 13px 0;
+    margin: 2px 2px 2px 0;
+    align-self: center;
   }
 
   &:after {
-    border: 1px solid var(--b3-theme-surface-lighter);
-    box-shadow: var(--b3-point-shadow);
-    box-sizing: border-box;
-    width: 16px;
-    height: 16px;
+    width: 12px;
+    height: 12px;
     border-radius: 50%;
     pointer-events: none;
     z-index: 1;
-    content: '';
-    background-color: #fff;
-    left: -4px;
-    top: -3px;
+    content: "";
+    background-color: var(--b3-switch-border);
     display: block;
+    left: 9px;
     position: absolute;
-    transition: transform .3s ease, opacity .2s;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    transition: left 80ms linear, background-color 80ms linear, width 80ms linear, height 80ms linear;
   }
 
   &:before {
-    content: '';
-    left: -14px;
-    right: initial;
-    top: -13px;
-    width: 36px;
-    height: 36px;
-    background-color: rgba(158, 158, 158, .12);
-    display: none;
-    border-radius: 24px;
+    content: "";
+    left: 9px;
     position: absolute;
-    transition: transform .3s ease, opacity .2s;
-    opacity: .54;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 24px;
+    height: 24px;
+    background-color: var(--b3-switch-hover);
+    display: none;
+    border-radius: 50%;
+    transition: background-color 80ms linear;
   }
 
   &:checked {
-    background-color: var(--b3-theme-primary-light);
+    background-color: var(--b3-switch-checked-background);
+    border-color: transparent;
 
     &:after {
-      background-color: var(--b3-theme-primary);
-      border-color: var(--b3-theme-primary);
+      background-color: var(--b3-switch-checked);
+      height: 16px;
+      width: 16px;
     }
 
     &:before,
     &:after {
-      transform: translateX(19px);
-      transition: transform .6s cubic-bezier(.2, .85, .32, 1.2), opacity .3s;
+      left: 25px;
+    }
+
+    &:hover:not(:disabled) {
+      &:after {
+        background-color: var(--b3-switch-checked-hover);
+      }
+
+      &:before {
+        background-color: var(--b3-switch-checked-hover2);
+      }
+    }
+
+    &:active:not(:disabled):after {
+      height: 18px;
+      width: 18px;
     }
   }
 
@@ -77,12 +90,12 @@
     cursor: not-allowed;
   }
 
-  &:hover:not(:disabled):before,
-  &:focus:not(:disabled):before {
-    display: inline-block;
+  &:active:not(:disabled):after {
+    height: 14px;
+    width: 14px;
   }
 
-  &:focus:not(:disabled):before {
-    background-color: var(--b3-theme-primary-lightest);
+  &:hover:not(:disabled):before {
+    display: inline-block;
   }
 }