fix: prevent color fade during theme transitions

src/components/ThemeProvider.tsx

@@ -26,6 +26,7 @@ export function ThemeProvider({ children, storageKey = "vite-ui-theme" }: ThemeP
   useEffect(() => {
     const root = window.document.documentElement
 
+    root.classList.add("disable-transitions")
     root.classList.remove("light", "dark")
 
     if (theme === "system") {
@@ -34,12 +35,19 @@ export function ThemeProvider({ children, storageKey = "vite-ui-theme" }: ThemeP
       root.classList.add(systemTheme)
       const themeColor = systemTheme === "dark" ? "hsl(30 15% 8%)" : "hsl(0 0% 98%)"
       document.querySelector('meta[name="theme-color"]')?.setAttribute("content", themeColor)
-      return
+      const timeoutId = window.setTimeout(() => {
+        root.classList.remove("disable-transitions")
+      }, 0)
+      return () => window.clearTimeout(timeoutId)
     }
 
     root.classList.add(theme)
     const themeColor = theme === "dark" ? "hsl(30 15% 8%)" : "hsl(0 0% 98%)"
     document.querySelector('meta[name="theme-color"]')?.setAttribute("content", themeColor)
+    const timeoutId = window.setTimeout(() => {
+      root.classList.remove("disable-transitions")
+    }, 0)
+    return () => window.clearTimeout(timeoutId)
   }, [theme])
 
   const value = {

src/index.css

@@ -201,6 +201,15 @@
   }
 }
 
+@layer base {
+  /* Avoid color fade when toggling themes. */
+  html.disable-transitions *,
+  html.disable-transitions *::before,
+  html.disable-transitions *::after {
+    transition: none !important;
+  }
+}
+
 @media (max-width: 640px) {
   .container {
     @apply px-4;