From adbbb6ef41dcbe91a45abe291436869d972f64cb Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Sat, 22 Apr 2023 00:35:04 +0200
Subject: [PATCH] fix(useColorMode): element ref support, close #3003

---
 packages/core/ssr-handlers.ts       | 5 +++--
 packages/core/useColorMode/index.ts | 9 +++++----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/core/ssr-handlers.ts b/packages/core/ssr-handlers.ts
index 0e7836a91e6..b26a707da07 100644
--- a/packages/core/ssr-handlers.ts
+++ b/packages/core/ssr-handlers.ts
@@ -1,4 +1,5 @@
-import type { Awaitable, MaybeRefOrGetter } from '@vueuse/shared'
+import type { Awaitable } from '@vueuse/shared'
+import type { MaybeElementRef } from './unrefElement'
 
 export interface StorageLikeAsync {
   getItem(key: string): Awaitable<string | null>
@@ -18,7 +19,7 @@ export interface StorageLike {
 export interface SSRHandlersMap {
   getDefaultStorage: () => StorageLike | undefined
   getDefaultStorageAsync: () => StorageLikeAsync | undefined
-  updateHTMLAttrs: (selector: string | MaybeRefOrGetter<HTMLElement | null | undefined>, attribute: string, value: string) => void
+  updateHTMLAttrs: (selector: string | MaybeElementRef, attribute: string, value: string) => void
 }
 
 const _global
diff --git a/packages/core/useColorMode/index.ts b/packages/core/useColorMode/index.ts
index a188a28ce7f..5062052ac42 100644
--- a/packages/core/useColorMode/index.ts
+++ b/packages/core/useColorMode/index.ts
@@ -1,13 +1,14 @@
 import type { Ref } from 'vue-demi'
 import { computed, ref, watch } from 'vue-demi'
-import type { MaybeRefOrGetter } from '@vueuse/shared'
-import { toValue, tryOnMounted } from '@vueuse/shared'
+import { tryOnMounted } from '@vueuse/shared'
 import type { StorageLike } from '../ssr-handlers'
 import { getSSRHandler } from '../ssr-handlers'
 import type { UseStorageOptions } from '../useStorage'
 import { useStorage } from '../useStorage'
 import { defaultWindow } from '../_configurable'
 import { usePreferredDark } from '../usePreferredDark'
+import type { MaybeElementRef } from '../unrefElement'
+import { unrefElement } from '../unrefElement'
 
 export type BasicColorSchema = 'light' | 'dark' | 'auto'
 
@@ -17,7 +18,7 @@ export interface UseColorModeOptions<T extends string = BasicColorSchema> extend
    *
    * @default 'html'
    */
-  selector?: string | MaybeRefOrGetter<HTMLElement | null | undefined>
+  selector?: string | MaybeElementRef
 
   /**
    * HTML attribute applying the target element
@@ -146,7 +147,7 @@ export function useColorMode<T extends string = BasicColorSchema>(
     (selector, attribute, value) => {
       const el = typeof selector === 'string'
         ? window?.document.querySelector(selector)
-        : toValue(selector)
+        : unrefElement(selector)
       if (!el)
         return