From 240a252fc85e184d46213723a8458ab3d202fb57 Mon Sep 17 00:00:00 2001
From: sfxcode <tom@sfxcode.com>
Date: Sun, 4 Aug 2024 17:59:55 +0200
Subject: [PATCH] fix: hydration error

---
 app/components/app/AppColorMode.vue | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/app/components/app/AppColorMode.vue b/app/components/app/AppColorMode.vue
index 7e528b1..094cdc9 100644
--- 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>