chore(vue): stub useColorMode

src/runtime/vue/stubs.ts

@@ -3,12 +3,31 @@ import type { Ref, Plugin as VuePlugin } from 'vue'
 
 import appConfig from '#build/app.config'
 import type { NuxtApp } from '#app'
+import { useColorMode as useColorModeVueUse } from '@vueuse/core'
 
 export { useHead } from '@unhead/vue'
 export { useRoute, useRouter } from 'vue-router'
+
 export { defineShortcuts } from '../composables/defineShortcuts'
 export { useLocale } from '../composables/useLocale'
 
+export const useColorMode = () => {
+  if (!appConfig.colorMode) {
+    return {
+      forced: true
+    }
+  }
+
+  const { store, system } = useColorModeVueUse()
+
+  return {
+    get preference() { return store.value === 'auto' ? 'system' : store.value },
+    set preference(value) { store.value = value === 'system' ? 'auto' : value },
+    get value() { return store.value === 'auto' ? system.value : store.value },
+    forced: false
+  }
+}
+
 export const useAppConfig = () => appConfig
 
 export const useCookie = <T = string>(

src/unplugin.ts

@@ -60,7 +60,7 @@ export const NuxtUIPlugin = createUnplugin<NuxtUIOptions | undefined>((_options
   options.theme = options.theme || {}
   options.theme.colors = resolveColors(options.theme.colors)
 
-  const appConfig = defu({ ui: options.ui }, { ui: getDefaultUiConfig(options.theme.colors) })
+  const appConfig = defu({ ui: options.ui, colorMode: options.colorMode }, { ui: getDefaultUiConfig(options.theme.colors) })
 
   return [
     NuxtEnvironmentPlugin(),