Fix theme toggle review feedback

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: gkorland

app/src/App.tsx

@@ -408,12 +408,12 @@ export default function App() {
                     <Tooltip>
                       <TooltipTrigger asChild>
                         <Button variant="ghost" size="icon" asChild>
-                          <a title="Github" href="https://github.com/FalkorDB/code-graph" target='_blank' rel="noopener noreferrer">
+                          <a title="GitHub" href="https://github.com/FalkorDB/code-graph" target='_blank' rel="noopener noreferrer">
                             <Github className="h-5 w-5" />
                           </a>
                         </Button>
                       </TooltipTrigger>
-                      <TooltipContent>Github</TooltipContent>
+                      <TooltipContent>GitHub</TooltipContent>
                     </Tooltip>
                   </li>
                   <li>
@@ -596,7 +596,7 @@ export default function App() {
               <ul className='h-full flex flex-col gap-16 p-8 items-center'>
                 <li>
                   <a href="https://github.com/FalkorDB/code-graph" target='_blank' rel="noopener noreferrer">
-                    <p>Github</p>
+                    <p>GitHub</p>
                   </a>
                 </li>
                 <li>

app/src/components/theme-provider.tsx

@@ -1,17 +1,25 @@
 import { createContext, useContext, useEffect, useState } from "react"
 
 type Theme = "dark" | "light" | "system"
+type ResolvedTheme = Exclude<Theme, "system">
 
 type ThemeProviderState = {
   theme: Theme
+  resolvedTheme: ResolvedTheme
   setTheme: (theme: Theme) => void
 }
 
 const ThemeProviderContext = createContext<ThemeProviderState>({
   theme: "system",
+  resolvedTheme: "light",
   setTheme: () => null,
 })
 
+const MEDIA_QUERY = "(prefers-color-scheme: dark)"
+
+const getSystemTheme = (): ResolvedTheme =>
+  typeof window !== "undefined" && window.matchMedia(MEDIA_QUERY).matches ? "dark" : "light"
+
 export function ThemeProvider({
   children,
   defaultTheme = "system",
@@ -24,23 +32,28 @@ export function ThemeProvider({
   const [theme, setTheme] = useState<Theme>(
     () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
   )
+  const [systemTheme, setSystemTheme] = useState<ResolvedTheme>(getSystemTheme)
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia(MEDIA_QUERY)
+    const updateSystemTheme = () => setSystemTheme(mediaQuery.matches ? "dark" : "light")
+
+    updateSystemTheme()
+    mediaQuery.addEventListener("change", updateSystemTheme)
+
+    return () => mediaQuery.removeEventListener("change", updateSystemTheme)
+  }, [])
 
   useEffect(() => {
     const root = window.document.documentElement
     root.classList.remove("light", "dark")
 
-    if (theme === "system") {
-      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
-        ? "dark"
-        : "light"
-      root.classList.add(systemTheme)
-    } else {
-      root.classList.add(theme)
-    }
-  }, [theme])
+    root.classList.add(theme === "system" ? systemTheme : theme)
+  }, [theme, systemTheme])
 
   const value = {
     theme,
+    resolvedTheme: theme === "system" ? systemTheme : theme,
     setTheme: (theme: Theme) => {
       localStorage.setItem(storageKey, theme)
       setTheme(theme)

app/src/components/theme-toggle.tsx

@@ -3,9 +3,9 @@ import { Button } from "@/components/ui/button"
 import { useTheme } from "./theme-provider"
 
 export function ThemeToggle() {
-  const { theme, setTheme } = useTheme()
+  const { resolvedTheme, setTheme } = useTheme()
 
-  const isDark = theme === "dark" || (theme === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches)
+  const isDark = resolvedTheme === "dark"
 
   return (
     <Button