feat: add useDisableTransition to transition between themes smoothly

yzh990918 · yzh990918 · commit bb59cdc89326 · 2023-05-15T01:36:11.000+08:00
diff --git a/src/components/ui/ThemeToggle.tsx b/src/components/ui/ThemeToggle.tsx
@@ -1,17 +1,20 @@
 import { Show, onMount } from 'solid-js'
-import { useDark } from '@/hooks'
+import { useDark, useDisableTransition } from '@/hooks'
 
 export default () => {
   const [isDark, setIsDark] = useDark()
+  const { disableTransition, removeDisableTransition } = useDisableTransition()
 
   onMount(() => {
     document.querySelector('meta[name="theme-color"]')?.setAttribute('content', isDark() ? '#222222' : '#fafafa')
   })
 
   const handleDarkChanged = () => {
+    disableTransition()
     const dark = !isDark()
     document.querySelector('meta[name="theme-color"]')?.setAttribute('content', dark ? '#222222' : '#fafafa')
     setIsDark(dark)
+    removeDisableTransition()
   }
 
   return (
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
@@ -3,3 +3,4 @@ export * from './useCopy'
 export * from './useClickOutside'
 export * from './useLargeScreen'
 export * from './useMobileScreen'
+export * from './useDisableTransition'
diff --git a/src/hooks/useDisableTransition.ts b/src/hooks/useDisableTransition.ts
@@ -0,0 +1,32 @@
+export const useDisableTransition = () => {
+  // https://paco.me/writing/disable-theme-transitions
+  const css = document.createElement('style')
+  const disableTransition = () => {
+    css.type = 'text/css'
+    css.appendChild(
+      document.createTextNode(
+        `* {
+       -webkit-transition: none !important;
+       -moz-transition: none !important;
+       -o-transition: none !important;
+       -ms-transition: none !important;
+       transition: none !important;
+    }`,
+      ),
+    )
+    document.head.appendChild(css)
+  }
+
+  // Calling getComputedStyle forces the browser to redraw
+  const removeDisableTransition = () => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const _ = window.getComputedStyle(css).opacity
+    document.head.removeChild(css)
+  }
+
+  return {
+    css,
+    disableTransition,
+    removeDisableTransition,
+  }
+}
