fix: hydration error

Author: sfxcode

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>