From a0d4815e9b08ac60a65f487b8ff0fee1df39f0bb Mon Sep 17 00:00:00 2001
From: Makito <i@maki.to>
Date: Fri, 25 Jul 2025 02:38:01 +0900
Subject: [PATCH] fix(docs): mark toggles as client-only (#321)

* fix(docs): mark toggles as client-only

* chore(docs): lint
---
 docs/.vitepress/components/MotionToggle.vue | 26 +++++++++++----------
 docs/.vitepress/components/ThemeToggle.vue  | 26 +++++++++++----------
 2 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/docs/.vitepress/components/MotionToggle.vue b/docs/.vitepress/components/MotionToggle.vue
index 3a7d284b3..a1d128e8b 100644
--- a/docs/.vitepress/components/MotionToggle.vue
+++ b/docs/.vitepress/components/MotionToggle.vue
@@ -16,17 +16,19 @@ watchPostEffect(() => {
 </script>
 
 <template>
-  <SwitchRoot
-    id="motion-toggle"
-    v-model="shouldReduceMotion"
-    class="bg-muted border-muted-foreground/10 relative h-6 w-11 flex flex-shrink-0 border rounded-full"
-    :aria-label="switchTitle"
-  >
-    <SwitchThumb
-      class="text-muted-foreground bg-background border-muted my-auto h-5 w-5 flex translate-x-0.5 items-center justify-center border rounded-full text-xs will-change-transform data-[state=checked]:translate-x-5 !transition-transform"
+  <ClientOnly>
+    <SwitchRoot
+      id="motion-toggle"
+      v-model="shouldReduceMotion"
+      class="bg-muted border-muted-foreground/10 relative h-6 w-11 flex flex-shrink-0 border rounded-full"
+      :aria-label="switchTitle"
     >
-      <Icon v-if="shouldReduceMotion" icon="lucide:square-dashed-mouse-pointer" />
-      <Icon v-else icon="lucide:square-mouse-pointer" />
-    </SwitchThumb>
-  </SwitchRoot>
+      <SwitchThumb
+        class="bg-background text-muted-foreground border-muted my-auto h-5 w-5 flex translate-x-0.5 items-center justify-center border rounded-full text-xs will-change-transform data-[state=checked]:translate-x-5 !transition-transform"
+      >
+        <Icon v-if="shouldReduceMotion" icon="lucide:square-dashed-mouse-pointer" />
+        <Icon v-else icon="lucide:square-mouse-pointer" />
+      </SwitchThumb>
+    </SwitchRoot>
+  </ClientOnly>
 </template>
diff --git a/docs/.vitepress/components/ThemeToggle.vue b/docs/.vitepress/components/ThemeToggle.vue
index 71fdf3583..97ebef1dd 100644
--- a/docs/.vitepress/components/ThemeToggle.vue
+++ b/docs/.vitepress/components/ThemeToggle.vue
@@ -16,17 +16,19 @@ watchPostEffect(() => {
 </script>
 
 <template>
-  <SwitchRoot
-    id="theme-toggle"
-    v-model="isDark"
-    class="bg-muted border-muted-foreground/10 relative h-6 w-11 flex flex-shrink-0 border rounded-full"
-    :aria-label="switchTitle"
-  >
-    <SwitchThumb
-      class="text-muted-foreground border-muted bg-background my-auto h-5 w-5 flex translate-x-0.5 items-center justify-center border rounded-full text-xs will-change-transform data-[state=checked]:translate-x-5 !transition-transform"
+  <ClientOnly>
+    <SwitchRoot
+      id="theme-toggle"
+      v-model="isDark"
+      class="bg-muted border-muted-foreground/10 relative h-6 w-11 flex flex-shrink-0 border rounded-full"
+      :aria-label="switchTitle"
     >
-      <Icon v-if="isDark" icon="lucide:moon-star" />
-      <Icon v-else icon="lucide:sun" />
-    </SwitchThumb>
-  </SwitchRoot>
+      <SwitchThumb
+        class="text-muted-foreground border-muted bg-background my-auto h-5 w-5 flex translate-x-0.5 items-center justify-center border rounded-full text-xs will-change-transform data-[state=checked]:translate-x-5 !transition-transform"
+      >
+        <Icon v-if="isDark" icon="lucide:moon-star" />
+        <Icon v-else icon="lucide:sun" />
+      </SwitchThumb>
+    </SwitchRoot>
+  </ClientOnly>
 </template>