From 320abd73f515d3d308bfa015d29ea26aff7f0fcf Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Fri, 24 Feb 2023 15:37:39 +0100
Subject: [PATCH] feat(useDark, useColorMode): introduce `disableTransition`
 option

---
 packages/core/useColorMode/index.ts | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/packages/core/useColorMode/index.ts b/packages/core/useColorMode/index.ts
index 7beb53d2a39..31b5a0e1d0b 100644
--- a/packages/core/useColorMode/index.ts
+++ b/packages/core/useColorMode/index.ts
@@ -77,6 +77,14 @@ export interface UseColorModeOptions<T extends string = BasicColorSchema> extend
    * @default undefined
    */
   emitAuto?: boolean
+
+  /**
+   * Disable transition on switch
+   *
+   * @see https://paco.me/writing/disable-theme-transitions
+   * @default false
+   */
+  disableTransition?: boolean
 }
 
 /**
@@ -96,6 +104,8 @@ export function useColorMode<T extends string = BasicColorSchema>(options: UseCo
     listenToStorageChanges = true,
     storageRef,
     emitAuto,
+    // TODO: switch to true in v10
+    disableTransition = false,
   } = options
 
   const modes = {
@@ -130,6 +140,14 @@ export function useColorMode<T extends string = BasicColorSchema>(options: UseCo
       if (!el)
         return
 
+      let style: HTMLStyleElement | undefined
+      if (disableTransition) {
+        style = window!.document.createElement('style')
+        style.type = 'text/css'
+        style.appendChild(document.createTextNode('*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}'))
+        window!.document.head.appendChild(style)
+      }
+
       if (attribute === 'class') {
         const current = value.split(/\s/g)
         Object.values(modes)
@@ -145,6 +163,13 @@ export function useColorMode<T extends string = BasicColorSchema>(options: UseCo
       else {
         el.setAttribute(attribute, value)
       }
+
+      if (disableTransition) {
+        // Calling getComputedStyle forces the browser to redraw
+        // @ts-expect-error unused variable
+        const _ = window!.getComputedStyle(style!).opacity
+        document.head.removeChild(style!)
+      }
     })
 
   function defaultOnChanged(mode: T | BasicColorSchema) {