Dark Mode

app/src/components/CourseDisplay.tsx

@@ -18,21 +18,21 @@ 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">
+                        <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 text-sm">
+                            <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"}>
+                        <div className={"text-center text-slate-700 text-xs dark:text-slate-200"}>
                             <i>({props.course.credits.display} Credits)</i>
                         </div>
                     </div>

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();
                 }}

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";
@@ -188,15 +189,15 @@ export default class ScheduleBuilder extends Component<Props, States> {
             <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 inline-block">
+                    <p className="text-2xl text-slate-700 inline-block dark:text-white">
                         🐊 Swamp Scheduler 📆
                     </p>
 
                     <div className="grow"></div>
 
                     <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 dark:bg-sky-700"
                         defaultValue={this.state.soc.info.termStr}
                         onChange={(e) =>
                             this.setSOC(e.target.value, defaultProgram)
@@ -217,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 dark:bg-sky-700"
                         defaultValue={this.state.limit}
                         onChange={(e) =>
                             this.setState({ limit: Number(e.target.value) })
@@ -230,6 +231,7 @@ export default class ScheduleBuilder extends Component<Props, States> {
                             </option>
                         ))}
                     </select>
+                    <ThemeToggle />
                 </div>
 
                 <hr className="my-1.5"></hr>
@@ -266,4 +268,4 @@ export default class ScheduleBuilder extends Component<Props, States> {
             </div>
         );
     }
-}
+}

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,15 +224,15 @@ 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
                                         className={
                                             "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,
                                                             ),

app/src/components/SectionDisplay.tsx

@@ -46,8 +46,8 @@ 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={"text-slate-600 flex justify-between"}>
+                <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>
                             <span className={"text-xs align-middle"}>
@@ -61,15 +61,15 @@ export default function SectionDisplay({
                                 handleRemove && handleRemove(section)
                             }
                         >
-                            <GrClose />
+                            <GrClose className="grIcon"/>
                         </button>
                     </div>
 
-                    <div className={"text-slate-400"}>
+                    <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}

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 dark:bg-sky-700 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 dark:bg-sky-700"
                 >
                     Search
                 </button>

app/src/components/SelectionDisplay.tsx

@@ -30,7 +30,7 @@ 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>Course {props.ind + 1}</u>
                         <button
@@ -39,7 +39,7 @@ export default function SelectionDisplay(props: Props) {
                                 props.handleDeleteSelection(props.ind)
                             }
                         >
-                            <GrClose />
+                            <GrClose className="grIcon"/>
                         </button>
                     </div>
 

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 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"}
+      </button>
+  );
+};
+
+export default ThemeToggle;

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 {

app/src/index.css

@@ -1,3 +1,13 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@media (prefers-color-scheme: dark) {
+    .dark {
+        background-color: #1a1a1a;
+        color: #ffffff;
+    }
+    .dark .grIcon path {
+        stroke: #ffffff;
+    }
+  }

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: {},
     },