fix: hydration error

sfxcode · Aug 4, 2024 · 240a252 · 240a252
1 parent dc1351b
commit 240a252
Showing 1 changed file with 10 additions and 9 deletions.
diff --git a/app/components/app/AppColorMode.vue b/app/components/app/AppColorMode.vue
@@ -17,15 +17,16 @@ watchEffect(() => mode.value = state.value)
 
 <template>
   <div>
-    <Button @click="next()">
-      <i v-if="mode === 'dark'" i-carbon-moon inline-block align-middle class="align-middle" />
-      <i v-if="mode === 'light'" i-carbon-sun inline-block align-middle class="align-middle" />
-      <i v-if="mode === 'cafe'" i-carbon-cafe inline-block align-middle class="align-middle" />
-      <i v-if="mode === 'contrast'" i-carbon-contrast inline-block align-middle class="align-middle" />
-      <i v-if="mode === 'auto'" i-carbon-laptop inline-block align-middle class="align-middle" />
-
-      <span class="ml-2 capitalize">{{ mode }}</span>
-    </Button>
+    <client-only>
+      <Button @click="next()">
+        <i v-if="mode === 'dark'" i-carbon-moon inline-block align-middle class="align-middle" />
+        <i v-if="mode === 'light'" i-carbon-sun inline-block align-middle class="align-middle" />
+        <i v-if="mode === 'cafe'" i-carbon-cafe inline-block align-middle class="align-middle" />
+        <i v-if="mode === 'contrast'" i-carbon-contrast inline-block align-middle class="align-middle" />
+        <i v-if="mode === 'auto'" i-carbon-laptop inline-block align-middle class="align-middle" />
+        <span class="ml-2 capitalize">{{ mode }}</span>
+      </Button>
+    </client-only>
   </div>
 </template>