From b423b0aafcade1ee39f6195fbf8374ceb31e1f69 Mon Sep 17 00:00:00 2001
From: Anthony Hai <namsaoquan@gmail.com>
Date: Mon, 10 Jun 2024 16:39:10 +0700
Subject: [PATCH] feat: add color mode to charka ui

---
 frontend/app/page.tsx |  7 +++++--
 frontend/app/theme.ts | 11 +++++++++++
 2 files changed, 16 insertions(+), 2 deletions(-)
 create mode 100644 frontend/app/theme.ts

diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index 7d5e95222..7eba995e2 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -1,7 +1,7 @@
 "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";
 
@@ -9,13 +9,16 @@ 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>
diff --git a/frontend/app/theme.ts b/frontend/app/theme.ts
new file mode 100644
index 000000000..a896d6ec8
--- /dev/null
+++ b/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
\ No newline at end of file