From d003059d40fed8f7907556af8f118da2d8db6c24 Mon Sep 17 00:00:00 2001
From: SidhantDash <sidhantdash126@gmail.com>
Date: Fri, 30 May 2025 23:33:21 -0400
Subject: [PATCH] Completed Dark Mode Visual

---
 frontend/src/app/create/page.tsx              |  6 +--
 frontend/src/app/not-found.tsx                |  2 +-
 frontend/src/app/page.tsx                     |  2 +-
 frontend/src/app/plans/[id]/page.tsx          |  6 +--
 frontend/src/app/plans/page.tsx               | 54 ++++++++++---------
 frontend/src/components/Filters.tsx           | 14 ++---
 .../src/components/courses/AddCourses.tsx     |  8 +--
 .../src/components/courses/CourseDisplay.tsx  |  4 +-
 .../components/courses/RegisteredClass.tsx    |  2 +-
 .../src/components/saved-plans/SavedPlan.tsx  |  8 +--
 .../src/components/schedules/DayClass.tsx     | 44 +++++++--------
 .../components/schedules/ScheduleDisplay.tsx  | 10 ++--
 .../src/components/schedules/WeekSchedule.tsx | 12 ++---
 frontend/src/components/ui/Combobox.tsx       |  8 +--
 frontend/src/components/ui/DeletePlan.tsx     |  4 +-
 frontend/tailwind.config.ts                   |  1 +
 16 files changed, 96 insertions(+), 89 deletions(-)

diff --git a/frontend/src/app/create/page.tsx b/frontend/src/app/create/page.tsx
index 5927248a..5e6a1a14 100644
--- a/frontend/src/app/create/page.tsx
+++ b/frontend/src/app/create/page.tsx
@@ -15,9 +15,9 @@ export default function Page({ searchParams }: Props) {
   return (
     <div
       className="min-h-screen bg-cover bg-fixed bg-bottom bg-no-repeat"
-      style={{
-        backgroundImage: `url(${background.src})`,
-      }}
+      // style={{
+      //   backgroundImage: `url(${background.src})`,
+      // }}
     >
       <Navbar />
       <main className="flex flex-col gap-8 px-4 pb-4 pt-8 xl:px-24">
diff --git a/frontend/src/app/not-found.tsx b/frontend/src/app/not-found.tsx
index 264763e9..462c48e5 100644
--- a/frontend/src/app/not-found.tsx
+++ b/frontend/src/app/not-found.tsx
@@ -6,7 +6,7 @@ import Link from "next/link";
 
 export default function NotFound() {
   return (
-    <div className="flex h-screen w-full flex-col items-center justify-center gap-10 text-center">
+    <div className="flex h-screen w-full flex-col items-center justify-center gap-10 text-center font-bold">
       <h1 className="block text-[4rem]">404 Page Not Found</h1>
 
       <Link href="/">
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 9be1e396..7918a142 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -54,7 +54,7 @@ export default function Home() {
               </div>
               {/* Ready and Start Now Button */}
               <div className="flex w-full min-w-[350px] max-w-lg -translate-y-0 items-center justify-center text-xl font-bold md:-translate-y-5 xl:-translate-y-3 xl:text-2xl 2xl:text-3xl">
-                <p className="-mr-8 w-1/2 cursor-default rounded-l-full bg-[#F8E6EA] bg-dusty-pink px-6 py-4 text-left text-neutral-600/40 sm:py-5">
+                <p className="-mr-8 w-1/2 cursor-default rounded-l-full bg-[#F8E6EA] bg-dusty-pink px-6 py-4 text-left text-neutral-600/40 dark:bg-[#969696] dark:text-white sm:py-5">
                   Ready?
                 </p>
                 <Link
diff --git a/frontend/src/app/plans/[id]/page.tsx b/frontend/src/app/plans/[id]/page.tsx
index 9c7f41aa..879b3aa4 100644
--- a/frontend/src/app/plans/[id]/page.tsx
+++ b/frontend/src/app/plans/[id]/page.tsx
@@ -16,9 +16,9 @@ export default function SchedulePage({ params }: Props) {
   return (
     <div
       className="relative -mb-[3.625rem] -mt-[3.625rem] min-h-screen bg-cover bg-fixed bg-bottom bg-no-repeat pt-2"
-      style={{
-        backgroundImage: `url(${background.src})`,
-      }}
+      // style={{
+      //   backgroundImage: `url(${background.src})`,
+      // }}
     >
       {/* Schedule display container */}
       <div className="flex flex-grow flex-row overflow-y-auto pt-32">
diff --git a/frontend/src/app/plans/page.tsx b/frontend/src/app/plans/page.tsx
index 5cba7dec..88e4dfda 100644
--- a/frontend/src/app/plans/page.tsx
+++ b/frontend/src/app/plans/page.tsx
@@ -41,7 +41,7 @@ export default function MyPlans() {
   };
 
   return (
-    <div className="min-h-screen bg-barely-pink">
+    <div className="min-h-screen">
       <Navbar />
 
       <div className="z-1 mb-0 ml-[10%] mr-auto mt-20 flex h-[8vh] w-[25%] overflow-y-auto rounded-t-lg border-l-2 border-r-2 border-t-2 border-black bg-red-700">
@@ -52,7 +52,7 @@ export default function MyPlans() {
 
       {savedPlans.length === 0 && (
         // if savedPlans array is empty: direct user to the schedule builder
-        <div className="z-1 mb-10 ml-auto mr-auto mt-0 flex h-[85vh] w-4/5 flex-col flex-nowrap items-center overflow-y-auto rounded-xl rounded-tl-none border-2 border-black bg-white">
+        <div className="z-1 mb-10 ml-auto mr-auto mt-0 flex h-[85vh] w-4/5 flex-col flex-nowrap items-center overflow-y-auto rounded-xl rounded-tl-none border-2 border-black bg-white dark:bg-dm-mid-gray">
           <div className="m-auto flex flex-col items-center justify-center">
             <h1 className="text-3xl font-bold">
               You don&apos;t have any saved plans yet.{" "}
@@ -66,29 +66,33 @@ export default function MyPlans() {
         </div>
       )}
 
-      <div className="z-1 mb-10 ml-auto mr-auto mt-0 flex h-[85vh] w-4/5 flex-col flex-nowrap items-center gap-6 overflow-y-auto rounded-xl rounded-tl-none border-2 border-black bg-white py-10">
-        {savedPlans
-          .toSorted((a, b) => (a.pinned !== b.pinned ? (a.pinned ? -1 : 1) : 0))
-          .map((plan) => (
-            <motion.div
-              layout
-              key={plan.id}
-              transition={{
-                type: "spring",
-                damping: 20,
-                stiffness: 120,
-                duration: 100,
-              }}
-              className="relative"
-            >
-              <SavedPlan
-                plan={plan}
-                onPin={() => pinPlan(plan.id)}
-                onDelete={() => confirmDeletePlan(plan.title)}
-              />
-            </motion.div>
-          ))}
-      </div>
+      {savedPlans.length !== 0 && (
+        <div className="z-1 mb-10 ml-auto mr-auto mt-0 flex h-[85vh] w-4/5 flex-col flex-nowrap items-center gap-6 overflow-y-auto rounded-xl rounded-tl-none border-2 border-black bg-white py-10 dark:bg-dm-mid-gray">
+          {savedPlans
+            .toSorted((a, b) =>
+              a.pinned !== b.pinned ? (a.pinned ? -1 : 1) : 0,
+            )
+            .map((plan) => (
+              <motion.div
+                layout
+                key={plan.id}
+                transition={{
+                  type: "spring",
+                  damping: 20,
+                  stiffness: 120,
+                  duration: 100,
+                }}
+                className="relative"
+              >
+                <SavedPlan
+                  plan={plan}
+                  onPin={() => pinPlan(plan.id)}
+                  onDelete={() => confirmDeletePlan(plan.title)}
+                />
+              </motion.div>
+            ))}
+        </div>
+      )}
 
       {planToDelete && (
         <DeletePlan
diff --git a/frontend/src/components/Filters.tsx b/frontend/src/components/Filters.tsx
index 286198e8..768498b8 100644
--- a/frontend/src/components/Filters.tsx
+++ b/frontend/src/components/Filters.tsx
@@ -69,7 +69,7 @@ export default function Filters() {
   const [maxCreditHours, setMaxCreditHours] = useState<number>(18);
 
   return (
-    <section className="flex flex-col gap-6 border-4 border-dusty-pink bg-barely-pink px-4 py-6 sm:gap-9 sm:px-8 sm:py-9">
+    <section className="flex flex-col gap-6 border-4 border-dusty-pink bg-white px-4 py-6 dark:border-dm-light-gray dark:bg-[#525252] sm:gap-9 sm:px-8 sm:py-9">
       <h1 className="w-full text-center text-xl font-bold sm:text-2xl lg:text-left">
         Filters
       </h1>
@@ -104,9 +104,9 @@ export default function Filters() {
         </label>
 
         <div className="contents grid-cols-subgrid items-center lg:col-span-2 lg:grid">
-          <label className="col-span-full flex items-center justify-center gap-4 border-b-2 border-pebble-gray/40 pb-4 text-neutral-700 hover:text-black sm:pb-6 lg:col-start-2 lg:justify-start lg:border-none lg:pb-0">
+          <label className="col-span-full flex items-center justify-center gap-4 border-b-2 border-pebble-gray/40 pb-4 text-neutral-700 hover:text-black dark:text-neutral-300 dark:hover:text-white sm:pb-6 lg:col-start-2 lg:justify-start lg:border-none lg:pb-0">
             <input
-              className="form-checkbox size-6 rounded-md border-2 border-limestone text-bulldog-red hover:border-pebble-gray focus:ring-bulldog-red"
+              className="form-checkbox size-6 rounded-md border-2 border-limestone text-bulldog-red dark:form-checkbox hover:border-pebble-gray focus:ring-bulldog-red dark:size-6 dark:rounded-md dark:border-2 dark:border-[#a9999c] dark:bg-[#c7c7c7] dark:text-bulldog-red dark:hover:border-white dark:focus:ring-bulldog-red"
               name="walking"
               type="checkbox"
             />
@@ -140,9 +140,9 @@ export default function Filters() {
         </label>
 
         <div className="contents grid-cols-subgrid items-center lg:col-span-2 lg:grid">
-          <label className="col-span-full flex items-center justify-center gap-4 border-b-2 border-pebble-gray/40 pb-4 text-neutral-700 hover:text-black sm:pb-6 lg:col-start-2 lg:justify-start lg:border-none lg:pb-0">
+          <label className="col-span-full flex items-center justify-center gap-4 border-b-2 border-pebble-gray/40 pb-4 text-neutral-700 hover:text-black dark:text-neutral-300 dark:hover:text-white sm:pb-6 lg:col-start-2 lg:justify-start lg:border-none lg:pb-0">
             <input
-              className="form-checkbox size-6 rounded-md border-2 border-limestone text-bulldog-red hover:border-pebble-gray focus:ring-bulldog-red"
+              className="form-checkbox size-6 rounded-md border-2 border-limestone text-bulldog-red dark:form-checkbox hover:border-pebble-gray focus:ring-bulldog-red dark:size-6 dark:rounded-md dark:border-2 dark:border-[#a9999c] dark:bg-[#c7c7c7] dark:text-bulldog-red dark:hover:border-white dark:focus:ring-bulldog-red"
               name="showFilledClasses"
               type="checkbox"
             />
@@ -155,7 +155,7 @@ export default function Filters() {
         <label className="col-span-2 grid grid-cols-subgrid items-center">
           <span className="pl-3 text-right font-bold">Min Credit Hours</span>
           <input
-            className="flex w-full items-center gap-6 rounded-md border-2 border-limestone bg-white px-3 py-1.5 transition-[box-shadow,border-color] disabled:cursor-not-allowed disabled:opacity-60 [&:not(:disabled):hover]:border-pebble-gray [&:not(:disabled):hover]:shadow-sm"
+            className="flex w-full items-center gap-6 rounded-md border-2 border-limestone bg-white px-3 py-1.5 transition-[box-shadow,border-color] disabled:cursor-not-allowed disabled:opacity-60 dark:border-[#a9999c] dark:bg-[#c7c7c7] dark:text-[#525252] [&:not(:disabled):hover]:border-pebble-gray [&:not(:disabled):hover]:shadow-sm dark:[&:not(:disabled):hover]:border-white dark:[&:not(:disabled):hover]:shadow-sm"
             min={1}
             max={maxCreditHours - 1}
             name="minCreditHours"
@@ -169,7 +169,7 @@ export default function Filters() {
         <label className="col-span-2 grid grid-cols-subgrid items-center">
           <span className="pl-3 text-right font-bold">Max Credit Hours</span>
           <input
-            className="flex w-full items-center gap-6 rounded-md border-2 border-limestone bg-white px-3 py-1.5 transition-[box-shadow,border-color] disabled:cursor-not-allowed disabled:opacity-60 [&:not(:disabled):hover]:border-pebble-gray [&:not(:disabled):hover]:shadow-sm"
+            className="flex w-full items-center gap-6 rounded-md border-2 border-limestone bg-white px-3 py-1.5 transition-[box-shadow,border-color] disabled:cursor-not-allowed disabled:opacity-60 dark:border-[#a9999c] dark:bg-[#c7c7c7] dark:text-[#525252] [&:not(:disabled):hover]:border-pebble-gray [&:not(:disabled):hover]:shadow-sm dark:[&:not(:disabled):hover]:border-white dark:[&:not(:disabled):hover]:shadow-sm"
             min={minCreditHours + 1}
             max={18}
             name="maxCreditHours"
diff --git a/frontend/src/components/courses/AddCourses.tsx b/frontend/src/components/courses/AddCourses.tsx
index 1a7399bf..30195e19 100644
--- a/frontend/src/components/courses/AddCourses.tsx
+++ b/frontend/src/components/courses/AddCourses.tsx
@@ -136,28 +136,28 @@ export function AddCourses({ onAddCourse, searchParams }: Props) {
         <Link
           href={subjectView.href}
           data-active={state.view === "subject"}
-          className="w-1/3 rounded-bl-none rounded-br-none rounded-tl-lg rounded-tr-lg bg-dusty-pink px-4 py-2 text-left font-bold capitalize text-[#CFBEBE] duration-150 data-[active=true]:bg-bulldog-red data-[active=true]:text-white"
+          className="w-1/3 rounded-bl-none rounded-br-none rounded-tl-lg rounded-tr-lg bg-dusty-pink px-4 py-2 text-left font-bold capitalize text-[#CFBEBE] duration-150 data-[active=true]:bg-bulldog-red data-[active=true]:text-white dark:bg-[#bbbbbb] dark:text-neutral-600 dark:data-[active=true]:bg-bulldog-red dark:data-[active=true]:text-white"
         >
           By Subject
         </Link>
         <Link
           href={instructorView.href}
           data-active={state.view === "instructor"}
-          className="w-1/3 rounded-bl-none rounded-br-none rounded-tl-lg rounded-tr-lg bg-dusty-pink px-4 py-2 text-left font-bold capitalize text-[#CFBEBE] duration-150 data-[active=true]:bg-bulldog-red data-[active=true]:text-white"
+          className="w-1/3 rounded-bl-none rounded-br-none rounded-tl-lg rounded-tr-lg bg-dusty-pink px-4 py-2 text-left font-bold capitalize text-[#CFBEBE] duration-150 data-[active=true]:bg-bulldog-red data-[active=true]:text-white dark:bg-[#bbbbbb] dark:text-neutral-600 dark:data-[active=true]:bg-bulldog-red dark:data-[active=true]:text-white"
         >
           By Instructor
         </Link>
         <Link
           href={crnView.href}
           data-active={state.view === "crn"}
-          className="w-1/3 rounded-bl-none rounded-br-none rounded-tl-lg rounded-tr-lg bg-dusty-pink px-4 py-2 text-left font-bold capitalize text-[#CFBEBE] duration-150 data-[active=true]:bg-bulldog-red data-[active=true]:text-white"
+          className="w-1/3 rounded-bl-none rounded-br-none rounded-tl-lg rounded-tr-lg bg-dusty-pink px-4 py-2 text-left font-bold capitalize text-[#CFBEBE] duration-150 data-[active=true]:bg-bulldog-red data-[active=true]:text-white dark:bg-[#bbbbbb] dark:text-neutral-600 dark:data-[active=true]:bg-bulldog-red dark:data-[active=true]:text-white"
         >
           By CRN
         </Link>
       </nav>
 
       <form
-        className="flex flex-col gap-16 border-4 border-dusty-pink bg-barely-pink px-8 py-10"
+        className="flex flex-col gap-16 border-4 border-t-0 border-dusty-pink bg-white px-8 py-10 dark:border-dm-light-gray dark:bg-[#535353]"
         onSubmit={handleSubmit}
       >
         {state.view === "subject" && <SearchBySubject {...subjectView} />}
diff --git a/frontend/src/components/courses/CourseDisplay.tsx b/frontend/src/components/courses/CourseDisplay.tsx
index 7943c5a0..cc7bc980 100644
--- a/frontend/src/components/courses/CourseDisplay.tsx
+++ b/frontend/src/components/courses/CourseDisplay.tsx
@@ -44,7 +44,7 @@ export default function CourseDisplay({ searchParams }: Props) {
         </h1>
         <div className="relative">
           {/* Container for course list */}
-          <div className="no-scrollbar relative flex flex-1 flex-col overflow-x-hidden overflow-y-scroll scroll-smooth border-4 border-dusty-pink bg-white py-4">
+          <div className="no-scrollbar relative flex flex-1 flex-col overflow-x-hidden overflow-y-scroll scroll-smooth border-4 border-dusty-pink bg-white py-4 dark:border-dm-light-gray dark:bg-[#525252]">
             {/*Course item */}
             {courses.map((course) => (
               <RegisteredClass
@@ -57,7 +57,7 @@ export default function CourseDisplay({ searchParams }: Props) {
             ))}
           </div>
           {/* Styling div to add spacing and hold down arrow notification in case there is more items */}
-          <div className="absolute bottom-0 left-0 flex h-6 w-full justify-center border-4 border-t-0 border-dusty-pink bg-white">
+          <div className="absolute bottom-0 left-0 flex h-6 w-full justify-center border-4 border-t-0 border-dusty-pink bg-white dark:border-dm-light-gray dark:bg-[#525252]">
             {courses.length > 5 && (
               <PiCaretDownBold className="size-30 h-auto w-auto animate-bounce" />
             )}
diff --git a/frontend/src/components/courses/RegisteredClass.tsx b/frontend/src/components/courses/RegisteredClass.tsx
index 91b9c11e..fe23da2a 100644
--- a/frontend/src/components/courses/RegisteredClass.tsx
+++ b/frontend/src/components/courses/RegisteredClass.tsx
@@ -26,7 +26,7 @@ const RegisteredClass = ({
 
   return (
     <article
-      className={`flex min-w-60 bg-white py-1 pl-8 duration-100 ease-out hover:translate-x-1 hover:brightness-95 ${removeElement ? "opacity-0" : ""}`}
+      className={`flex min-w-60 bg-white py-1 pl-8 duration-100 ease-out hover:translate-x-1 hover:brightness-95 dark:bg-[#525252] dark:hover:brightness-90 ${removeElement ? "opacity-0" : ""}`}
     >
       <RemoveElementButton height={20} width={20} onClick={removeAnimation} />
       <div className="overflow-hidden text-ellipsis">
diff --git a/frontend/src/components/saved-plans/SavedPlan.tsx b/frontend/src/components/saved-plans/SavedPlan.tsx
index 9a26db0c..eade3bcb 100644
--- a/frontend/src/components/saved-plans/SavedPlan.tsx
+++ b/frontend/src/components/saved-plans/SavedPlan.tsx
@@ -39,7 +39,7 @@ export default function SavedPlan({ plan, onPin, onDelete }: PlanDisplayProps) {
 
   return (
     <div
-      className="relative z-10 flex w-[70vw] cursor-pointer flex-row items-center gap-4 rounded-xl border-b-8 border-red-700 bg-white px-7 py-4 ring-2 ring-black hover:mt-1 hover:border-b-4 hover:border-red-700 hover:bg-neutral-100 [&:active:not(:has(input:hover,button:hover))]:border-b-0 [&:active:not(:has(input:hover,button:hover))]:border-t-4"
+      className="relative z-10 flex w-[70vw] cursor-pointer flex-row items-center gap-4 rounded-xl border-b-8 border-red-700 bg-white px-7 py-4 ring-2 ring-black hover:mt-1 hover:border-b-4 hover:border-red-700 hover:bg-neutral-100 dark:bg-[#262525] [&:active:not(:has(input:hover,button:hover))]:border-b-0 [&:active:not(:has(input:hover,button:hover))]:border-t-4"
       onClick={goToPlan}
       role="link"
     >
@@ -48,12 +48,14 @@ export default function SavedPlan({ plan, onPin, onDelete }: PlanDisplayProps) {
         src="/images/blackpaw.svg"
         width={64}
         height={64}
-        className="size-8"
+        className="size-8 dark:invert"
         alt="black paw"
       />
 
       {/* Plan title */}
-      <h2 className="flex-1 text-2xl font-bold text-black">{plan.title}</h2>
+      <h2 className="flex-1 text-2xl font-bold text-black dark:text-white">
+        {plan.title}
+      </h2>
 
       {/* Pin button (gives a saved plan priority over others*/}
       <button type="button" className="cursor-default" onClick={handlePin}>
diff --git a/frontend/src/components/schedules/DayClass.tsx b/frontend/src/components/schedules/DayClass.tsx
index a100f385..255ea29d 100644
--- a/frontend/src/components/schedules/DayClass.tsx
+++ b/frontend/src/components/schedules/DayClass.tsx
@@ -196,10 +196,10 @@ function CourseInfo({
 
   return (
     <div
-      className={`fixed inset-0 z-40 flex items-center justify-center bg-white bg-opacity-50`}
+      className={`fixed inset-0 z-[100] flex items-center justify-center bg-white bg-opacity-50 dark:bg-black dark:bg-opacity-50`}
     >
       <div
-        className={`relative flex flex-col rounded-lg bg-white ${outerBorder}`}
+        className={`relative flex flex-col rounded-lg bg-white dark:bg-dm-dark-gray ${outerBorder}`}
         style={{
           width,
           height,
@@ -208,7 +208,7 @@ function CourseInfo({
         }}
       >
         {/* Header: Course name and CRN */}
-        <div className={`relative z-50 ${bgColor} rounded-lg p-8`}>
+        <div className={`relative z-[100] ${bgColor} rounded-lg p-8`}>
           <div className="text-right font-bold text-white/90">
             <p>CRN: {crn}</p>
           </div>
@@ -265,73 +265,73 @@ function CourseInfo({
             </p>
             <br></br>
             <div className="items-center overflow-x-auto">
-              <table className="w-full table-auto border border-black">
+              <table className="w-full table-auto border border-black dark:border-white">
                 <thead>
                   <tr>
-                    <th className="border border-black p-2 text-center underline">
+                    <th className="border border-black p-2 text-center underline dark:border-white">
                       Day
                     </th>
-                    <th className="border border-black p-2 text-center underline">
+                    <th className="border border-black p-2 text-center underline dark:border-white">
                       Time
                     </th>
-                    <th className="border border-black p-2 text-center underline">
+                    <th className="border border-black p-2 text-center underline dark:border-white">
                       Location
                     </th>
                   </tr>
                 </thead>
                 <tbody>
                   <tr>
-                    <td className="border border-black p-2 text-center font-bold">
+                    <td className="border border-black p-2 text-center font-bold dark:border-white">
                       Monday
                     </td>
-                    <td className="border border-black p-2 text-center">
+                    <td className="border border-black p-2 text-center dark:border-white">
                       {weekInfo[0]}
                     </td>
-                    <td className="border border-black p-2 text-center">
+                    <td className="border border-black p-2 text-center dark:border-white">
                       {weekInfo[1]}
                     </td>
                   </tr>
                   <tr>
-                    <td className="border border-black p-2 text-center font-bold">
+                    <td className="border border-black p-2 text-center font-bold dark:border-white">
                       Tuesday
                     </td>
-                    <td className="border border-black p-2 text-center">
+                    <td className="border border-black p-2 text-center dark:border-white">
                       {weekInfo[2]}
                     </td>
-                    <td className="border border-black p-2 text-center">
+                    <td className="border border-black p-2 text-center dark:border-white">
                       {weekInfo[3]}
                     </td>
                   </tr>
                   <tr>
-                    <td className="border border-black p-2 text-center font-bold">
+                    <td className="border border-black p-2 text-center font-bold dark:border-white">
                       Wednesday
                     </td>
-                    <td className="border border-black p-2 text-center">
+                    <td className="border border-black p-2 text-center dark:border-white">
                       {weekInfo[4]}
                     </td>
-                    <td className="border border-black p-2 text-center">
+                    <td className="border border-black p-2 text-center dark:border-white">
                       {weekInfo[5]}
                     </td>
                   </tr>
                   <tr>
-                    <td className="border border-black p-2 text-center font-bold">
+                    <td className="border border-black p-2 text-center font-bold dark:border-white">
                       Thursday
                     </td>
-                    <td className="border border-black p-2 text-center">
+                    <td className="border border-black p-2 text-center dark:border-white">
                       {weekInfo[6]}
                     </td>
-                    <td className="border border-black p-2 text-center">
+                    <td className="border border-black p-2 text-center dark:border-white">
                       {weekInfo[7]}
                     </td>
                   </tr>
                   <tr>
-                    <td className="border border-black p-2 text-center font-bold">
+                    <td className="border border-black p-2 text-center font-bold dark:border-white">
                       Friday
                     </td>
-                    <td className="border border-black p-2 text-center">
+                    <td className="border border-black p-2 text-center dark:border-white">
                       {weekInfo[8]}
                     </td>
-                    <td className="border border-black p-2 text-center">
+                    <td className="border border-black p-2 text-center dark:border-white">
                       {weekInfo[9]}
                     </td>
                   </tr>
diff --git a/frontend/src/components/schedules/ScheduleDisplay.tsx b/frontend/src/components/schedules/ScheduleDisplay.tsx
index 4e514e95..9c06e480 100644
--- a/frontend/src/components/schedules/ScheduleDisplay.tsx
+++ b/frontend/src/components/schedules/ScheduleDisplay.tsx
@@ -71,7 +71,7 @@ export default function ScheduleDisplay({ id }: Props) {
   return (
     <div className="mx-auto min-h-screen w-[100%]">
       {/* Container for schedule display, schedule cycling, and save/exit buttons */}
-      <div className="z-1 ml-auto mr-auto flex h-[85vh] w-[90vw] flex-col rounded-lg border-2 border-black bg-barely-pink pt-2">
+      <div className="z-1 ml-auto mr-auto flex h-[85vh] w-[90vw] flex-col overflow-hidden rounded-lg border-2 border-black bg-barely-pink pt-2 dark:bg-dm-mid-gray">
         {/* Properly positions the cycling bar and the save/exit buttons */}
         <div className="flex flex-row items-center justify-between px-12 py-2">
           <button type="button" className="cursor-default" onClick={pinPlan}>
@@ -83,10 +83,10 @@ export default function ScheduleDisplay({ id }: Props) {
           </button>
 
           {/* Cycling bar; changes the displayed schedule when arrows are clicked */}
-          <div className="flex flex-row items-center justify-center gap-0.5 rounded-lg bg-white">
+          <div className="flex flex-row items-center justify-center gap-0.5 rounded-lg bg-white dark:bg-black">
             {savedPlans.length > 1 && (
               <Link
-                className="rounded-l-lg border-2 border-white bg-white px-2 py-1 text-2xl transition-colors hover:border-gray-400 hover:bg-gray-100"
+                className="rounded-l-lg border-2 border-white bg-white px-2 py-1 text-2xl transition-colors hover:border-gray-400 hover:bg-gray-100 dark:border-black dark:bg-black dark:hover:border-gray-600 dark:hover:bg-gray-900"
                 href={`/plans/${savedPlans[(currentPlanIndex + savedPlans.length - 1) % savedPlans.length]!.id}`}
                 title={
                   savedPlans[
@@ -100,7 +100,7 @@ export default function ScheduleDisplay({ id }: Props) {
             )}
 
             <input
-              className="rounded-sm border-2 border-white pb-px pt-0.5 text-center text-xl font-semibold hover:border-gray-500 focus:border-gray-300"
+              className="rounded-sm border-2 border-white pb-px pt-0.5 text-center text-xl font-semibold hover:border-gray-500 focus:border-gray-300 dark:border-black dark:bg-black dark:hover:border-gray-500"
               defaultValue={title}
               maxLength={32}
               onBlur={handleChangeTitle}
@@ -109,7 +109,7 @@ export default function ScheduleDisplay({ id }: Props) {
 
             {savedPlans.length > 1 && (
               <Link
-                className="rounded-r-lg border-2 border-white bg-white px-2 py-1 text-2xl transition-colors hover:border-gray-400 hover:bg-gray-100"
+                className="rounded-r-lg border-2 border-white bg-white px-2 py-1 text-2xl transition-colors hover:border-gray-400 hover:bg-gray-100 dark:border-black dark:bg-black dark:hover:border-gray-600 dark:hover:bg-gray-900"
                 href={`/plans/${savedPlans[(currentPlanIndex + 1) % savedPlans.length]!.id}`}
                 title={
                   savedPlans[(currentPlanIndex + 1) % savedPlans.length]!.title
diff --git a/frontend/src/components/schedules/WeekSchedule.tsx b/frontend/src/components/schedules/WeekSchedule.tsx
index d33053e8..ad33cbfe 100644
--- a/frontend/src/components/schedules/WeekSchedule.tsx
+++ b/frontend/src/components/schedules/WeekSchedule.tsx
@@ -186,9 +186,9 @@ export default function WeekSchedule({ weekData }: WeekScheduleProps) {
   }, []);
 
   return (
-    <div className="relative z-0 mx-auto w-screen max-w-[1800px] overflow-x-hidden px-4">
+    <div className="relative z-0 mx-auto w-screen max-w-[1800px] px-4">
       <button
-        className="absolute left-0 top-0 z-10 flex h-full w-8 rotate-180 items-center justify-between rounded-r-lg border-l-2 border-pink-900 bg-pink-50 py-4 text-center font-bold text-pink-900 transition-[left] [writing-mode:vertical-lr] 2xl:hidden [&:not([data-scroll-target])]:-left-8"
+        className="absolute left-0 top-0 z-10 flex h-full w-8 rotate-180 items-center justify-between rounded-r-lg border-l-2 border-pink-900 bg-pink-50 py-4 text-center font-bold text-pink-900 transition-[left] [writing-mode:vertical-lr] dark:border-white dark:bg-[#969696] dark:text-white 2xl:hidden [&:not([data-scroll-target])]:-left-8"
         data-scroll-target={prev}
         onClick={scrollLeft}
         type="button"
@@ -200,7 +200,7 @@ export default function WeekSchedule({ weekData }: WeekScheduleProps) {
 
       {/* Viewport of schedule display */}
       <section
-        className="grid h-[750px] w-full snap-x snap-mandatory grid-cols-[1rem_repeat(5,calc((100%-1rem)/var(--cols)))] overflow-x-auto scroll-smooth rounded-lg bg-pink-200/50 py-4 [--cols:1] sm:[--cols:2] md:overflow-hidden lg:[--cols:3] xl:[--cols:4] 2xl:[--cols:5]"
+        className="grid h-[750px] w-full snap-x snap-mandatory grid-cols-[1rem_repeat(5,calc((100%-1rem)/var(--cols)))] overflow-x-auto scroll-smooth rounded-lg bg-pink-200/50 py-4 [--cols:1] dark:bg-dm-mid-gray sm:[--cols:2] md:overflow-hidden lg:[--cols:3] xl:[--cols:4] 2xl:[--cols:5]"
         ref={scrollportRef}
       >
         <div />
@@ -208,9 +208,9 @@ export default function WeekSchedule({ weekData }: WeekScheduleProps) {
         {Object.entries(weekData).map(([day, classes]) => (
           <div className="snap-end snap-always pr-4" data-title={day} key={day}>
             {/* One day's schedule */}
-            <article className="flex h-full w-full flex-col gap-4 rounded-xl bg-white px-0 py-0">
+            <article className="flex h-full w-full flex-col gap-4 rounded-xl bg-white px-0 py-0 dark:bg-[#343434]">
               {/* Day label */}
-              <h2 className="text rounded-lg bg-[#222233] px-4 py-3 text-center text-xl font-bold text-white">
+              <h2 className="text rounded-lg bg-[#222233] px-4 py-3 text-center text-xl font-bold text-white dark:bg-black">
                 {day}
               </h2>
               {/* Class list */}
@@ -240,7 +240,7 @@ export default function WeekSchedule({ weekData }: WeekScheduleProps) {
       </section>
 
       <button
-        className="absolute right-0 top-0 z-10 flex h-full w-8 items-center justify-between rounded-r-lg border-l-2 border-pink-900 bg-pink-50 py-4 text-center font-bold text-pink-900 transition-[right] [writing-mode:vertical-rl] 2xl:hidden [&:not([data-scroll-target])]:-right-8"
+        className="absolute right-0 top-0 z-10 flex h-full w-8 items-center justify-between rounded-r-lg border-l-2 border-pink-900 bg-pink-50 py-4 text-center font-bold text-pink-900 transition-[right] [writing-mode:vertical-rl] dark:border-white dark:bg-[#969696] dark:text-white 2xl:hidden [&:not([data-scroll-target])]:-right-8"
         data-scroll-target={next}
         onClick={scrollRight}
         type="button"
diff --git a/frontend/src/components/ui/Combobox.tsx b/frontend/src/components/ui/Combobox.tsx
index b0342918..924770ac 100644
--- a/frontend/src/components/ui/Combobox.tsx
+++ b/frontend/src/components/ui/Combobox.tsx
@@ -262,7 +262,7 @@ export default function Combobox({
         data-loading={disabled !== true && options === undefined}
         asChild
       >
-        <button className="flex w-full cursor-default items-center gap-6 rounded-md border-2 border-limestone bg-white px-3 py-1.5 transition-[box-shadow,border-color] disabled:cursor-not-allowed disabled:opacity-60 data-[state=open]:pointer-events-none data-[loading=true]:cursor-wait [&:not(:disabled):hover]:border-pebble-gray [&:not(:disabled):hover]:shadow-sm">
+        <button className="flex w-full cursor-default items-center gap-6 rounded-md border-2 border-limestone bg-white px-3 py-1.5 transition-[box-shadow,border-color] disabled:cursor-not-allowed disabled:opacity-60 data-[state=open]:pointer-events-none data-[loading=true]:cursor-wait dark:border-[#a9999c] dark:bg-[#c7c7c7] dark:text-[#525252] [&:not(:disabled):hover]:border-pebble-gray [&:not(:disabled):hover]:shadow-sm dark:[&:not(:disabled):hover]:border-white dark:[&:not(:disabled):hover]:shadow-sm">
           <select
             className="peer pointer-events-none hidden flex-1 appearance-none bg-transparent has-[option:checked]:block"
             tabIndex={-1}
@@ -286,7 +286,7 @@ export default function Combobox({
       </Popover.Trigger>
 
       <Popover.Portal>
-        <Popover.Content className="-mt-[var(--radix-popover-trigger-height)] flex max-h-56 w-[var(--radix-popover-trigger-width)] max-w-[calc(100dvw-1rem)] flex-col gap-1 rounded-md border-2 border-pebble-gray bg-white px-1 py-1 shadow-lg">
+        <Popover.Content className="-mt-[var(--radix-popover-trigger-height)] flex max-h-56 w-[var(--radix-popover-trigger-width)] max-w-[calc(100dvw-1rem)] flex-col gap-1 rounded-md border-2 border-pebble-gray bg-white px-1 py-1 shadow-lg dark:bg-[#c7c7c7]">
           <label className="peer flex w-full items-center gap-2 rounded-sm bg-neutral-100 px-2 py-1">
             <PiMagnifyingGlass className="text-neutral-700" />
             <input
@@ -299,12 +299,12 @@ export default function Combobox({
           </label>
 
           <fieldset
-            className="relative flex max-h-[140px] snap-y snap-mandatory flex-col gap-1 overflow-y-auto"
+            className="relative flex max-h-[140px] snap-y snap-mandatory flex-col gap-1 overflow-y-auto dark:text-[#525252]"
             ref={fieldset}
           >
             {filteredOptions.map(({ value, content }) => (
               <label
-                className="flex snap-start items-center gap-2 rounded-sm py-1 pr-2 has-[:checked]:font-medium data-[active=true]:bg-limestone"
+                className="flex snap-start items-center gap-2 rounded-sm py-1 pr-2 has-[:checked]:font-medium data-[active=true]:bg-limestone dark:data-[active=true]:bg-neutral-200"
                 data-active={highlighted === value}
                 key={value}
                 onMouseEnter={() => setHighlighted(value)}
diff --git a/frontend/src/components/ui/DeletePlan.tsx b/frontend/src/components/ui/DeletePlan.tsx
index 93624806..cd045614 100644
--- a/frontend/src/components/ui/DeletePlan.tsx
+++ b/frontend/src/components/ui/DeletePlan.tsx
@@ -15,9 +15,9 @@ export default function DeletePlan({
 }: DeletePlanProps) {
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
-      <div className="rounded-lg border-2 border-black bg-barely-pink p-5">
+      <div className="rounded-lg border-2 border-black bg-barely-pink p-5 dark:bg-dm-dark-gray">
         <div className="flex flex-col items-center">
-          <h2 className="mb-4 text-xl text-black">
+          <h2 className="mb-4 text-xl text-black dark:text-white">
             Are you sure you want to delete the plan {planTitle}?
           </h2>
           <div className="flex flex-row space-x-4">
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index c98fa292..8d90a7e5 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -20,6 +20,7 @@ export default {
         "pebble-gray": "hsl(var(--pebble-gray))",
         "dm-light-gray": "#6b6b6b",
         "dm-dark-gray": "#282828",
+        "dm-mid-gray": "#434343",
         limestone: "hsl(var(--limestone))",
         "baby-blue": "hsl(var(--baby-blue))",
         "lake-herrick": "hsl(var(--lake-herrick))",