Maaz-Code · NihaalNO · Oct 15, 2025 · Oct 15, 2025
diff --git a/components/DialogBox.js b/components/DialogBox.js
@@ -10,17 +10,33 @@ import {
   Input,
   ModalFooter,
   Button,
+  Switch,
+  Box,
+  Flex
 } from "@chakra-ui/react";
+import { useState } from "react";
+
 
 function DialogBox({isOpen, onClose, newChat}) {
 
+  // State for theme toggle
+  const [darkMode, setDarkMode] = useState(true);
+
   return (
     <>
       <Modal isOpen={isOpen} onClose={onClose} isCentered>
         <ModalOverlay />
-        <ModalContent>
+        <ModalContent bg={darkMode ? "gray.800" : "white"} color={darkMode ? "white" : "black"} border="1px solid" borderColor={darkMode ? "gray.700" : "gray.300"} >
           <ModalHeader>
-            <ModalCloseButton />
+            <Flex justifyContent="space-between" alignItems="center">
+              <ModalCloseButton />
+              <Switch
+                isChecked={darkMode}
+                onChange={() => setDarkMode(!darkMode)}
+                colorScheme="blue"
+                size="sm"
+              />
+            </Flex>
           </ModalHeader>
 
           <ModalBody>
@@ -36,13 +52,13 @@ function DialogBox({isOpen, onClose, newChat}) {
             >
               <FormControl>
                 <FormLabel>Enter email of the recipient</FormLabel>
-                <Input type="email" />
+                <Input type="email" bg={darkMode ? "gray.700" : "white"} color={darkMode ? "white" : "black"} border="1px solid" borderColor={darkMode ? "gray.600" : "gray.300"} />
               </FormControl>
             </form>
           </ModalBody>
 
           <ModalFooter>
-            <Button type="submit" form="email-form" bg = "blue.50" color = "blue.500" _hover = {{bg: "blue.100", cursor: "pointer"}}>
+            <Button type="submit" form="email-form" bg = {darkMode ? "blue.500" : "blue.100"} color = {darkMode ? "white" : "blue.900"} _hover = {{bg: darkMode ? "blue.600" : "blue.200", cursor: "pointer"}}>
               Submit
             </Button>
           </ModalFooter>
@@ -51,4 +67,4 @@ function DialogBox({isOpen, onClose, newChat}) {
     </>
   );
 }
-export default DialogBox;
+export default DialogBox;
diff --git a/components/Login.js b/components/Login.js
@@ -1,19 +1,23 @@
 import { ChatIcon } from "@chakra-ui/icons"
-import { Box, Button, Center, Stack, useToast, Flex, Text } from "@chakra-ui/react"
+import { Box, Button, Center, Stack, useToast, Flex, Text, Switch } from "@chakra-ui/react"
 import { useSignInWithGoogle } from "react-firebase-hooks/auth"
 import Head from "next/head"
 import { auth } from "../firebaseconfig"
+import { useState } from "react"
 
 const Login = () => {
     const toast = useToast();
     const [signInWithGoogle] = useSignInWithGoogle(auth);
+
+    // State for theme toggle
+    const [darkMode, setDarkMode] = useState(true);
 
     return (
         <>
         <Head>
             <title>Login to Comms</title>
         </Head>
-        <div className = "area" >
+        <div className = "area" style={{backgroundColor: darkMode ? "#1E293B" : "#B9D0EC"}} >
             <ul className = "circles">
                 <li></li>
                 <li></li>
@@ -26,33 +30,42 @@ const Login = () => {
                 <li></li>
             </ul>
         </div >
-        <Center h = "100vh" bgColor = "#B9D0EC">
+        <Center h = "100vh" bgColor = {darkMode ? "#1E293B" : "#B9D0EC"}>
             <Flex flexDirection = "column">
-                <Text className = "headerText" align = "center">Comms</Text>
+                <Text className = "headerText" align = "center" color={darkMode ? "white" : "black"}>Comms</Text>
                 <Stack
                 align = "center"
-                bgColor = "#1E293B"
+                bgColor = {darkMode ? "#1E293B" : "#FFFFFF"}
                 p = {20}
                 spacing = {20}
                 marginBottom = {10}
                 boxShadow = "xl"
                 rounded = "xl"
                 >
                     <Box 
-                    bgColor = "#FFFFFF"
+                    bgColor = {darkMode ? "#1E293B" : "#FFFFFF"}
                     w = "fit-content"
                     p = {6}
                     rounded = "3xl"
                     boxShadow = "md"
                     >
-                        <ChatIcon w = "100px" h = "100px" color = "black" />
+                        <ChatIcon w = "100px" h = "100px" color = {darkMode ? "white" : "black"} />
                     </Box>
-                    <Button boxShadow = "md" onClick={() => {signInWithGoogle("", {prompt: "select_account"}, toast({title: 'Login in process...', status: 'info', duration: 8000, isClosable: true, position: 'bottom-left'}))}} bgColor = "#FFFFFF">
+                    <Button boxShadow = "md" onClick={() => {signInWithGoogle("", {prompt: "select_account"}, toast({title: 'Login in process...', status: 'info', duration: 8000, isClosable: true, position: 'bottom-left'}))}} bg = {darkMode ? "#FFFFFF" : "#1E293B"} color = {darkMode ? "#1E293B" : "#FFFFFF"} _hover = {{bg: darkMode ? "#F5F5F5" : "#333333", cursor: "pointer"}}>
                         Sign in with Google
                     </Button>
                 </Stack>
             </Flex>
         </Center>
+        <Flex position="absolute" top="20px" right="20px" alignItems="center" gap={2}>
+            <Switch
+                isChecked={darkMode}
+                onChange={() => setDarkMode(!darkMode)}
+                colorScheme="blue"
+                size="sm"
+            />
+            <Text fontSize="sm" color={darkMode ? "white" : "black"}>{darkMode ? "Dark" : "Light"} Mode</Text>
+        </Flex>
         </>
     )
 }

diff --git a/components/Sidebar.js b/components/Sidebar.js
@@ -1,12 +1,15 @@
+import React, { useState } from "react"
 // import { CloseIcon } from "@chakra-ui/icons"
-import { Avatar, Button, Flex, Text, useDisclosure } from "@chakra-ui/react"
+import { Avatar, Button, Flex, Text, useDisclosure, Switch, Box } from "@chakra-ui/react"
+import { motion } from "framer-motion"
 import { useAuthState } from 'react-firebase-hooks/auth';
 import { auth, db } from "../firebaseconfig";
 import { useCollection } from 'react-firebase-hooks/firestore';
 import { collection, addDoc } from "firebase/firestore";
 import getOtherEmail from "../utils/getOtherEmail";
 import {useRouter} from "next/router";
 import DialogBox from "./DialogBox.js";
+import { useTheme } from "./ThemeProvider";
 
 const Sidebar = () => {
     const [user] = useAuthState(auth);
@@ -15,6 +18,11 @@ const Sidebar = () => {
     const router = useRouter();
     const { isOpen, onClose, onOpen } = useDisclosure();
 
+    // State for sidebar collapse
+    const [isCollapsed, setIsCollapsed] = useState(false);
+    // Use theme from context
+    const { darkMode, toggleTheme, themeColors } = useTheme();
+
     const redirect = (id) => {
         router.push(`/chat/${id}`);
     }
@@ -24,10 +32,10 @@ const Sidebar = () => {
             chats?.filter(chat => chat.users.includes(user.email))
             .map ( 
                 chat => 
-                    <Flex key = {Math.random()} align = "center" p = {3} _hover = {{bg: "gray.200", cursor: "pointer"}} 
+                    <Flex key = {Math.random()} align = "center" p = {3} _hover = {{bg: themeColors.sidebarHover, cursor: "pointer"}} 
                     onClick = {() => redirect(chat.id)}>
-                        <Avatar src = "" marginEnd = {3}/>
-                        <Text>{getOtherEmail(chat.users, user)}</Text>
+                        <Avatar src = "" marginEnd = {3} size={isCollapsed ? "sm" : "md"}/>
+                        {!isCollapsed && <Text>{getOtherEmail(chat.users, user)}</Text>}
                     </Flex>
             )
         )
@@ -41,42 +49,66 @@ const Sidebar = () => {
         }
     }
 
-    // const closeSidebar = () => {
-    //     console.log("close sidebar");
-    // }
-
     return (
         <>
         {<DialogBox isOpen={isOpen} onClose={onClose} newChat={newChat}/>}
+        <motion.div
+            initial={false}
+            animate={{ width: isCollapsed ? "80px" : "330px" }}
+            transition={{ duration: 0.3, ease: "easeInOut" }}
+        >
         <Flex 
-        w = "330px"
         h = "100vh"
         borderEnd = "1px solid"
-        borderColor = "gray.200"
+        borderColor = {themeColors.sidebarBorder}
         direction = "column"
         className = "sidebar"
+        bg={themeColors.sidebarBg}
+        color={themeColors.text}
         >
             <Flex 
             w = "100%" h = "81px" 
             justifyContent = "space-between" 
             align = "center" p = {3} 
             >
                 <Flex align = "center">
-                    <Avatar src = {user.photoURL} marginEnd = {3}/>
-                    <Text fontSize = "lg">{user.displayName}</Text>
+                    <Avatar src = {user.photoURL} marginEnd = {isCollapsed ? 0 : 3} size={isCollapsed ? "sm" : "md"}/>
+                    {!isCollapsed && <Text fontSize = "lg">{user.displayName}</Text>}
+                </Flex>
+                <Flex align="center" gap={2}>
+                    <Button 
+                        onClick={() => setIsCollapsed(!isCollapsed)}
+                        variant="ghost"
+                        size="sm"
+                        mr={2}
+                    >
+                        {isCollapsed ? "☰" : "✕"}
+                    </Button>
+                    <Switch
+                        isChecked={darkMode}
+                        onChange={toggleTheme}
+                        colorScheme="blue"
+                        size="sm"
+                    />
                 </Flex>
-                {/* <IconButton isRound icon = {<CloseIcon/>} size = "sm" color = "#1E293B" onClick={closeSidebar()}/> */}
             </Flex>
 
-            <Button bg = "blue.50" color = "blue.500" m = {5} p = {4} _hover = {{bg: "blue.100", cursor: "pointer"}}
-            onClick = {() => onOpen()}>
-                New Chat
-            </Button>
+            {!isCollapsed && (
+                <Button 
+                    bg = {themeColors.newChatButtonBg} 
+                    color = {themeColors.newChatButtonColor} 
+                    m = {5} p = {4} 
+                    _hover = {{bg: themeColors.newChatButtonHover, cursor: "pointer"}}
+                    onClick = {() => onOpen()}>
+                    New Chat
+                </Button>
+            )}
 
             <Flex overflowY = "auto" direction = "column" sx = {{scrollbarWidth: "none"}} flex = {1}>
                 {chatList()}
             </Flex>
         </Flex>
+        </motion.div>
         </>
     )
 }

diff --git a/components/ThemeProvider.js b/components/ThemeProvider.js
@@ -0,0 +1,43 @@
+import React, { createContext, useState, useContext } from "react";
+import { Box } from "@chakra-ui/react";
+
+const ThemeContext = createContext();
+
+export const useTheme = () => {
+  return useContext(ThemeContext);
+};
+
+export const ThemeProvider = ({ children }) => {
+  const [darkMode, setDarkMode] = useState(true);
+
+  const toggleTheme = () => {
+    setDarkMode(!darkMode);
+  };
+
+  // Define theme colors based on dark mode
+  const themeColors = {
+    background: darkMode ? "gray.900" : "white",
+    text: darkMode ? "white" : "black",
+    sidebarBg: darkMode ? "gray.900" : "white",
+    sidebarBorder: darkMode ? "gray.700" : "gray.300",
+    sidebarHover: darkMode ? "gray.700" : "gray.200",
+    topbarBorder: darkMode ? "gray.700" : "gray.300",
+    messageSenderBg: darkMode ? "gray.700" : "gray.100",
+    messageReceiverBg: darkMode ? "blue.500" : "blue.100",
+    newChatButtonBg: darkMode ? "blue.500" : "blue.100",
+    newChatButtonColor: darkMode ? "white" : "blue.900",
+    newChatButtonHover: darkMode ? "blue.600" : "blue.200"
+  };
+
+  return (
+    <ThemeContext.Provider value={{ darkMode, toggleTheme, themeColors }}>
+      <Box 
+        bg={themeColors.background} 
+        color={themeColors.text} 
+        minH="100vh"
+      >
+        {children}
+      </Box>
+    </ThemeContext.Provider>
+  );
+};
diff --git a/next-env.d.ts b/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.