refactor: use @nuxtjs/color-mode to manage ssr (#612)

plugins/color-mode.ts

@@ -0,0 +1,10 @@
+export default defineNuxtPlugin(() => {
+  const colorMode = useColorMode()
+  useHead({
+    meta: [{
+      id: 'theme-color',
+      name: 'theme-color',
+      content: () => colorMode.value === 'dark' ? '#111111' : '#ffffff',
+    }],
+  })
+})

plugins/setup-color-mode.ts

@@ -1,41 +0,0 @@
-import type { ColorMode } from '~/types'
-import { InjectionKeyColorMode } from '~/constants/symbols'
-import { COOKIE_KEY_COLOR_MODE, COOKIE_MAX_AGE } from '~/constants'
-
-export default defineNuxtPlugin((nuxt) => {
-  const cookieColorMode = useCookie<ColorMode | null>(COOKIE_KEY_COLOR_MODE, { maxAge: COOKIE_MAX_AGE })
-
-  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'),
-    }],
-  })
-})