From 81be30a1d8b9aeb5b84f4d5442bfd1d7f56850e8 Mon Sep 17 00:00:00 2001
From: Jacob Chia Chu You <chuyou.chia@gmail.com>
Date: Thu, 6 Nov 2025 10:37:25 -0500
Subject: [PATCH] Refactor theme change handling in ThemeToggle

The themes were not getting applied based on the stored theme on reload. This fixes it so that it persists across refreshes
---
 components/app/theme-toggle.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/components/app/theme-toggle.tsx b/components/app/theme-toggle.tsx
index ffefc0da..9df05fdc 100644
--- a/components/app/theme-toggle.tsx
+++ b/components/app/theme-toggle.tsx
@@ -52,16 +52,17 @@ export function ApplyThemeScript() {
 export function ThemeToggle({ className }: ThemeToggleProps) {
   const [theme, setTheme] = useState<ThemeMode | undefined>(undefined);
 
+  function handleThemeChange(theme: ThemeMode) {
+    applyTheme(theme);
+    setTheme(theme);
+  }
+  
   useEffect(() => {
     const storedTheme = (localStorage.getItem(THEME_STORAGE_KEY) as ThemeMode) ?? 'system';
 
-    setTheme(storedTheme);
+    handleThemeChange(storedTheme);
   }, []);
 
-  function handleThemeChange(theme: ThemeMode) {
-    applyTheme(theme);
-    setTheme(theme);
-  }
 
   return (
     <div