From 5d5f2a02ebc360e9e3bd789454f0b690cf65bee9 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 27 Feb 2025 12:03:49 +0100
Subject: [PATCH] chore(vue): stub `useColorMode`

---
 src/runtime/vue/stubs.ts | 19 +++++++++++++++++++
 src/unplugin.ts          |  2 +-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/runtime/vue/stubs.ts b/src/runtime/vue/stubs.ts
index 6f71845c..a5b099c7 100644
--- a/src/runtime/vue/stubs.ts
+++ b/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>(
diff --git a/src/unplugin.ts b/src/unplugin.ts
index 7bb6e2eb..9f72586b 100644
--- a/src/unplugin.ts
+++ b/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(),