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

composables/command.ts

@@ -241,7 +241,7 @@ export const provideGlobalCommands = () => {
   const { locales } = useI18n() as { locales: ComputedRef<LocaleObject[]> }
   const users = useUsers()
   const masto = useMasto()
-  const colorMode = useColorModeRef()
+  const colorMode = useColorMode()
 
   useCommand({
     scope: 'Actions',
@@ -264,7 +264,7 @@ export const provideGlobalCommands = () => {
     icon: () => colorMode.value === 'light' ? 'i-ri:sun-line' : 'i-ri:moon-line',
 
     onActivate() {
-      colorMode.value = colorMode.value === 'light' ? 'dark' : 'light'
+      colorMode.preference = colorMode.value === 'light' ? 'dark' : 'light'
     },
   })
 

composables/injections.ts

@@ -1,14 +1,5 @@
-import { InjectionKeyColorMode, InjectionKeyFontSize } from '~/constants/symbols'
+import { 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/shiki.ts

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