fixed the theme provider

services/frontend/src/app/layout.tsx

@@ -3,9 +3,9 @@ import { Roboto } from "next/font/google";
 import localFont from "next/font/local";
 import { AppRouterCacheProvider } from "@mui/material-nextjs/v14-appRouter";
 import "./globals.css";
-import { CssBaseline, ThemeProvider } from "@mui/material";
-import { darkTheme } from "@/utils/theme";
+import { CssBaseline } from "@mui/material";
 import TopAppBar from "@/components/top-app-bar/top-app-bar";
+import { ThemeLayoutProvider } from "@/stores/theme-store";
 
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",
@@ -26,7 +26,7 @@ const roboto = Roboto({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
+  title: "Game Tracker",
   description: "Generated by create next app",
 };
 
@@ -41,11 +41,11 @@ export default function RootLayout({
         className={`${geistSans.variable} ${geistMono.variable} ${roboto.variable} antialiased`}
       >
         <AppRouterCacheProvider>
-          <ThemeProvider theme={darkTheme}>
+          <ThemeLayoutProvider>
             <CssBaseline />
             <TopAppBar />
             {children}
-          </ThemeProvider>
+          </ThemeLayoutProvider>
         </AppRouterCacheProvider>
       </body>
     </html>

services/frontend/src/components/theme/theme-provider.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import useTheme from "@/stores/theme-store";
+import { ThemeProvider } from "@emotion/react";
+
+export const darkTheme = createTheme({
+  palette: {
+    mode: "dark",
+  },
+});
+
+export const lightTheme = createTheme({
+  palette: {
+    mode: "light",
+  },
+});
+
+export default function ThemeLayoutProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const { theme } = useTheme();
+
+  return (
+    <ThemeProvider theme={theme === "dark" ? lightTheme : darkTheme}>
+      {children}
+    </ThemeProvider>
+  );
+}

services/frontend/src/stores/theme-store.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { createTheme } from "@mui/material";
+import { createTheme, ThemeProvider } from "@mui/material";
 import { create } from "zustand";
 
 type AppTheme = "light" | "dark";
@@ -13,9 +13,9 @@ interface ThemeStoreProps {
 const STORAGE_KEY = "app_theme";
 
 const getInitialTheme = (): AppTheme => {
-  const storageTheme = localStorage.getItem(STORAGE_KEY) as AppTheme | null;
+  const storageTheme = window.localStorage.getItem(STORAGE_KEY) as AppTheme | null;
   if (!storageTheme) {
-    localStorage.setItem(STORAGE_KEY, "dark");
+    window.localStorage.setItem(STORAGE_KEY, "dark");
     return "dark";
   }
 
@@ -26,7 +26,7 @@ const useTheme = create<ThemeStoreProps>((set, get) => ({
   theme: getInitialTheme(),
   setTheme: (newTheme) => {
     set({ theme: newTheme });
-    localStorage.setItem(STORAGE_KEY, newTheme);
+    window.localStorage.setItem(STORAGE_KEY, newTheme);
   },
   switchTheme: () => {
     if (get().theme === "dark") {
@@ -50,3 +50,17 @@ export const lightTheme = createTheme({
     mode: "light",
   },
 });
+
+export function ThemeLayoutProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const { theme } = useTheme();
+
+  return (
+    <ThemeProvider theme={theme === "dark" ? lightTheme : darkTheme}>
+      {children}
+    </ThemeProvider>
+  );
+}