Update the Color Mode for Charka UI

frontend/app/page.tsx

@@ -1,21 +1,24 @@
 "use client";
 
 import { ToastContainer } from "react-toastify";
-import { ChakraProvider } from "@chakra-ui/react";
+import { ChakraProvider, ColorModeScript  } from "@chakra-ui/react";
 import { QueryClient, QueryClientProvider } from "react-query";
 import { Client } from "@langchain/langgraph-sdk";
 
 import { ChatWindow } from "./components/ChatWindow";
 import { LangGraphClientContext } from "./hooks/useLangGraphClient";
 import { apiBaseUrl } from "./utils/constants";
 
+import theme from './theme'
+
 export default function Home() {
   const queryClient = new QueryClient();
   const langGraphClient = new Client({ apiUrl: apiBaseUrl });
   return (
     <LangGraphClientContext.Provider value={langGraphClient}>
       <QueryClientProvider client={queryClient}>
-        <ChakraProvider>
+      <ColorModeScript initialColorMode={theme.config.initialColorMode} />
+        <ChakraProvider theme={theme}>
           <ToastContainer />
           <ChatWindow />
         </ChakraProvider>

frontend/app/theme.ts

@@ -0,0 +1,11 @@
+import { extendTheme, type ThemeConfig } from '@chakra-ui/react'
+
+const config: ThemeConfig = {
+  initialColorMode: 'system',
+  useSystemColorMode: false,
+}
+
+// 3. extend the theme
+const theme = extendTheme({ config })
+
+export default theme