feat: add disableTransition option and set default to true

src/module.ts

@@ -14,7 +14,8 @@ const DEFAULTS: ModuleOptions = {
   classPrefix: '',
   classSuffix: '-mode',
   dataValue: '',
-  storageKey: 'nuxt-color-mode'
+  storageKey: 'nuxt-color-mode',
+  disableTransition: true
 }
 
 export default defineNuxtModule({
@@ -162,4 +163,11 @@ export interface ModuleOptions {
    * The script that will be injected into the head of the page
    */
   script?: string
+  /**
+   * Disable transition on switch
+   *
+   * @see https://paco.me/writing/disable-theme-transitions
+   * @default true
+   */
+  disableTransition?: boolean
 }

src/runtime/plugin.client.ts

@@ -7,6 +7,7 @@ import { globalName, storageKey, dataValue } from '#color-mode-options'
 const helper = window[globalName] as unknown as {
   preference: string
   value: string
+  disableTransition: boolean
   getColorScheme: () => string
   addColorScheme: (className: string) => void
   removeColorScheme: (className: string) => void
@@ -87,8 +88,20 @@ export default defineNuxtPlugin((nuxtApp) => {
   }, { immediate: true })
 
   watch(() => colorMode.value, (newValue, oldValue) => {
+    let style: HTMLStyleElement | undefined
+    if (helper.disableTransition) {
+      style = window!.document.createElement('style')
+      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)
+    }
     helper.removeColorScheme(oldValue)
     helper.addColorScheme(newValue)
+    if (helper.disableTransition) {
+      // Calling getComputedStyle forces the browser to redraw
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const _ = window!.getComputedStyle(style!).opacity
+      document.head.removeChild(style!)
+    }
   })
 
   if (colorMode.preference === 'system') {

src/script.ts

@@ -20,6 +20,8 @@ addColorScheme(value)
 w['<%= options.globalName %>'] = {
   preference,
   value,
+  // @ts-ignore
+  disableTransition: '<%= options.disableTransition %>' === 'true',
   getColorScheme,
   addColorScheme,
   removeColorScheme