feat: disable transitions on toggling color modes

slidevjs · Dec 18, 2024 · a08574a · a08574a
1 parent 93145d8
commit a08574a
Showing 1 changed file with 11 additions and 0 deletions.
diff --git a/packages/client/logic/dark.ts b/packages/client/logic/dark.ts
@@ -26,12 +26,23 @@ export const isDark = computed<boolean>({
 export const toggleDark = useToggle(isDark)
 
 if (isClient) {
+  const CSS_DISABLE_TRANS = '*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}'
+
   watch(
     isDark,
     (v) => {
+      const style = window!.document.createElement('style')
+      style.appendChild(document.createTextNode(CSS_DISABLE_TRANS))
+      window!.document.head.appendChild(style)
+
       const html = document.querySelector('html')!
       html.classList.toggle('dark', v)
       html.classList.toggle('light', !v)
+
+      // Calling getComputedStyle forces the browser to redraw
+      // @ts-expect-error unused variable
+      const _ = window!.getComputedStyle(style!).opacity
+      document.head.removeChild(style!)
     },
     { immediate: true },
   )