fix: fixed theme transition being applied incorrectly (TECH-132) (#38)

hieunguyent12 · web-flow · commit 4dfbb86c5b4b · 2025-06-24T07:57:31.000-04:00
diff --git a/apps/web/index.html b/apps/web/index.html
@@ -8,7 +8,7 @@
     <title>TODO: Change page title</title>
     <script>
       // This script is used to prevent flashing on page load, as it loads the apporiate theme first before loading the css
-      const theme = localStorage.getItem("swamphacks-ui-theme") || "system";
+      const theme = localStorage.getItem("ui-theme") || "system";
       const root = window.document.documentElement;
 
       root.classList.remove("light", "dark");
@@ -23,6 +23,11 @@
       } else {
         root.classList.add(theme);
       }
+
+      // Only apply this class only after the theme has been applied, hence the calling the onload function
+      window.onload = () => {
+        document.body.classList.add("enable-theme-transition");
+      };
     </script>
   </head>
   <body>
diff --git a/apps/web/src/components/ThemeProvider.tsx b/apps/web/src/components/ThemeProvider.tsx
@@ -27,7 +27,7 @@ const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
 export function ThemeProvider({
   children,
   defaultTheme = "system",
-  storageKey = "vite-ui-theme",
+  storageKey = "ui-theme",
   ...props
 }: ThemeProviderProps) {
   const [theme, setTheme] = useState<Theme>(
@@ -74,7 +74,7 @@ export function ThemeProvider({
   );
 }
 
-export const ThemeSwitch = () => {
+export const DevThemeSwitch = () => {
   const { theme, setTheme } = useTheme();
 
   return (
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
@@ -18,6 +18,6 @@ body,
 }
 
 /* https://stackoverflow.com/questions/68400074/how-to-apply-transition-effects-when-switching-from-light-mode-to-dark-in-tailwi */
-body * {
+body.enable-theme-transition * {
   @apply transition-colors duration-500;
 }
diff --git a/apps/web/src/main.tsx b/apps/web/src/main.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react-refresh/only-export-components */
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { RouterProvider, createRouter } from "@tanstack/react-router";
@@ -25,7 +24,7 @@ declare module "@tanstack/react-router" {
 
 function App() {
   return (
-    <ThemeProvider defaultTheme="system" storageKey="swamphacks-ui-theme">
+    <ThemeProvider defaultTheme="system">
       <QueryClientProvider client={queryClient}>
         <InnerApp />
       </QueryClientProvider>
diff --git a/apps/web/src/routes/__root.tsx b/apps/web/src/routes/__root.tsx
@@ -1,4 +1,4 @@
-import { ThemeSwitch } from "@/components/ThemeProvider";
+import { DevThemeSwitch } from "@/components/ThemeProvider";
 import type { auth } from "@/lib/authClient";
 import { createRootRouteWithContext, Outlet } from "@tanstack/react-router";
 
@@ -14,7 +14,7 @@ export const Route = createRootRouteWithContext<RouterContext>()({
       <Outlet />
       {IS_DEV && (
         <div className="fixed inline-flex w-fit z-[999] bottom-3 left-3 text-white">
-          <ThemeSwitch />
+          <DevThemeSwitch />
         </div>
       )}
     </>

Original file line number	Diff line number	Diff line change
`@@ -18,6 +18,6 @@ body,`
`18`	`18`	`}`
`19`	`19`
`20`	`20`	`/* https://stackoverflow.com/questions/68400074/how-to-apply-transition-effects-when-switching-from-light-mode-to-dark-in-tailwi */`
`21`		`-body * {`
	`21`	`+body.enable-theme-transition * {`
`22`	`22`	`@apply transition-colors duration-500;`
`23`	`23`	`}`