From 380510e307f6317e1a2ec396d3f3fb7a95afe99f Mon Sep 17 00:00:00 2001
From: saltedtea <talhakashif.dev@gmail.com>
Date: Sat, 30 Sep 2023 12:42:17 +0500
Subject: [PATCH 1/4] Added Dark Mode

---
 app/src/components/CourseDisplay.tsx   |  6 +++---
 app/src/components/ScheduleBuilder.tsx | 21 ++++++++++++++++++---
 app/src/components/SectionDisplay.tsx  |  4 ++--
 app/src/index.css                      |  5 +++++
 app/tailwind.config.js                 |  3 ++-
 5 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/app/src/components/CourseDisplay.tsx b/app/src/components/CourseDisplay.tsx
index b17976b..eb0301c 100644
--- a/app/src/components/CourseDisplay.tsx
+++ b/app/src/components/CourseDisplay.tsx
@@ -20,19 +20,19 @@ export default function CourseDisplay(props: Props) {
                 <div className="m-1">
                     <div className="w-full p-2 rounded-lg shadow-sm shadow-slate-400">
                         {/* Course Code & Name */}
-                        <p className="text-slate-700 underline">
+                        <p className="text-slate-700 dark:text-white underline">
                             <b>{props.course.code}</b> {props.course.name}
                         </p>
 
                         {/* Description */}
                         <div className="mx-2">
-                            <p className="text-slate-700 text-sm">
+                            <p className="text-slate-700 dark:text-white text-sm">
                                 {props.course.description}
                             </p>
                         </div>
 
                         {/* Additional Information */}
-                        <div className={"text-center text-slate-700 text-xs"}>
+                        <div className={"text-center text-slate-700 dark:text-white text-xs"}>
                             <i>({props.course.credits.display} Credits)</i>
                         </div>
                     </div>
diff --git a/app/src/components/ScheduleBuilder.tsx b/app/src/components/ScheduleBuilder.tsx
index c3f97d5..a0e3716 100644
--- a/app/src/components/ScheduleBuilder.tsx
+++ b/app/src/components/ScheduleBuilder.tsx
@@ -26,6 +26,7 @@ interface States {
     selections: Selection[];
     schedules: Schedule[];
     showAddCourse: boolean;
+    darkMode: boolean; // Added dark mode state
 }
 
 const defaultState: States = {
@@ -36,6 +37,7 @@ const defaultState: States = {
     selections: getDefaultSelections(),
     schedules: [],
     showAddCourse: false,
+    darkMode: false, // Initialized dark mode state as false
 };
 
 export default class ScheduleBuilder extends Component<Props, States> {
@@ -168,6 +170,11 @@ export default class ScheduleBuilder extends Component<Props, States> {
         this.setState({ selections: newSelections });
     }
 
+    // Toggle dark mode method
+    toggleDarkMode = () => {
+        this.setState((prevState) => ({ darkMode: !prevState.darkMode }));
+    }
+
     render() {
         // Show loading screen if filters/terms haven't been fetched yet
         if (this.state.filters === null)
@@ -185,10 +192,10 @@ export default class ScheduleBuilder extends Component<Props, States> {
             );
 
         return (
-            <div className="min-h-screen flex flex-col h-screen p-3">
+            <div className={`min-h-screen flex flex-col h-screen p-3 ${this.state.darkMode ? 'dark' : ''}`}>
                 {/* Title & Term Selector */}
                 <div className="flex">
-                    <p className="text-2xl text-slate-700 inline-block">
+                    <p className="text-2xl text-slate-700 dark:text-slate-100 inline-block">
                         🐊 Swamp Scheduler 📆
                     </p>
 
@@ -230,10 +237,18 @@ export default class ScheduleBuilder extends Component<Props, States> {
                             </option>
                         ))}
                     </select>
+                    <button
+                    onClick={this.toggleDarkMode}
+                    className="bg-sky-500 hover:bg-sky-400 border border-blue-300 text-white text-sm rounded-lg p-2.5 mr-1 text-center"
+                >
+                    Toggle Dark Mode
+                </button>
                 </div>
 
                 <hr className="my-1.5"></hr>
 
+                
+
                 {/* Main of Builder */}
                 <main className="flex flex-row overflow-y-hidden h-full p-1">
                     {/* Picker */}
@@ -266,4 +281,4 @@ export default class ScheduleBuilder extends Component<Props, States> {
             </div>
         );
     }
-}
+}
\ No newline at end of file
diff --git a/app/src/components/SectionDisplay.tsx b/app/src/components/SectionDisplay.tsx
index 565f700..25e3e23 100644
--- a/app/src/components/SectionDisplay.tsx
+++ b/app/src/components/SectionDisplay.tsx
@@ -47,7 +47,7 @@ export default function SectionDisplay({
                 {" "}
                 {/* SECTION */}
                 <div className="w-full p-2 rounded-lg shadow-sm shadow-slate-400">
-                    <div className={"text-slate-600 flex justify-between"}>
+                    <div className={"text-slate-600 dark:text-white flex justify-between"}>
                         <div className={"flex items-center gap-1"}>
                             <b>{section.number}</b>
                             <span className={"text-xs align-middle"}>
@@ -65,7 +65,7 @@ export default function SectionDisplay({
                         </button>
                     </div>
 
-                    <div className={"text-slate-400"}>
+                    <div className={"text-slate-400 dark:text-white"}>
                         <p className={"flex items-center gap-1"}>
                             {section.deptControlled && (
                                 <abbr title={"Departmentally Controlled"}>
diff --git a/app/src/index.css b/app/src/index.css
index b5c61c9..601141f 100644
--- a/app/src/index.css
+++ b/app/src/index.css
@@ -1,3 +1,8 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.dark {
+    background-color: #1a1a1a;
+    color: #ffffff;
+}
\ No newline at end of file
diff --git a/app/tailwind.config.js b/app/tailwind.config.js
index 0b5a598..cf225d1 100644
--- a/app/tailwind.config.js
+++ b/app/tailwind.config.js
@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
-export default {
+module.exports = {
     content: ["./src/**/*.{js,jsx,ts,tsx}"],
+    darkMode: "class",
     theme: {
         extend: {},
     },

From b12f6d1c140331a4465b18bb5c883aed3bce1edb Mon Sep 17 00:00:00 2001
From: saltedtea <talhakashif.dev@gmail.com>
Date: Mon, 9 Oct 2023 02:42:55 +0500
Subject: [PATCH 2/4] Changes to Dark Mode

---
 app/src/components/CourseDisplay.tsx          |  6 +--
 .../components/MultipleScheduleDisplay.tsx    |  4 +-
 app/src/components/ScheduleBuilder.tsx        | 25 +++---------
 app/src/components/SectionDisplay.tsx         |  2 +-
 app/src/components/SectionPicker.tsx          |  6 +--
 app/src/components/SelectionDisplay.tsx       |  2 +-
 app/src/components/ThemeToggle.tsx            | 39 +++++++++++++++++++
 app/src/index.css                             | 10 +++--
 8 files changed, 61 insertions(+), 33 deletions(-)
 create mode 100644 app/src/components/ThemeToggle.tsx

diff --git a/app/src/components/CourseDisplay.tsx b/app/src/components/CourseDisplay.tsx
index eb0301c..3792a64 100644
--- a/app/src/components/CourseDisplay.tsx
+++ b/app/src/components/CourseDisplay.tsx
@@ -20,19 +20,19 @@ export default function CourseDisplay(props: Props) {
                 <div className="m-1">
                     <div className="w-full p-2 rounded-lg shadow-sm shadow-slate-400">
                         {/* Course Code & Name */}
-                        <p className="text-slate-700 dark:text-white underline">
+                        <p className="text-slate-700 underline dark:text-white">
                             <b>{props.course.code}</b> {props.course.name}
                         </p>
 
                         {/* Description */}
                         <div className="mx-2">
-                            <p className="text-slate-700 dark:text-white text-sm">
+                            <p className="text-slate-700 text-sm dark:text-white">
                                 {props.course.description}
                             </p>
                         </div>
 
                         {/* Additional Information */}
-                        <div className={"text-center text-slate-700 dark:text-white text-xs"}>
+                        <div className={"text-center text-slate-700 text-xs dark:text-white"}>
                             <i>({props.course.credits.display} Credits)</i>
                         </div>
                     </div>
diff --git a/app/src/components/MultipleScheduleDisplay.tsx b/app/src/components/MultipleScheduleDisplay.tsx
index 13472c4..28d6251 100644
--- a/app/src/components/MultipleScheduleDisplay.tsx
+++ b/app/src/components/MultipleScheduleDisplay.tsx
@@ -16,7 +16,7 @@ export default function MultipleScheduleDisplay(props: Props) {
     const schedulesToShow = props.schedules.slice(0, maxSchedulesToShow);
     return (
         <div>
-            <p className={"text-center"}>
+            <p className={"text-center dark:text-white"}>
                 <b>
                     <u>{props.schedules.length.toLocaleString()}</u> Schedules
                     Generated
@@ -25,7 +25,7 @@ export default function MultipleScheduleDisplay(props: Props) {
 
             {schedulesToShow.map((schedule: Schedule, s) => (
                 <div key={s}>
-                    <u>Schedule #{s + 1}</u>
+                    <u className={"dark:text-white"}>Schedule #{s + 1}</u>
                     <ScheduleDisplay schedule={schedule} />
                 </div>
             ))}
diff --git a/app/src/components/ScheduleBuilder.tsx b/app/src/components/ScheduleBuilder.tsx
index a0e3716..56d79e3 100644
--- a/app/src/components/ScheduleBuilder.tsx
+++ b/app/src/components/ScheduleBuilder.tsx
@@ -6,6 +6,7 @@ import {
     Selection,
 } from "@scripts/scheduleGenerator";
 import SectionPicker from "@components/SectionPicker";
+import ThemeToggle from "./ThemeToggle";
 import MultipleSelectionDisplay from "@components/MultipleSelectionDisplay";
 import MultipleScheduleDisplay from "@components/MultipleScheduleDisplay";
 import { UF_SOC_API } from "@scripts/api";
@@ -26,7 +27,6 @@ interface States {
     selections: Selection[];
     schedules: Schedule[];
     showAddCourse: boolean;
-    darkMode: boolean; // Added dark mode state
 }
 
 const defaultState: States = {
@@ -37,7 +37,6 @@ const defaultState: States = {
     selections: getDefaultSelections(),
     schedules: [],
     showAddCourse: false,
-    darkMode: false, // Initialized dark mode state as false
 };
 
 export default class ScheduleBuilder extends Component<Props, States> {
@@ -170,11 +169,6 @@ export default class ScheduleBuilder extends Component<Props, States> {
         this.setState({ selections: newSelections });
     }
 
-    // Toggle dark mode method
-    toggleDarkMode = () => {
-        this.setState((prevState) => ({ darkMode: !prevState.darkMode }));
-    }
-
     render() {
         // Show loading screen if filters/terms haven't been fetched yet
         if (this.state.filters === null)
@@ -192,10 +186,10 @@ export default class ScheduleBuilder extends Component<Props, States> {
             );
 
         return (
-            <div className={`min-h-screen flex flex-col h-screen p-3 ${this.state.darkMode ? 'dark' : ''}`}>
+            <div className="min-h-screen flex flex-col h-screen p-3">
                 {/* Title & Term Selector */}
                 <div className="flex">
-                    <p className="text-2xl text-slate-700 dark:text-slate-100 inline-block">
+                    <p className="text-2xl text-slate-700 inline-block dark:text-white">
                         🐊 Swamp Scheduler 📆
                     </p>
 
@@ -203,7 +197,7 @@ export default class ScheduleBuilder extends Component<Props, States> {
 
                     <select
                         id="term"
-                        className="bg-sky-500 hover:bg-sky-400 border border-blue-300 text-white text-sm rounded-lg p-2.5 mr-1 text-center"
+                        className="bg-sky-500 hover:bg-sky-400 border border-blue-300 text-white text-sm rounded-lg p-2.5 mr-1 text-center dark:border-transparent"
                         defaultValue={this.state.soc.info.termStr}
                         onChange={(e) =>
                             this.setSOC(e.target.value, defaultProgram)
@@ -224,7 +218,7 @@ export default class ScheduleBuilder extends Component<Props, States> {
 
                     <select
                         id="limit"
-                        className="bg-sky-500 hover:bg-sky-400 border border-blue-300 text-white text-sm rounded-lg p-2.5 mr-1 text-center"
+                        className="bg-sky-500 hover:bg-sky-400 border border-blue-300 text-white text-sm rounded-lg p-2.5 mr-1 text-center dark:border-transparent"
                         defaultValue={this.state.limit}
                         onChange={(e) =>
                             this.setState({ limit: Number(e.target.value) })
@@ -237,18 +231,11 @@ export default class ScheduleBuilder extends Component<Props, States> {
                             </option>
                         ))}
                     </select>
-                    <button
-                    onClick={this.toggleDarkMode}
-                    className="bg-sky-500 hover:bg-sky-400 border border-blue-300 text-white text-sm rounded-lg p-2.5 mr-1 text-center"
-                >
-                    Toggle Dark Mode
-                </button>
+                    <ThemeToggle />
                 </div>
 
                 <hr className="my-1.5"></hr>
 
-                
-
                 {/* Main of Builder */}
                 <main className="flex flex-row overflow-y-hidden h-full p-1">
                     {/* Picker */}
diff --git a/app/src/components/SectionDisplay.tsx b/app/src/components/SectionDisplay.tsx
index 25e3e23..c90e194 100644
--- a/app/src/components/SectionDisplay.tsx
+++ b/app/src/components/SectionDisplay.tsx
@@ -47,7 +47,7 @@ export default function SectionDisplay({
                 {" "}
                 {/* SECTION */}
                 <div className="w-full p-2 rounded-lg shadow-sm shadow-slate-400">
-                    <div className={"text-slate-600 dark:text-white flex justify-between"}>
+                    <div className={"text-slate-600 flex justify-between dark:text-white"}>
                         <div className={"flex items-center gap-1"}>
                             <b>{section.number}</b>
                             <span className={"text-xs align-middle"}>
diff --git a/app/src/components/SectionPicker.tsx b/app/src/components/SectionPicker.tsx
index 7f2ffcc..6fc9caa 100644
--- a/app/src/components/SectionPicker.tsx
+++ b/app/src/components/SectionPicker.tsx
@@ -49,7 +49,7 @@ export default function SectionPicker(props: Props) {
                 <select
                     id={"search-by"}
                     className={
-                        "bg-sky-500 hover:bg-sky-400 border border-blue-300 text-white text-sm rounded-lg p-2.5 mr-1"
+                        "bg-sky-500 hover:bg-sky-400 border border-blue-300 text-white text-sm rounded-lg p-2.5 mr-1 dark:border-transparent focus:outline-none"
                     }
                     defaultValue={searchByString}
                     onChange={(e) => setSearchByString(e.target.value)}
@@ -68,7 +68,7 @@ export default function SectionPicker(props: Props) {
                     id={"search-text"}
                     type={"text"}
                     className={
-                        "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2.5 mb-0.5"
+                        "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2.5 mb-0.5 dark:border-transparent focus:outline-none"
                     }
                     placeholder={getSearchByStringExample(searchByString)}
                     value={searchText}
@@ -83,7 +83,7 @@ export default function SectionPicker(props: Props) {
 
                 <button
                     onClick={() => fetchCourses()}
-                    className="bg-sky-500 hover:bg-sky-400 border border-blue-300 text-white text-sm rounded-lg p-2.5 ml-1"
+                    className="bg-sky-500 hover:bg-sky-400 border border-blue-300 text-white text-sm rounded-lg p-2.5 ml-1 dark:border-transparent"
                 >
                     Search
                 </button>
diff --git a/app/src/components/SelectionDisplay.tsx b/app/src/components/SelectionDisplay.tsx
index 98d1bd5..a5414a5 100644
--- a/app/src/components/SelectionDisplay.tsx
+++ b/app/src/components/SelectionDisplay.tsx
@@ -32,7 +32,7 @@ export default function SelectionDisplay(props: Props) {
             <Droppable types={["uid"]} onDrop={doDrop}>
                 <div className="p-2 mx-1 mb-2 rounded-lg shadow-sm shadow-slate-400">
                     <div className={"flex justify-between"}>
-                        <u>Course {props.ind + 1}</u>
+                        <u className={"dark:text-white"}>Course {props.ind + 1}</u>
                         <button
                             className={"mx-1"}
                             onClick={() =>
diff --git a/app/src/components/ThemeToggle.tsx b/app/src/components/ThemeToggle.tsx
new file mode 100644
index 0000000..028b6c2
--- /dev/null
+++ b/app/src/components/ThemeToggle.tsx
@@ -0,0 +1,39 @@
+import { useState, useEffect } from "react";
+
+const ThemeToggle = () => {
+  const [theme, setTheme] = useState("light");
+
+  useEffect(() => {
+    // Check user's preferred color scheme
+    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+      setTheme("dark");
+    } else {
+      setTheme("light");
+    }
+  }, []);
+
+  useEffect(() => {
+    // Apply the selected theme to the HTML element
+    if (theme === "dark") {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
+  }, [theme]);
+
+  const handleThemeSwitch = () => {
+    // Toggle between dark and light themes
+    setTheme(theme === "dark" ? "light" : "dark");
+  };
+
+  return (
+      <button
+        className="bg-sky-500 hover:bg-sky-400 text-white text-sm rounded-lg p-2.5 mr-1 text-center"
+        onClick={handleThemeSwitch}
+      >
+        {theme === "dark" ? "Light Mode" : "Dark Mode"}
+      </button>
+  );
+};
+
+export default ThemeToggle;
diff --git a/app/src/index.css b/app/src/index.css
index 601141f..0b9703f 100644
--- a/app/src/index.css
+++ b/app/src/index.css
@@ -2,7 +2,9 @@
 @tailwind components;
 @tailwind utilities;
 
-.dark {
-    background-color: #1a1a1a;
-    color: #ffffff;
-}
\ No newline at end of file
+
+@media (prefers-color-scheme: dark) {
+    .dark {
+        background-color: #1a1a1a;
+    }
+  }
\ No newline at end of file

From 1d7fce9e7d369f29d0d764c233423f554c8116de Mon Sep 17 00:00:00 2001
From: saltedtea <talhakashif.dev@gmail.com>
Date: Thu, 12 Oct 2023 01:37:01 +0500
Subject: [PATCH 3/4] Changes to Dark Mode

---
 app/src/components/CourseDisplay.tsx            |  6 +++---
 app/src/components/MultipleScheduleDisplay.tsx  |  4 ++--
 app/src/components/MultipleSelectionDisplay.tsx |  2 +-
 app/src/components/ScheduleBuilder.tsx          |  4 ++--
 app/src/components/ScheduleDisplay.tsx          | 14 +++++++-------
 app/src/components/SectionDisplay.tsx           |  8 ++++----
 app/src/components/SectionPicker.tsx            |  4 ++--
 app/src/components/SelectionDisplay.tsx         |  6 +++---
 app/src/components/ThemeToggle.tsx              |  2 +-
 app/src/constants/frontend.ts                   | 14 +++++++-------
 app/src/index.css                               |  4 ++++
 11 files changed, 36 insertions(+), 32 deletions(-)

diff --git a/app/src/components/CourseDisplay.tsx b/app/src/components/CourseDisplay.tsx
index 3792a64..9dca973 100644
--- a/app/src/components/CourseDisplay.tsx
+++ b/app/src/components/CourseDisplay.tsx
@@ -18,7 +18,7 @@ export default function CourseDisplay(props: Props) {
             {/* COURSE INFORMATION */}
             <Draggable type={"uid"} data={props.course.uid}>
                 <div className="m-1">
-                    <div className="w-full p-2 rounded-lg shadow-sm shadow-slate-400">
+                    <div className="w-full p-2 rounded-lg shadow-sm shadow-slate-400 dark:shadow-slate-950">
                         {/* Course Code & Name */}
                         <p className="text-slate-700 underline dark:text-white">
                             <b>{props.course.code}</b> {props.course.name}
@@ -26,13 +26,13 @@ export default function CourseDisplay(props: Props) {
 
                         {/* Description */}
                         <div className="mx-2">
-                            <p className="text-slate-700 text-sm dark:text-white">
+                            <p className="text-slate-700 text-sm dark:text-slate-200">
                                 {props.course.description}
                             </p>
                         </div>
 
                         {/* Additional Information */}
-                        <div className={"text-center text-slate-700 text-xs dark:text-white"}>
+                        <div className={"text-center text-slate-700 text-xs dark:text-slate-200"}>
                             <i>({props.course.credits.display} Credits)</i>
                         </div>
                     </div>
diff --git a/app/src/components/MultipleScheduleDisplay.tsx b/app/src/components/MultipleScheduleDisplay.tsx
index 28d6251..13472c4 100644
--- a/app/src/components/MultipleScheduleDisplay.tsx
+++ b/app/src/components/MultipleScheduleDisplay.tsx
@@ -16,7 +16,7 @@ export default function MultipleScheduleDisplay(props: Props) {
     const schedulesToShow = props.schedules.slice(0, maxSchedulesToShow);
     return (
         <div>
-            <p className={"text-center dark:text-white"}>
+            <p className={"text-center"}>
                 <b>
                     <u>{props.schedules.length.toLocaleString()}</u> Schedules
                     Generated
@@ -25,7 +25,7 @@ export default function MultipleScheduleDisplay(props: Props) {
 
             {schedulesToShow.map((schedule: Schedule, s) => (
                 <div key={s}>
-                    <u className={"dark:text-white"}>Schedule #{s + 1}</u>
+                    <u>Schedule #{s + 1}</u>
                     <ScheduleDisplay schedule={schedule} />
                 </div>
             ))}
diff --git a/app/src/components/MultipleSelectionDisplay.tsx b/app/src/components/MultipleSelectionDisplay.tsx
index f0037f9..4ae64a0 100644
--- a/app/src/components/MultipleSelectionDisplay.tsx
+++ b/app/src/components/MultipleSelectionDisplay.tsx
@@ -29,7 +29,7 @@ export default function MultipleSelectionDisplay(props: Props) {
             <div>{selectionDisplays}</div>
             {/* TODO: reconsider all these classes */}
             <button
-                className="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded w-full"
+                className="dark:text-sky-700 dark:border-sky-700 dark:hover:bg-sky-700 dark:hover:text-white bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded w-full "
                 onClick={() => {
                     props.newSelection();
                 }}
diff --git a/app/src/components/ScheduleBuilder.tsx b/app/src/components/ScheduleBuilder.tsx
index 56d79e3..b6b75c3 100644
--- a/app/src/components/ScheduleBuilder.tsx
+++ b/app/src/components/ScheduleBuilder.tsx
@@ -197,7 +197,7 @@ export default class ScheduleBuilder extends Component<Props, States> {
 
                     <select
                         id="term"
-                        className="bg-sky-500 hover:bg-sky-400 border border-blue-300 text-white text-sm rounded-lg p-2.5 mr-1 text-center dark:border-transparent"
+                        className="bg-sky-500 hover:bg-sky-400 border border-blue-300 text-white text-sm rounded-lg p-2.5 mr-1 text-center dark:border-transparent dark:bg-sky-700"
                         defaultValue={this.state.soc.info.termStr}
                         onChange={(e) =>
                             this.setSOC(e.target.value, defaultProgram)
@@ -218,7 +218,7 @@ export default class ScheduleBuilder extends Component<Props, States> {
 
                     <select
                         id="limit"
-                        className="bg-sky-500 hover:bg-sky-400 border border-blue-300 text-white text-sm rounded-lg p-2.5 mr-1 text-center dark:border-transparent"
+                        className="bg-sky-500 hover:bg-sky-400 border border-blue-300 text-white text-sm rounded-lg p-2.5 mr-1 text-center dark:border-transparent dark:bg-sky-700"
                         defaultValue={this.state.limit}
                         onChange={(e) =>
                             this.setState({ limit: Number(e.target.value) })
diff --git a/app/src/components/ScheduleDisplay.tsx b/app/src/components/ScheduleDisplay.tsx
index cd6ccc7..8f895cd 100644
--- a/app/src/components/ScheduleDisplay.tsx
+++ b/app/src/components/ScheduleDisplay.tsx
@@ -119,7 +119,7 @@ export default class ScheduleDisplay extends Component<Props, States> {
                             className={classNames([
                                 "border-solid",
                                 "border-2",
-                                "border-gray-400",
+                                "border-gray-400 dark:border-transparent",
                                 color,
                                 "rounded",
                                 "whitespace-nowrap",
@@ -154,7 +154,7 @@ export default class ScheduleDisplay extends Component<Props, States> {
                             className={classNames([
                                 "border-solid",
                                 "border-2",
-                                "border-gray-400",
+                                "border-gray-400 dark:border-transparent",
                                 color,
                                 "rounded",
                                 "whitespace-nowrap",
@@ -187,7 +187,7 @@ export default class ScheduleDisplay extends Component<Props, States> {
                                 className={classNames([
                                     "border-solid",
                                     "border-2",
-                                    "border-gray-400",
+                                    "border-gray-400 dark:border-transparent",
                                     getSectionColor(s),
                                     "rounded",
                                     "text-center",
@@ -209,7 +209,7 @@ export default class ScheduleDisplay extends Component<Props, States> {
                                 .map((p) => (
                                     <div
                                         className={
-                                            "border-solid border-2 border-gray-400 bg-gray-200 rounded text-center w-full h-6 px-0.5 min-w-full"
+                                            "border-solid border-2 border-gray-400 bg-gray-200 dark:bg-gray-600 dark:border-transparent rounded text-center w-full h-6 px-0.5 min-w-full"
                                         }
                                     >
                                         <b>
@@ -224,7 +224,7 @@ export default class ScheduleDisplay extends Component<Props, States> {
                             {onlineSections.length > 0 && (
                                 <div
                                     className={
-                                        "border-solid border-2 border-gray-400 bg-gray-200 rounded text-center w-full h-6 px-0.5 min-w-full"
+                                        "border-solid border-2 border-gray-400 bg-gray-200 dark:bg-gray-600 dark:border-transparent rounded text-center w-full h-6 px-0.5 min-w-full"
                                     }
                                 >
                                     <div
@@ -232,7 +232,7 @@ export default class ScheduleDisplay extends Component<Props, States> {
                                             "flex items-center justify-center"
                                         }
                                     >
-                                        <GrPersonalComputer />️
+                                        <GrPersonalComputer className="grIcon"/>️
                                     </div>
                                 </div>
                             )}
@@ -252,7 +252,7 @@ export default class ScheduleDisplay extends Component<Props, States> {
                                                         className={classNames([
                                                             "border-solid",
                                                             "border-2",
-                                                            "border-gray-400",
+                                                            "border-gray-400 dark:border-transparent",
                                                             getSectionColor(
                                                                 ind,
                                                             ),
diff --git a/app/src/components/SectionDisplay.tsx b/app/src/components/SectionDisplay.tsx
index c90e194..59d6356 100644
--- a/app/src/components/SectionDisplay.tsx
+++ b/app/src/components/SectionDisplay.tsx
@@ -46,7 +46,7 @@ export default function SectionDisplay({
             <div className="m-1 text-sm">
                 {" "}
                 {/* SECTION */}
-                <div className="w-full p-2 rounded-lg shadow-sm shadow-slate-400">
+                <div className="w-full p-2 rounded-lg shadow-sm shadow-slate-400 dark:shadow-slate-950">
                     <div className={"text-slate-600 flex justify-between dark:text-white"}>
                         <div className={"flex items-center gap-1"}>
                             <b>{section.number}</b>
@@ -61,15 +61,15 @@ export default function SectionDisplay({
                                 handleRemove && handleRemove(section)
                             }
                         >
-                            <GrClose />
+                            <GrClose className="grIcon"/>
                         </button>
                     </div>
 
-                    <div className={"text-slate-400 dark:text-white"}>
+                    <div className={"text-slate-400 dark:text-slate-200"}>
                         <p className={"flex items-center gap-1"}>
                             {section.deptControlled && (
                                 <abbr title={"Departmentally Controlled"}>
-                                    <GrLock />
+                                    <GrLock className="grIcon"/>
                                 </abbr>
                             )}
                             {section.displayName}
diff --git a/app/src/components/SectionPicker.tsx b/app/src/components/SectionPicker.tsx
index 6fc9caa..46e52af 100644
--- a/app/src/components/SectionPicker.tsx
+++ b/app/src/components/SectionPicker.tsx
@@ -49,7 +49,7 @@ export default function SectionPicker(props: Props) {
                 <select
                     id={"search-by"}
                     className={
-                        "bg-sky-500 hover:bg-sky-400 border border-blue-300 text-white text-sm rounded-lg p-2.5 mr-1 dark:border-transparent focus:outline-none"
+                        "bg-sky-500 hover:bg-sky-400 border border-blue-300 text-white text-sm rounded-lg p-2.5 mr-1 dark:border-transparent dark:bg-sky-700 focus:outline-none"
                     }
                     defaultValue={searchByString}
                     onChange={(e) => setSearchByString(e.target.value)}
@@ -83,7 +83,7 @@ export default function SectionPicker(props: Props) {
 
                 <button
                     onClick={() => fetchCourses()}
-                    className="bg-sky-500 hover:bg-sky-400 border border-blue-300 text-white text-sm rounded-lg p-2.5 ml-1 dark:border-transparent"
+                    className="bg-sky-500 hover:bg-sky-400 border border-blue-300 text-white text-sm rounded-lg p-2.5 ml-1 dark:border-transparent dark:bg-sky-700"
                 >
                     Search
                 </button>
diff --git a/app/src/components/SelectionDisplay.tsx b/app/src/components/SelectionDisplay.tsx
index a5414a5..ebd7727 100644
--- a/app/src/components/SelectionDisplay.tsx
+++ b/app/src/components/SelectionDisplay.tsx
@@ -30,16 +30,16 @@ export default function SelectionDisplay(props: Props) {
     return (
         <div>
             <Droppable types={["uid"]} onDrop={doDrop}>
-                <div className="p-2 mx-1 mb-2 rounded-lg shadow-sm shadow-slate-400">
+                <div className="p-2 mx-1 mb-2 rounded-lg shadow-sm shadow-slate-400 dark:shadow-slate-950">
                     <div className={"flex justify-between"}>
-                        <u className={"dark:text-white"}>Course {props.ind + 1}</u>
+                        <u>Course {props.ind + 1}</u>
                         <button
                             className={"mx-1"}
                             onClick={() =>
                                 props.handleDeleteSelection(props.ind)
                             }
                         >
-                            <GrClose />
+                            <GrClose className="grIcon"/>
                         </button>
                     </div>
 
diff --git a/app/src/components/ThemeToggle.tsx b/app/src/components/ThemeToggle.tsx
index 028b6c2..77a9e5e 100644
--- a/app/src/components/ThemeToggle.tsx
+++ b/app/src/components/ThemeToggle.tsx
@@ -28,7 +28,7 @@ const ThemeToggle = () => {
 
   return (
       <button
-        className="bg-sky-500 hover:bg-sky-400 text-white text-sm rounded-lg p-2.5 mr-1 text-center"
+        className="bg-sky-500 hover:bg-sky-400 border border-blue-300 text-white text-sm rounded-lg p-2.5 mr-1 text-center dark:border-transparent dark:bg-sky-700"
         onClick={handleThemeSwitch}
       >
         {theme === "dark" ? "Light Mode" : "Dark Mode"}
diff --git a/app/src/constants/frontend.ts b/app/src/constants/frontend.ts
index 14dcfbf..7da9d65 100644
--- a/app/src/constants/frontend.ts
+++ b/app/src/constants/frontend.ts
@@ -1,11 +1,11 @@
 const sectionColors: string[] = [
-    "bg-red-200",
-    "bg-lime-200",
-    "bg-cyan-200",
-    "bg-fuchsia-200",
-    "bg-amber-200",
-    "bg-green-200",
-    "bg-orange-200",
+    "bg-red-200 dark:bg-red-500",
+    "bg-lime-200 dark:bg-lime-500",
+    "bg-cyan-200 dark:bg-cyan-500",
+    "bg-fuchsia-200 dark:bg-fuchsia-500",
+    "bg-amber-200 dark:bg-amber-500",
+    "bg-green-200 dark:bg-green-500",
+    "bg-orange-200 dark:bg-orange-500",
 ];
 
 export function getSectionColor(sectionInd: number): string {
diff --git a/app/src/index.css b/app/src/index.css
index 0b9703f..4d4a577 100644
--- a/app/src/index.css
+++ b/app/src/index.css
@@ -6,5 +6,9 @@
 @media (prefers-color-scheme: dark) {
     .dark {
         background-color: #1a1a1a;
+        color: #ffffff;
+    }
+    .grIcon path {
+        stroke: #ffffff;
     }
   }
\ No newline at end of file

From fc061e1051f13c4b3a4f9d339912b1ce39919e82 Mon Sep 17 00:00:00 2001
From: saltedtea <talhakashif.dev@gmail.com>
Date: Thu, 12 Oct 2023 01:44:23 +0500
Subject: [PATCH 4/4] Dark icon bug fix

---
 app/src/index.css | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/src/index.css b/app/src/index.css
index 4d4a577..5fb8ecf 100644
--- a/app/src/index.css
+++ b/app/src/index.css
@@ -2,13 +2,12 @@
 @tailwind components;
 @tailwind utilities;
 
-
 @media (prefers-color-scheme: dark) {
     .dark {
         background-color: #1a1a1a;
         color: #ffffff;
     }
-    .grIcon path {
+    .dark .grIcon path {
         stroke: #ffffff;
     }
   }
\ No newline at end of file