🎨

src/client/components/debobigego/switch.vue

@@ -13,7 +13,7 @@
 			@keydown.enter="toggle"
 		>
 		<span class="button" v-tooltip="checked ? $ts.itsOn : $ts.itsOff">
-			<span></span>
+			<span class="handle"></span>
 		</span>
 		<span class="label">
 			<span><slot></slot></span>
@@ -64,23 +64,6 @@ export default defineComponent({
 			user-select: none;
 		}
 
-		&.disabled {
-			opacity: 0.6;
-			cursor: not-allowed;
-		}
-
-		&.checked {
-			> .button {
-				background-color: var(--X10);
-				border-color: var(--X10);
-
-				> * {
-					background-color: var(--accent);
-					transform: translateX(14px);
-				}
-			}
-		}
-
 		> input {
 			position: absolute;
 			width: 0;
@@ -93,25 +76,26 @@ export default defineComponent({
 			position: relative;
 			display: inline-block;
 			flex-shrink: 0;
-			margin: 3px 0 0 0;
+			margin: 0;
 			width: 34px;
-			height: 14px;
-			background: var(--X6);
+			height: 22px;
+			background: var(--switchBg);
 			outline: none;
-			border-radius: 14px;
+			border-radius: 999px;
 			transition: all 0.3s;
 			cursor: pointer;
 
-			> * {
+			> .handle {
 				position: absolute;
-				top: -3px;
-				left: 0;
+				top: 0;
+				left: 3px;
+				bottom: 0;
+				margin: auto 0;
 				border-radius: 100%;
 				transition: background-color 0.3s, transform 0.3s;
-				width: 20px;
-				height: 20px;
+				width: 16px;
+				height: 16px;
 				background-color: #fff;
-				box-shadow: 0 2px 1px -1px rgba(#000, 0.2), 0 1px 1px 0 rgba(#000, 0.14), 0 1px 3px 0 rgba(#000, 0.12);
 			}
 		}
 
@@ -127,6 +111,21 @@ export default defineComponent({
 				transition: inherit;
 			}
 		}
+
+		&.disabled {
+			opacity: 0.6;
+			cursor: not-allowed;
+		}
+
+		&.checked {
+			> .button {
+				background-color: var(--accent);
+
+				> .handle {
+					transform: translateX(12px);
+				}
+			}
+		}
 	}
 }
 </style>

src/client/themes/_dark.json5

@@ -51,6 +51,7 @@
 		infoFg: '#fff',
 		infoWarnBg: '#42321c',
 		infoWarnFg: '#ffbd3e',
+		switchBg: 'rgba(255, 255, 255, 0.15)',
 		cwBg: '#687390',
 		cwFg: '#393f4f',
 		cwHoverBg: '#707b97',

src/client/themes/_light.json5

@@ -51,6 +51,7 @@
 		infoFg: '#72818a',
 		infoWarnBg: '#fff0db',
 		infoWarnFg: '#8f6e31',
+		switchBg: 'rgba(0, 0, 0, 0.15)',
 		cwBg: '#b1b9c1',
 		cwFg: '#fff',
 		cwHoverBg: '#bbc4ce',