fix: rework setup to improve SSR compatibility

components/common/dropdown/Dropdown.vue

@@ -5,6 +5,7 @@ defineProps<{
 }>()
 
 const dropdown = $ref<any>()
+const colorMode = useColorModeRef()
 
 provide(dropdownContextKey, {
   hide: () => dropdown.hide(),
@@ -12,7 +13,7 @@ provide(dropdownContextKey, {
 </script>
 
 <template>
-  <VDropdown v-bind="$attrs" ref="dropdown" :class="{ dark: isDark }" :placement="placement || 'auto'">
+  <VDropdown v-bind="$attrs" ref="dropdown" :class="colorMode" :placement="placement || 'auto'">
     <slot />
     <template #popper="scope">
       <slot name="popper" v-bind="scope" />

components/main/MainContent.vue

@@ -12,7 +12,7 @@ defineProps<{
     >
       <div flex justify-between px5 py4>
         <div flex gap-3 items-center overflow-hidden>
-          <NuxtLink v-if="back" flex="~ gap1" items-center btn-text p-0 @click="$router.go(-1)">
+          <NuxtLink v-show="back" flex="~ gap1" items-center btn-text p-0 @click="$router.go(-1)">
             <div i-ri:arrow-left-line />
           </NuxtLink>
           <div truncate>

components/nav/NavBottomMoreMenu.vue

@@ -6,6 +6,7 @@ const emits = defineEmits<{
   (event: 'update:modelValue', value: boolean): void
 }>()
 const visible = useVModel(props, 'modelValue', emits, { passive: true })
+const colorMode = useColorModeRef()
 
 function changeShow() {
   visible.value = !visible.value
@@ -22,6 +23,10 @@ function clickEvent(mouse: MouseEvent) {
   }
 }
 
+function toggleDark() {
+  colorMode.value = colorMode.value === 'dark' ? 'light' : 'dark'
+}
+
 watch(visible, (val) => {
   if (val && typeof document !== 'undefined')
     document.addEventListener('click', clickEvent)
@@ -79,7 +84,7 @@ onBeforeUnmount(() => {
               @click="toggleDark()"
             >
               <span class="i-ri:sun-line dark:i-ri:moon-line flex-shrink-0 text-xl mr-4 !align-middle" />
-              {{ !isDark ? $t('menu.toggle_theme.dark') : $t('menu.toggle_theme.light') }}
+              {{ colorMode === 'light' ? $t('menu.toggle_theme.dark') : $t('menu.toggle_theme.light') }}
             </button>
             <NuxtLink
               flex flex-row items-center

components/nav/NavFooter.vue

@@ -5,6 +5,11 @@ const timeAgoOptions = useTimeAgoOptions()
 
 const buildTimeDate = new Date(buildInfo.time)
 const buildTimeAgo = useTimeAgo(buildTimeDate, timeAgoOptions)
+
+const colorMode = useColorModeRef()
+function toggleDark() {
+  colorMode.value = colorMode.value === 'dark' ? 'light' : 'dark'
+}
 </script>
 
 <template>

components/publish/PublishEmojiPicker.client.vue

@@ -9,12 +9,13 @@ const emit = defineEmits<{
 
 const el = $ref<HTMLElement>()
 let picker = $ref<Picker>()
+const colorMode = useColorModeRef()
 
 async function openEmojiPicker() {
   await updateCustomEmojis()
   if (picker) {
     picker.update({
-      theme: isDark.value ? 'dark' : 'light',
+      theme: colorMode.value,
       custom: customEmojisData.value,
     })
   }
@@ -28,7 +29,7 @@ async function openEmojiPicker() {
           ? emit('select', native)
           : emit('selectCustom', { src, alt, 'data-emoji-id': name })
       },
-      theme: isDark.value ? 'dark' : 'light',
+      theme: colorMode.value,
       custom: customEmojisData.value,
     })
   }

components/settings/SettingsColorMode.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
-function setDark(v: boolean) {
-  isDark.value = v
+import type { ColorMode } from '~/types'
+
+const colorMode = useColorModeRef()
+
+function setColorMode(mode: ColorMode) {
+  colorMode.value = mode
 }
 </script>
 
@@ -8,16 +12,16 @@ function setDark(v: boolean) {
   <div flex="~ gap4" w-full>
     <button
       btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base
-      :class="isDark ? 'pointer-events-none' : 'filter-saturate-0'"
-      @click="setDark(true)"
+      :class="colorMode === 'dark' ? 'pointer-events-none' : 'filter-saturate-0'"
+      @click="setColorMode('dark')"
     >
       <div i-ri:moon-line />
       Dark Mode
     </button>
     <button
       btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base
-      :class="!isDark ? 'pointer-events-none' : 'filter-saturate-0'"
-      @click="setDark(false)"
+      :class="colorMode === 'light' ? 'pointer-events-none' : 'filter-saturate-0'"
+      @click="setColorMode('light')"
     >
       <div i-ri:sun-line />
       Light Mode

components/settings/SettingsFontSize.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import type { FontSize } from '~/composables/fontSize'
+import type { FontSize } from '~/types'
 
 const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as FontSize[]
-const fontSize = getFontSize()
+const fontSize = useFontSizeRef()
 </script>
 
 <template>

components/user/UserSignIn.vue

@@ -121,13 +121,13 @@ onMounted(async () => {
           text-left z-10 shadow of-auto
         >
           <div
-            v-for="server, idx in filteredServers"
-            :key="server"
-            :value="server"
+            v-for="name, idx in filteredServers"
+            :key="name"
+            :value="name"
             px-2 py1 font-mono
             :class="autocompleteIndex === idx ? 'text-primary font-bold' : null"
           >
-            {{ server }}
+            {{ name }}
           </div>
         </div>
       </div>