From 32d15f0bfef9184fa71ec500f232fbb12eeaf33e Mon Sep 17 00:00:00 2001
From: Takusea <takusea826@gmail.com>
Date: Sun, 6 Oct 2024 16:38:44 +0900
Subject: [PATCH] =?UTF-8?q?=E3=81=A4=E3=81=BE=E3=81=BF=E3=81=AB=E3=83=81?=
 =?UTF-8?q?=E3=82=A7=E3=83=83=E3=82=AF=E3=83=9E=E3=83=BC=E3=82=AF=E3=82=92?=
 =?UTF-8?q?=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Base/BaseSwitch.vue | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/Base/BaseSwitch.vue b/src/components/Base/BaseSwitch.vue
index 34a8504ad0..b475a40b20 100644
--- a/src/components/Base/BaseSwitch.vue
+++ b/src/components/Base/BaseSwitch.vue
@@ -2,7 +2,9 @@
   <div class="root">
     <div class="label">{{ checked ? checkedLabel : uncheckedLabel }}</div>
     <SwitchRoot :id v-model:checked="checked" :disabled class="SwitchRoot">
-      <SwitchThumb class="SwitchThumb" />
+      <SwitchThumb class="SwitchThumb">
+        <QIcon class="check" name="check" />
+      </SwitchThumb>
     </SwitchRoot>
   </div>
 </template>
@@ -52,18 +54,23 @@ const checked = defineModel<boolean>("checked", { required: true });
 }
 
 .SwitchThumb {
-  display: block;
+  display: grid;
+  place-items: center;
+  color: transparent;
   width: 20px;
   height: 20px;
   background-color: white;
   border-radius: 50%;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-  transition: transform vars.$transition-duration;
+  transition:
+    transform vars.$transition-duration,
+    color vars.$transition-duration;
   will-change: transform;
 }
 
 .SwitchThumb[data-state="checked"] {
   transform: translateX(16px);
+  color: colors.$primary;
 }
 
 .label {