From 1135e1a2546d3dafa4c6ed4c9af1a5665003cc7f Mon Sep 17 00:00:00 2001
From: NahomAlemu <nahom.worku2015@gmail.com>
Date: Fri, 6 Mar 2026 15:25:16 -0800
Subject: [PATCH 1/2] Replace hardcoded color values with theme palette for
 dark mode consistency

---
 nsc-events-nextjs/app/create-event/page.tsx   | 80 +++++++++----------
 nsc-events-nextjs/app/event-detail/page.tsx   | 28 +++----
 .../components/ArchiveDialog.tsx              |  5 +-
 nsc-events-nextjs/components/AttendDialog.tsx |  5 +-
 .../components/CoverPhotoDialog.tsx           |  6 +-
 nsc-events-nextjs/components/EditDialog.tsx   |  9 ++-
 nsc-events-nextjs/components/LoginWindow.tsx  |  2 +-
 7 files changed, 69 insertions(+), 66 deletions(-)

diff --git a/nsc-events-nextjs/app/create-event/page.tsx b/nsc-events-nextjs/app/create-event/page.tsx
index 018aaf2..f9bdfda 100644
--- a/nsc-events-nextjs/app/create-event/page.tsx
+++ b/nsc-events-nextjs/app/create-event/page.tsx
@@ -121,7 +121,7 @@ const CreateEvent: React.FC = () => {
             {/* page title */}
             <Box
               sx={{
-                backgroundColor: "#114FA2",
+                backgroundColor: theme.palette.primary.dark,
                 boxShadow: "3px 3px 5px 0px rgba(0,0,0,0.3)",
                 borderRadius: 1,
               }}
@@ -131,7 +131,7 @@ const CreateEvent: React.FC = () => {
                 textAlign={"center"}
                 marginTop={"0.5rem"}
                 marginBottom={"1rem"}
-                sx={{ color: "white" }}
+                sx={{ color: theme.palette.primary.contrastText }}
               >
                 Add Event
               </Typography>
@@ -142,7 +142,7 @@ const CreateEvent: React.FC = () => {
                 textAlign={"center"}
                 marginTop={"0.5rem"}
                 marginBottom={"1rem"}
-                sx={{ color: "red" }}
+                sx={{ color: theme.palette.error.main }}
               >
                 REQUIRED FIELDS*
               </Typography>
@@ -153,7 +153,7 @@ const CreateEvent: React.FC = () => {
                 display: "flex",
                 justifyContent: "center",
                 flexDirection: isMobile ? "column" : "row",
-                backgroundColor: "#114FA2",
+                backgroundColor: theme.palette.primary.dark,
                 boxShadow: "3px 3px 5px 0px rgba(0,0,0,0.3)",
                 width: "100%",
                 borderRadius: 1,
@@ -165,7 +165,7 @@ const CreateEvent: React.FC = () => {
                   margin: isMobile ? 0 : 4,
                   marginTop: isMobile ? 2 : 4,
                   width: isMobile ? "100%" : "33%",
-                  backgroundColor: mode === "light" ? "white" : "black",
+                  backgroundColor: theme.palette.background.paper,
                   boxShadow: "3px 3px 5px 0px rgba(0,0,0,0.3)",
                   borderRadius: 1,
                 }}
@@ -185,7 +185,7 @@ const CreateEvent: React.FC = () => {
                     InputLabelProps={{ style: textFieldStyle.label }}
                     placeholder="Enter the title of the event"
                     sx={{
-                      backgroundColor: mode === "light" ? "white" : "#f5f1f11a",
+                      backgroundColor: theme.palette.background.default,
                     }}
                   />
 
@@ -202,7 +202,7 @@ const CreateEvent: React.FC = () => {
                     InputLabelProps={{ style: textFieldStyle.label }}
                     placeholder="Enter the host of the event"
                     sx={{
-                      backgroundColor: mode === "light" ? "white" : "#f5f1f11a",
+                      backgroundColor: theme.palette.background.default,
                     }}
                   />
 
@@ -219,7 +219,7 @@ const CreateEvent: React.FC = () => {
                     InputLabelProps={{ style: textFieldStyle.label }}
                     placeholder="Enter the registration of the event"
                     sx={{
-                      backgroundColor: mode === "light" ? "white" : "#f5f1f11a",
+                      backgroundColor: theme.palette.background.default,
                     }}
                   />
 
@@ -239,7 +239,7 @@ const CreateEvent: React.FC = () => {
                     InputLabelProps={{ style: textFieldStyle.label }}
                     placeholder="Enter the description of the event"
                     sx={{
-                      backgroundColor: mode === "light" ? "white" : "#f5f1f11a",
+                      backgroundColor: theme.palette.background.default,
                     }}
                   />
                 </Stack>
@@ -265,7 +265,7 @@ const CreateEvent: React.FC = () => {
                   margin: isMobile ? 0 : 4,
                   marginTop: isMobile ? 2 : 4,
                   width: isMobile ? "100%" : "33%",
-                  backgroundColor: mode === "light" ? "white" : "black",
+                  backgroundColor: theme.palette.background.paper,
                   boxShadow: "3px 3px 5px 0px rgba(0,0,0,0.3)",
                   borderRadius: 1,
                 }}
@@ -273,7 +273,7 @@ const CreateEvent: React.FC = () => {
                 {/* stack tag for vertical alignment */}
                 <Stack sx={{ width: "100%", padding: 5 }} spacing={2}>
                   <Box sx={{
-                    backgroundColor: mode === "light" ? "white" : "#f5f1f11a",
+                    backgroundColor: theme.palette.background.default,
                   }}>
                     <DatePicker
                       label="Event Date *"
@@ -288,7 +288,7 @@ const CreateEvent: React.FC = () => {
                   </Box>
 
                   <Box sx={{
-                    backgroundColor: mode === "light" ? "white" : "#f5f1f11a",
+                    backgroundColor: theme.palette.background.default,
                   }}>
                     <TimePicker
                       label="Start Time"
@@ -298,7 +298,7 @@ const CreateEvent: React.FC = () => {
                     />
                   </Box>
                   <Box sx={{
-                    backgroundColor: mode === "light" ? "white" : "#f5f1f11a",
+                    backgroundColor: theme.palette.background.default,
                   }}>
                     <TimePicker
                       label="End Time"
@@ -324,7 +324,7 @@ const CreateEvent: React.FC = () => {
                   margin: isMobile ? 0 : 4,
                   marginTop: isMobile ? 2 : 4,
                   width: isMobile ? "100%" : "33%",
-                  backgroundColor: mode === "light" ? "white" : "black",
+                  backgroundColor: theme.palette.background.paper,
                   boxShadow: "3px 3px 5px 0px rgba(0,0,0,0.3)",
                   borderRadius: 1,
                 }}
@@ -342,7 +342,7 @@ const CreateEvent: React.FC = () => {
                       sx={{
                         marginBottom: 2,
                         width: "100%",
-                        backgroundColor: mode === "light" ? "white" : "#f5f1f11a",
+                        backgroundColor: theme.palette.background.default,
                       }}
                     >
                       <AddPhotoAlternateIcon sx={{ mr: 1 }} />
@@ -407,7 +407,7 @@ const CreateEvent: React.FC = () => {
                     InputLabelProps={{ style: textFieldStyle.label }}
                     placeholder="Enter the capacity of the event"
                     sx={{
-                      backgroundColor: mode === "light" ? "white" : "#f5f1f11a",
+                      backgroundColor: theme.palette.background.default,
                     }}
                   />
 
@@ -423,7 +423,7 @@ const CreateEvent: React.FC = () => {
                     InputProps={{ style: textFieldStyle.input }}
                     InputLabelProps={{ style: textFieldStyle.label }}
                     sx={{
-                      backgroundColor: mode === "light" ? "white" : "#f5f1f11a",
+                      backgroundColor: theme.palette.background.default,
                     }}
                   />
 
@@ -440,7 +440,7 @@ const CreateEvent: React.FC = () => {
                     InputLabelProps={{ style: textFieldStyle.label }}
                     placeholder="Enter the location of the event"
                     sx={{
-                      backgroundColor: mode === "light" ? "white" : "#f5f1f11a",
+                      backgroundColor: theme.palette.background.default,
                     }}
                   />
                 </Stack>
@@ -451,7 +451,7 @@ const CreateEvent: React.FC = () => {
             {/* Begining of tag selector section */}
             <Box
               sx={{
-                backgroundColor: "#42A5F5",
+                backgroundColor: theme.palette.primary.light,
                 padding: 2,
                 boxShadow: "3px 3px 5px 0px rgba(0,0,0,0.3)",
                 borderRadius: 1,
@@ -479,7 +479,7 @@ const CreateEvent: React.FC = () => {
                   InputLabelProps={{ style: textFieldStyle.label }}
                   placeholder="Enter the tag of the event"
                   sx={{
-                    backgroundColor: mode === "light" ? "white" : "black",
+                    backgroundColor: theme.palette.background.paper,
                     borderRadius: 1,
                   }} // change border radius as needed
                 />
@@ -492,8 +492,8 @@ const CreateEvent: React.FC = () => {
                   style={{ textTransform: "none", margin: 10 }}
                   sx={{
                     "&:hover": {
-                      backgroundColor: "#114FA2",
-                      color: "white",
+                      backgroundColor: theme.palette.primary.dark,
+                      color: theme.palette.primary.contrastText,
                     },
                   }}
                 >
@@ -508,7 +508,7 @@ const CreateEvent: React.FC = () => {
                 display: "flex",
                 justifyContent: "center",
                 flexDirection: isMobile ? "column" : "row",
-                backgroundColor: "#114FA2",
+                backgroundColor: theme.palette.primary.dark,
                 boxShadow: "3px 3px 5px 0px rgba(0,0,0,0.3)",
                 borderRadius: 1,
               }}
@@ -519,7 +519,7 @@ const CreateEvent: React.FC = () => {
                   margin: isMobile ? 0 : 4,
                   marginTop: isMobile ? 2 : 4,
                   width: isMobile ? "100%" : "33%",
-                  backgroundColor: mode === "light" ? "white" : "black",
+                  backgroundColor: theme.palette.background.paper,
                   boxShadow: "3px 3px 5px 0px rgba(0,0,0,0.3)",
                   borderRadius: 1,
                 }}
@@ -538,7 +538,7 @@ const CreateEvent: React.FC = () => {
                     InputLabelProps={{ style: textFieldStyle.label }}
                     placeholder="Enter the schedule of the event"
                     sx={{
-                      backgroundColor: mode === "light" ? "white" : "#f5f1f11a",
+                      backgroundColor: theme.palette.background.default,
                     }}
                   />
 
@@ -555,7 +555,7 @@ const CreateEvent: React.FC = () => {
                     InputLabelProps={{ style: textFieldStyle.label }}
                     placeholder="Enter the speaker(s) of the event"
                     sx={{
-                      backgroundColor: mode === "light" ? "white" : "#f5f1f11a",
+                      backgroundColor: theme.palette.background.default,
                     }}
                   />
 
@@ -572,7 +572,7 @@ const CreateEvent: React.FC = () => {
                     InputLabelProps={{ style: textFieldStyle.label }}
                     placeholder="Enter the prerequisites of the event"
                     sx={{
-                      backgroundColor: mode === "light" ? "white" : "#f5f1f11a",
+                      backgroundColor: theme.palette.background.default,
                     }}
                   />
 
@@ -589,7 +589,7 @@ const CreateEvent: React.FC = () => {
                     InputLabelProps={{ style: textFieldStyle.label }}
                     placeholder="Enter the cancellation policy of the event"
                     sx={{
-                      backgroundColor: mode === "light" ? "white" : "#f5f1f11a",
+                      backgroundColor: theme.palette.background.default,
                     }}
                   />
                 </Stack>
@@ -601,7 +601,7 @@ const CreateEvent: React.FC = () => {
                   margin: isMobile ? 0 : 4,
                   marginTop: isMobile ? 2 : 4,
                   width: isMobile ? "100%" : "33%",
-                  backgroundColor: mode === "light" ? "white" : "black",
+                  backgroundColor: theme.palette.background.paper,
                   boxShadow: "3px 3px 5px 0px rgba(0,0,0,0.3)",
                   borderRadius: 1,
                 }}
@@ -620,7 +620,7 @@ const CreateEvent: React.FC = () => {
                     InputLabelProps={{ style: textFieldStyle.label }}
                     placeholder="Enter the contact of the event"
                     sx={{
-                      backgroundColor: mode === "light" ? "white" : "#f5f1f11a",
+                      backgroundColor: theme.palette.background.default,
                     }}
                   />
 
@@ -639,7 +639,7 @@ const CreateEvent: React.FC = () => {
                     InputLabelProps={{ style: textFieldStyle.label }}
                     placeholder="Enter the Facebook link of the event"
                     sx={{
-                      backgroundColor: mode === "light" ? "white" : "#f5f1f11a",
+                      backgroundColor: theme.palette.background.default,
                     }}
                   />
 
@@ -658,7 +658,7 @@ const CreateEvent: React.FC = () => {
                     InputLabelProps={{ style: textFieldStyle.label }}
                     placeholder="Enter the Twitter link of the event"
                     sx={{
-                      backgroundColor: mode === "light" ? "white" : "#f5f1f11a",
+                      backgroundColor: theme.palette.background.default,
                     }}
                   />
 
@@ -677,7 +677,7 @@ const CreateEvent: React.FC = () => {
                     InputLabelProps={{ style: textFieldStyle.label }}
                     placeholder="Enter the Instagram link of the event"
                     sx={{
-                      backgroundColor: mode === "light" ? "white" : "#f5f1f11a",
+                      backgroundColor: theme.palette.background.default,
                     }}
                   />
                 </Stack>
@@ -688,7 +688,7 @@ const CreateEvent: React.FC = () => {
                   margin: isMobile ? 0 : 4,
                   marginTop: isMobile ? 2 : 4,
                   width: isMobile ? "100%" : "33%",
-                  backgroundColor: mode === "light" ? "white" : "black",
+                  backgroundColor: theme.palette.background.paper,
                   boxShadow: "3px 3px 5px 0px rgba(0,0,0,0.3)",
                   borderRadius: 1,
                 }}
@@ -709,7 +709,7 @@ const CreateEvent: React.FC = () => {
                     InputLabelProps={{ style: textFieldStyle.label }}
                     placeholder="Enter the hashtag of the event"
                     sx={{
-                      backgroundColor: mode === "light" ? "white" : "#f5f1f11a",
+                      backgroundColor: theme.palette.background.default,
                     }}
                   />
 
@@ -726,7 +726,7 @@ const CreateEvent: React.FC = () => {
                     InputLabelProps={{ style: textFieldStyle.label }}
                     placeholder="Enter the privacy of the event"
                     sx={{
-                      backgroundColor: mode === "light" ? "white" : "#f5f1f11a",
+                      backgroundColor: theme.palette.background.default,
                     }}
                   />
 
@@ -743,7 +743,7 @@ const CreateEvent: React.FC = () => {
                     InputLabelProps={{ style: textFieldStyle.label }}
                     placeholder="Enter the accessibility of the event"
                     sx={{
-                      backgroundColor: mode === "light" ? "white" : "#f5f1f11a",
+                      backgroundColor: theme.palette.background.default,
                     }}
                   />
 
@@ -759,7 +759,7 @@ const CreateEvent: React.FC = () => {
                     InputProps={{ style: textFieldStyle.input }}
                     InputLabelProps={{ style: textFieldStyle.label }}
                     sx={{
-                      backgroundColor: mode === "light" ? "white" : "#f5f1f11a",
+                      backgroundColor: theme.palette.background.default,
                     }}
                   />
                 </Stack>
@@ -777,8 +777,8 @@ const CreateEvent: React.FC = () => {
                 sx={{
                   margin: 1,
                   "&:hover": {
-                    backgroundColor: "#114FA2",
-                    color: "white",
+                    backgroundColor: theme.palette.primary.dark,
+                    color: theme.palette.primary.contrastText,
                   },
                 }}
               >
diff --git a/nsc-events-nextjs/app/event-detail/page.tsx b/nsc-events-nextjs/app/event-detail/page.tsx
index c0bf09f..da30a1d 100644
--- a/nsc-events-nextjs/app/event-detail/page.tsx
+++ b/nsc-events-nextjs/app/event-detail/page.tsx
@@ -77,7 +77,7 @@ const EventDetail = () => {
 
   
   const { palette } = useTheme();
-  const containerColor = palette.mode === "dark" ? "#333" : "#fff";
+  const containerColor = palette.background.paper;
   const theme = useTheme();
   const isTablet = useMediaQuery(theme.breakpoints.between('sm', 'md'));
   const isMobile = useMediaQuery(theme.breakpoints.between('xs', 'sm'));
@@ -569,8 +569,8 @@ const EventDetail = () => {
                           <Button
                             variant="contained"
                             sx={{
-                              color: "white",
-                              backgroundColor: "#2074d4",
+                              color: theme.palette.primary.contrastText,
+                              backgroundColor: theme.palette.primary.main,
                               ml: isMobile ? 0 : 2,
                               padding: "8px 16px",
                               minWidth: "120px",
@@ -590,8 +590,8 @@ const EventDetail = () => {
                           <Button
                             variant="contained"
                             sx={{
-                              color: "white",
-                              backgroundColor: "#2074d4",
+                              color: theme.palette.primary.contrastText,
+                              backgroundColor: theme.palette.primary.main,
                               padding: "8px 16px",
                               minWidth: "120px",
                               width: isMobile ? "120" : "auto",
@@ -610,8 +610,8 @@ const EventDetail = () => {
                           <Button
                             variant="contained"
                             sx={{
-                              color: "white",
-                              backgroundColor: "#2074d4",
+                              color: theme.palette.primary.contrastText,
+                              backgroundColor: theme.palette.primary.main,
                               padding: "8px 16px",
                               minWidth: "120px",
                               width: isMobile ? "120" : "auto",
@@ -642,8 +642,8 @@ const EventDetail = () => {
                   <Button
                     variant="contained"
                     sx={{
-                      color: "white",
-                      backgroundColor: "#2074d4",
+                      color: theme.palette.primary.contrastText,
+                      backgroundColor: theme.palette.primary.main,
                       width: isMobile ? "120" : "auto",
                       padding: "8px 16px",
                       overflow: "hidden",
@@ -664,8 +664,8 @@ const EventDetail = () => {
                   <Button
                     variant="contained"
                     sx={{
-                      color: "white",
-                      backgroundColor: isRegistered ? "red" : "#2074d4",
+                      color: theme.palette.primary.contrastText,
+                      backgroundColor: isRegistered ? theme.palette.error.main : theme.palette.primary.main,
                       width: isMobile ? "120" : "auto",
                       padding: "8px 16px",
                       overflow: "hidden",
@@ -697,12 +697,12 @@ const EventDetail = () => {
               >
                 {events.length > 1 && events.findIndex(e => e === event?.id) > 0 && (
                   <Button onClick={getPrevEvent} sx={{ filter: isMobile ? "drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2))" : "", p: 0, ml: 0 }}>
-                    <ArrowLeftIcon sx={{ fontSize: isMobile ? "40px" : "70px", backgroundColor: isMobile ? "white" : "", color: isMobile ? "grey" : "", filter: isMobile ? "" : "drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2))", borderRadius: "2px" }} />
+                    <ArrowLeftIcon sx={{ fontSize: isMobile ? "40px" : "70px", backgroundColor: isMobile ? theme.palette.background.paper : "", color: isMobile ? theme.palette.text.secondary : "", filter: isMobile ? "" : "drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2))", borderRadius: "2px" }} />
                   </Button>
                 )}
                 {events.length > 1 && events.findIndex(e => e === event?.id) < events.length - 1 && (
                   <Button onClick={getNextEvent} sx={{ filter: isMobile ? "drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2))" : "", p: 0, mr: -2 }}>
-                    <ArrowRightIcon sx={{ fontSize: isMobile ? "40px" : "70px", backgroundColor: isMobile ? "white" : "", color: isMobile ? "grey" : "", filter: isMobile ? "" : "drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2))", borderRadius: "2px" }} />
+                    <ArrowRightIcon sx={{ fontSize: isMobile ? "40px" : "70px", backgroundColor: isMobile ? theme.palette.background.paper : "", color: isMobile ? theme.palette.text.secondary : "", filter: isMobile ? "" : "drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2))", borderRadius: "2px" }} />
                   </Button>
                 )}
               </Box>
@@ -747,7 +747,7 @@ const EventDetail = () => {
             autoHideDuration={1200}
             anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
           >
-            <SnackbarContent message={snackbarMessage} sx={{ backgroundColor: "white", color: "black" }} />
+            <SnackbarContent message={snackbarMessage} sx={{ backgroundColor: theme.palette.background.paper, color: theme.palette.text.primary }} />
           </Snackbar>
         </Box>
       </Box>
diff --git a/nsc-events-nextjs/components/ArchiveDialog.tsx b/nsc-events-nextjs/components/ArchiveDialog.tsx
index 654bde3..bb96603 100644
--- a/nsc-events-nextjs/components/ArchiveDialog.tsx
+++ b/nsc-events-nextjs/components/ArchiveDialog.tsx
@@ -3,7 +3,7 @@ import DialogTitle from "@mui/material/DialogTitle";
 import DialogContent from "@mui/material/DialogContent";
 import DialogContentText from "@mui/material/DialogContentText";
 import DialogActions from "@mui/material/DialogActions";
-import { Button, SnackbarContent } from "@mui/material";
+import { Button, SnackbarContent, useTheme } from "@mui/material";
 import React, { useState } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useRouter } from "next/navigation";
@@ -17,6 +17,7 @@ interface ArchiveDialogProps {
 }
 
 const ArchiveDialog = ({ isOpen, event, dialogToggle }: ArchiveDialogProps) => {
+  const theme = useTheme();
   const router = useRouter();
   const [snackbarMessage, setSnackbarMessage] = useState("");
 
@@ -103,7 +104,7 @@ const ArchiveDialog = ({ isOpen, event, dialogToggle }: ArchiveDialogProps) => {
         autoHideDuration={1200}
         anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
       >
-        <SnackbarContent message={snackbarMessage} sx={{ backgroundColor: "white", color: "black" }} />
+        <SnackbarContent message={snackbarMessage} sx={{ backgroundColor: theme.palette.background.paper, color: theme.palette.text.primary }} />
       </Snackbar>
     </>
   );
diff --git a/nsc-events-nextjs/components/AttendDialog.tsx b/nsc-events-nextjs/components/AttendDialog.tsx
index 51d13f5..a4b0cef 100644
--- a/nsc-events-nextjs/components/AttendDialog.tsx
+++ b/nsc-events-nextjs/components/AttendDialog.tsx
@@ -11,6 +11,7 @@ import {
   SnackbarContent,
   Tooltip,
   Typography,
+  useTheme,
 } from "@mui/material";
 import DialogActions from "@mui/material/DialogActions";
 import Snackbar from "@mui/material/Snackbar";
@@ -28,7 +29,7 @@ interface AttendDialogProps {
 }
 
 const AttendDialog = ({ isOpen, eventId, dialogToggle, onSuccess }: AttendDialogProps) => {
-    
+    const theme = useTheme();
     const [checked, setChecked] = useState(false);
     const [snackbarMessage, setSnackbarMessage] = useState("");
     const [heardFrom, setHeardFrom] = useState<string[]>([]); // New state for "Heard From"
@@ -263,7 +264,7 @@ const AttendDialog = ({ isOpen, eventId, dialogToggle, onSuccess }: AttendDialog
       >
         <SnackbarContent
           message={snackbarMessage}
-          sx={{ backgroundColor: "white", color: "black" }}
+          sx={{ backgroundColor: theme.palette.background.paper, color: theme.palette.text.primary }}
         />
       </Snackbar>
     </>
diff --git a/nsc-events-nextjs/components/CoverPhotoDialog.tsx b/nsc-events-nextjs/components/CoverPhotoDialog.tsx
index 431a5fa..3669439 100644
--- a/nsc-events-nextjs/components/CoverPhotoDialog.tsx
+++ b/nsc-events-nextjs/components/CoverPhotoDialog.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, SnackbarContent, Typography } from '@mui/material'
+import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, SnackbarContent, Typography, useTheme } from '@mui/material'
 import AddPhotoAlternateIcon from '@mui/icons-material/AddPhotoAlternate';
 import React, { useState } from 'react'
 import { useMutation } from '@tanstack/react-query';
@@ -14,7 +14,7 @@ interface CoverPhotoDialogProps {
 }
 
 function CoverPhotoDialog({ isOpen, dialogToggle, eventId, setEvent }: CoverPhotoDialogProps) {
-
+    const theme = useTheme();
     const [selectedImage, setSelectedImage] = useState<string | undefined>(undefined);
     const [selectedFile, setSelectedFile] = useState<File | undefined>(undefined);
     const [snackbarMessage, setSnackbarMessage] = useState("");
@@ -147,7 +147,7 @@ function CoverPhotoDialog({ isOpen, dialogToggle, eventId, setEvent }: CoverPhot
         >
             <SnackbarContent
                 message={snackbarMessage}
-                sx={{ backgroundColor: "white", color: "black" }}
+                sx={{ backgroundColor: theme.palette.background.paper, color: theme.palette.text.primary }}
             />
         </Snackbar>
     </>
diff --git a/nsc-events-nextjs/components/EditDialog.tsx b/nsc-events-nextjs/components/EditDialog.tsx
index 82aea17..aac1259 100644
--- a/nsc-events-nextjs/components/EditDialog.tsx
+++ b/nsc-events-nextjs/components/EditDialog.tsx
@@ -4,7 +4,7 @@ import Dialog from "@mui/material/Dialog";
 // NOTE: We specify the generic type for the pickers to resolve type errors
 import { DatePicker, LocalizationProvider, TimePicker } from "@mui/x-date-pickers";
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
-import { Box, Button, Stack, Typography } from "@mui/material";
+import { Box, Button, Stack, Typography, useTheme } from "@mui/material";
 import TextField from "@mui/material/TextField";
 import { textFieldStyle } from "@/components/InputFields";
 import TagSelector from "@/components/TagSelector";
@@ -19,6 +19,7 @@ interface EditDialogProps {
 }
 
 const EditDialog = ({ isOpen, event, toggleEditDialog }: EditDialogProps) => {
+    const theme = useTheme();
     const {
         handleDateChange,
         onStartTimeChange,
@@ -87,7 +88,7 @@ const EditDialog = ({ isOpen, event, toggleEditDialog }: EditDialogProps) => {
             <Dialog open={isOpen} maxWidth={"md"} fullWidth={true}>
                 <LocalizationProvider dateAdapter={AdapterDateFns}>
                     <Box component="form" onSubmit={handleSubmit} noValidate autoComplete="off" sx={{ p: 3 }}>
-                        <Typography variant="h5" component="h2" sx={{ fontWeight: 'bold', color: 'black', mb: 2 }}>
+                        <Typography variant="h5" component="h2" sx={{ fontWeight: 'bold', color: theme.palette.text.primary, mb: 2 }}>
                             Edit Event
                         </Typography>
                         <Stack spacing={2}>
@@ -340,13 +341,13 @@ const EditDialog = ({ isOpen, event, toggleEditDialog }: EditDialogProps) => {
                                     {/* Display non-nested errors */}
                                     {Object.entries(errors).map(([key, value]) => {
                                         if (typeof value === 'string' && value) {
-                                            return <p key={key} className="error-text" style={{ color: "red" }}>{value}</p>;
+                                            return <p key={key} className="error-text" style={{ color: theme.palette.error.main }}>{value}</p>;
                                         }
                                         return null;
                                     })}
                                     {/* Display nested social media errors */}
                                      {errors.eventSocialMedia && Object.entries(errors.eventSocialMedia).map(([nestedKey, nestedError]) => (
-                                                nestedError ? <p key={`social-${nestedKey}`} className="error-text" style={{ color: "red" }}>
+                                                nestedError ? <p key={`social-${nestedKey}`} className="error-text" style={{ color: theme.palette.error.main }}>
                                                     {`${nestedKey}: ${nestedError}`}
                                                 </p> : null
                                             ))}
diff --git a/nsc-events-nextjs/components/LoginWindow.tsx b/nsc-events-nextjs/components/LoginWindow.tsx
index f53d36b..94afb4b 100644
--- a/nsc-events-nextjs/components/LoginWindow.tsx
+++ b/nsc-events-nextjs/components/LoginWindow.tsx
@@ -172,7 +172,7 @@ const LoginWindow = () => {
                         type="submit"
                         fullWidth
                         variant="contained"
-                        sx={{ mt: 3, mb: 2, color: "black", backgroundColor: palette.secondary.light, fontFamily: "font-serif" }}
+                        sx={{ mt: 3, mb: 2, color: palette.secondary.contrastText, backgroundColor: palette.secondary.light, fontFamily: "font-serif" }}
                     >
                         Login
                     </Button>

From cc145ad0b4fe76f9fb8f8c00563ef7a7f52d3307 Mon Sep 17 00:00:00 2001
From: NahomAlemu <nahom.worku2015@gmail.com>
Date: Fri, 6 Mar 2026 15:58:28 -0800
Subject: [PATCH 2/2] update container in dark mode for event detail

---
 nsc-events-nextjs/app/event-detail/page.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/nsc-events-nextjs/app/event-detail/page.tsx b/nsc-events-nextjs/app/event-detail/page.tsx
index da30a1d..04602be 100644
--- a/nsc-events-nextjs/app/event-detail/page.tsx
+++ b/nsc-events-nextjs/app/event-detail/page.tsx
@@ -77,7 +77,10 @@ const EventDetail = () => {
 
   
   const { palette } = useTheme();
-  const containerColor = palette.background.paper;
+  // Use a slightly elevated surface in dark mode to stand out from the page background
+  const containerColor = palette.mode === "dark"
+    ? palette.grey[800]
+    : palette.background.paper;
   const theme = useTheme();
   const isTablet = useMediaQuery(theme.breakpoints.between('sm', 'md'));
   const isMobile = useMediaQuery(theme.breakpoints.between('xs', 'sm'));