fix: rework setup to improve SSR compatibility

composables/command.ts

@@ -206,6 +206,7 @@ export const provideGlobalCommands = () => {
   const { locales } = useI18n() as { locales: ComputedRef<LocaleObject[]> }
   const users = useUsers()
   const masto = useMasto()
+  const colorMode = useColorModeRef()
 
   useCommand({
     scope: 'Actions',
@@ -225,10 +226,10 @@ export const provideGlobalCommands = () => {
     scope: 'Preferences',
 
     name: () => t('command.toggle_dark_mode'),
-    icon: () => isDark.value ? 'i-ri:sun-line' : 'i-ri:moon-line',
+    icon: () => colorMode.value === 'light' ? 'i-ri:sun-line' : 'i-ri:moon-line',
 
     onActivate() {
-      toggleDark()
+      colorMode.value = colorMode.value === 'light' ? 'dark' : 'light'
     },
   })
 

composables/dark.ts

@@ -1,2 +0,0 @@
-export const isDark = useDark()
-export const toggleDark = useToggle(isDark)

composables/fontSize.ts

@@ -1,39 +0,0 @@
-import type { InjectionKey, Ref } from 'vue'
-import { STORAGE_KEY_FONT_SIZE } from '~/constants'
-
-const InjectionKeyFontSize = Symbol('fontSize') as InjectionKey<Ref<FontSize>>
-const DEFAULT = 'md'
-
-export type FontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-
-export function getFontSize() {
-  return inject(InjectionKeyFontSize)!
-}
-
-const fontSizeMap = {
-  xs: '13px',
-  sm: '14px',
-  md: '15px',
-  lg: '16px',
-  xl: '17px',
-}
-
-export async function setupFontSize() {
-  const fontSize = useCookie<FontSize>(STORAGE_KEY_FONT_SIZE, { default: () => DEFAULT })
-  getCurrentInstance()?.appContext.app.provide(InjectionKeyFontSize, fontSize)
-
-  if (!process.server) {
-    watchEffect(() => {
-      document.documentElement.style.setProperty('--font-size', fontSizeMap[fontSize.value || DEFAULT])
-    })
-  }
-  else {
-    useHead({
-      style: [
-        {
-          innerHTML: `:root { --font-size: ${fontSizeMap[fontSize.value || DEFAULT]}; }`,
-        },
-      ],
-    })
-  }
-}

composables/injections.ts

@@ -0,0 +1,14 @@
+import { InjectionKeyColorMode, InjectionKeyFontSize } from '~/constants/symbols'
+
+export function useFontSizeRef() {
+  return inject(InjectionKeyFontSize)!
+}
+
+export function useColorModeRef() {
+  return inject(InjectionKeyColorMode)!
+}
+
+export function toggleColorMode() {
+  const colorMode = useColorModeRef()
+  colorMode.value = colorMode.value === 'light' ? 'dark' : 'light'
+}

composables/pwa/index.ts

@@ -1,15 +1,10 @@
 import { useRegisterSW } from 'virtual:pwa-register/vue'
 
-export const usePWA = () => {
+export function usePWA() {
   const online = useOnline()
 
-  useHead({
-    meta: [{ id: 'theme-color', name: 'theme-color', content: computed(() => isDark.value ? '#111111' : '#ffffff') }],
-  })
-
   const {
-    needRefresh,
-    updateServiceWorker,
+    needRefresh, updateServiceWorker,
   } = useRegisterSW({
     immediate: true,
     onRegisteredSW(swUrl, r) {

composables/setups.ts

@@ -45,9 +45,6 @@ export function setupPageHeader() {
     titleTemplate: title => `${title ? `${title} | ` : ''}${APP_NAME}${isDev ? ' (dev)' : isPreview ? ' (preview)' : ''}`,
     link,
   })
-
-  // eslint-disable-next-line no-unused-expressions
-  isDark.value
 }
 
 export async function setupI18n() {

composables/shiki.ts

@@ -44,7 +44,7 @@ export function useHightlighter(lang: Lang) {
 }
 
 export function useShikiTheme() {
-  return isDark.value ? 'vitesse-dark' : 'vitesse-light'
+  return useColorModeRef().value ? 'vitesse-dark' : 'vitesse-light'
 }
 
 export function highlightCode(code: string, lang: Lang) {