Updated Dark mode handling

Author: NihaalNO

components/Sidebar.js

@@ -20,8 +20,8 @@ const Sidebar = () => {
 
     // State for sidebar collapse
     const [isCollapsed, setIsCollapsed] = useState(false);
-    // Use theme from context instead of local state
-    const { darkMode, toggleTheme } = useTheme();
+    // Use theme from context
+    const { darkMode, toggleTheme, themeColors } = useTheme();
 
     const redirect = (id) => {
         router.push(`/chat/${id}`);
@@ -32,7 +32,7 @@ const Sidebar = () => {
             chats?.filter(chat => chat.users.includes(user.email))
             .map ( 
                 chat => 
-                    <Flex key = {Math.random()} align = "center" p = {3} _hover = {{bg: darkMode ? "gray.700" : "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} size={isCollapsed ? "sm" : "md"}/>
                         {!isCollapsed && <Text>{getOtherEmail(chat.users, user)}</Text>}
@@ -60,11 +60,11 @@ const Sidebar = () => {
         <Flex 
         h = "100vh"
         borderEnd = "1px solid"
-        borderColor = {darkMode ? "gray.700" : "gray.300"}
+        borderColor = {themeColors.sidebarBorder}
         direction = "column"
         className = "sidebar"
-        bg={darkMode ? "gray.900" : "white"}
-        color={darkMode ? "white" : "black"}
+        bg={themeColors.sidebarBg}
+        color={themeColors.text}
         >
             <Flex 
             w = "100%" h = "81px" 
@@ -94,8 +94,12 @@ const Sidebar = () => {
             </Flex>
 
             {!isCollapsed && (
-                <Button bg = {darkMode ? "blue.500" : "blue.100"} color = {darkMode ? "white" : "blue.900"} m = {5} p = {4} _hover = {{bg: darkMode ? "blue.600" : "blue.200", cursor: "pointer"}}
-                onClick = {() => onOpen()}>
+                <Button 
+                    bg = {themeColors.newChatButtonBg} 
+                    color = {themeColors.newChatButtonColor} 
+                    m = {5} p = {4} 
+                    _hover = {{bg: themeColors.newChatButtonHover, cursor: "pointer"}}
+                    onClick = {() => onOpen()}>
                     New Chat
                 </Button>
             )}

components/ThemeProvider.js

@@ -1,5 +1,5 @@
 import React, { createContext, useState, useContext } from "react";
-import { Box, Switch } from "@chakra-ui/react";
+import { Box } from "@chakra-ui/react";
 
 const ThemeContext = createContext();
 
@@ -14,9 +14,28 @@ export const ThemeProvider = ({ children }) => {
     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 }}>
-      <Box bg={darkMode ? "gray.900" : "white"} color={darkMode ? "white" : "black"} minH="100vh">
+    <ThemeContext.Provider value={{ darkMode, toggleTheme, themeColors }}>
+      <Box 
+        bg={themeColors.background} 
+        color={themeColors.text} 
+        minH="100vh"
+      >
         {children}
       </Box>
     </ThemeContext.Provider>

pages/chat/[id].js

@@ -15,13 +15,14 @@ import { useTheme } from "../../components/ThemeProvider";
 const Topbar = ({username}) => {
     const toast = useToast();
   const router = useRouter();
+  const { themeColors } = useTheme();
     return (
-        <Flex align = "center" w = "100%" h = "81px" p = {3} borderBottom = "1px solid" borderColor = "gray.300" shadow = "base">
+        <Flex align = "center" w = "100%" h = "81px" p = {3} borderBottom = "1px solid" borderColor = {themeColors.topbarBorder} shadow = "base" bg={themeColors.sidebarBg}>
             <Avatar src = "" marginEnd = {3}/>
             <Heading size = "md" flex = {1}>{username}</Heading>
-            <Button bg = "white" color = "red.500" 
+            <Button bg = {themeColors.newChatButtonBg} color = {themeColors.newChatButtonColor} 
             marginEnd = "2" p = {4} shadow = "xl"
-            _hover = {{bg: "red.100", cursor: "pointer"}} 
+            _hover = {{bg: themeColors.newChatButtonHover, cursor: "pointer"}} 
             onClick  = { async () => {
                  console.log('Before redirect'); 
                  router.push('/');
@@ -38,6 +39,7 @@ const Topbar = ({username}) => {
 
 const Bottombar = ({id, user}) => {
     const [input, setInput] = useState("");
+    const { themeColors } = useTheme();
     const sendMessage = async(e) => {
         e.preventDefault();
         if(input.length > 0) {
@@ -51,9 +53,9 @@ const Bottombar = ({id, user}) => {
     }
 
     return (
-        <FormControl display = "flex" borderTop = "1px solid" borderTopColor = "gray.200" p = {3} onSubmit = {sendMessage} as = "form" shadow = "base">
+        <FormControl display = "flex" borderTop = "1px solid" borderTopColor = {themeColors.topbarBorder} p = {3} onSubmit = {sendMessage} as = "form" shadow = "base" bg={themeColors.sidebarBg}>
             <Input placeholder = "Type a message..." marginEnd = {3} autoComplete = "off" shadow = "xl"
-            onChange={e => setInput(e.target.value)} value = {input} bgColor = "white" />
+            onChange={e => setInput(e.target.value)} value = {input} bgColor = {themeColors.background} color={themeColors.text} />
             <IconButton icon = {<ArrowRightIcon/>} shadow = "xl" size = "md" color = "white" type = "submit" bgColor = "#1E293B" _hover = {{bgColor: "none", color: "none", cursor: "pointer"}}/>
         </FormControl>
     )
@@ -69,12 +71,14 @@ export default function Chat () {
     const q = query(collection(db, `chats/${id}/messages`), orderBy('timestamp'));
     const [messages] = useCollectionData(q);
     const [chat] = useDocumentData(doc(db, "chats", id));
+    
+    const { darkMode, themeColors } = useTheme();
 
     const getMessages = () => messages?.map(msg => {
         const sender = msg.sender === user.email;
 
         return (
-            <Flex key = {Math.random()} shadow = {sender ? "lg" : "xl"} alignSelf = {sender ? "flex-start" : "flex-end"} bg = {sender ? "white" : "#1E293B"} borderRadius = "lg" w = "fit-content" minWidth = "50px" p = {3} m = {1} color = {sender ? "black" : "white"}>
+            <Flex key = {Math.random()} shadow = {sender ? "lg" : "xl"} alignSelf = {sender ? "flex-start" : "flex-end"} bg = {sender ? themeColors.messageSenderBg : themeColors.messageReceiverBg} borderRadius = "lg" w = "fit-content" minWidth = "50px" p = {3} m = {1} color = {sender ? themeColors.text : "white"}>
                 <Text>{msg.text}</Text>
             </Flex>
         )       
@@ -89,16 +93,13 @@ export default function Chat () {
         }, 100)
     }, [messages])
 
-    // Get theme from context
-    const { darkMode } = useTheme();
-
     return (
         <Flex h = "100vh">
             <Head>
                 <title>Comms</title>
             </Head>
             <Sidebar/>
-            <Flex flex = {1} direction = "column" onClick={() => getMessages()} bgColor = {darkMode ? "gray.900" : "white"}>
+            <Flex flex = {1} direction = "column" onClick={() => getMessages()} bgColor = {themeColors.background}>
                 <Topbar username = {getOtherEmail(chat?.users, user)}/>
                 <Flex flex = {1} direction = "column" pt = {4} px = {4}  overflowY = "auto" sx = {{scrollbarWidth: "none"}}>
                     {getMessages()}