fix: rework setup to improve SSR compatibility

plugins/setup-color-mode.ts

@@ -0,0 +1,41 @@
+import type { ColorMode } from '~/types'
+import { InjectionKeyColorMode } from '~/constants/symbols'
+import { COOKIE_KEY_COLOR_MODE } from '~/constants'
+
+export default defineNuxtPlugin((nuxt) => {
+  const cookieColorMode = useCookie<ColorMode | null>(COOKIE_KEY_COLOR_MODE, { default: () => null })
+
+  const preferColorMode = process.server ? computed(() => 'light') : usePreferredColorScheme()
+  const colorMode = computed<ColorMode>({
+    get() {
+      return cookieColorMode.value || preferColorMode.value as ColorMode
+    },
+    set(value) {
+      cookieColorMode.value = value
+    },
+  })
+
+  nuxt.vueApp.provide(InjectionKeyColorMode, colorMode)
+
+  if (process.server) {
+    useHead({
+      htmlAttrs: {
+        class: colorMode,
+      },
+    })
+  }
+  else {
+    watchEffect(() => {
+      document.documentElement.classList.toggle('dark', colorMode.value === 'dark')
+      document.documentElement.classList.toggle('light', colorMode.value === 'light')
+    })
+  }
+
+  useHead({
+    meta: [{
+      id: 'theme-color',
+      name: 'theme-color',
+      content: computed(() => colorMode.value === 'dark' ? '#111111' : '#ffffff'),
+    }],
+  })
+})

plugins/setup-font-size.ts

@@ -0,0 +1,25 @@
+import type { FontSize } from '~/types'
+import { InjectionKeyFontSize } from '~/constants/symbols'
+import { COOKIE_KEY_FONT_SIZE } from '~/constants'
+import { fontSizeMap } from '~/constants/options'
+
+export default defineNuxtPlugin((nuxt) => {
+  const DEFAULT = 'md'
+  const cookieFontSize = useCookie<FontSize>(COOKIE_KEY_FONT_SIZE, { default: () => DEFAULT })
+  nuxt.vueApp.provide(InjectionKeyFontSize, cookieFontSize)
+
+  if (!process.server) {
+    watchEffect(() => {
+      document.documentElement.style.setProperty('--font-size', fontSizeMap[cookieFontSize.value || DEFAULT])
+    })
+  }
+  else {
+    useHead({
+      style: [
+        {
+          innerHTML: `:root { --font-size: ${fontSizeMap[cookieFontSize.value || DEFAULT]}; }`,
+        },
+      ],
+    })
+  }
+})