Added a dark mode (DONE) (#153)

* template colors but fully working and implemented

Author: Miles-Fritzmather

entrypoints/components/audit-card.tsx

@@ -32,8 +32,8 @@ const DegreeAuditCard: React.FC<DegreeAuditCardProps> = ({
     <div
       className={`relative rounded-[8px] px-4 py-[12px] w-full transition-all duration-200 cursor-pointer ${
         isSelected
-          ? "bg-[var(--color-dap-orange)] border border-[var(--color-dap-orange)]"
-          : "bg-[#FAFAF9] border border-[var(--color-dap-border)]"
+          ? "bg-dap-orange border border-dap-orange"
+          : "bg-background border border-dap-border"
       }`}
       onClick={() => {
         setMenuOpen(false);
@@ -44,7 +44,7 @@ const DegreeAuditCard: React.FC<DegreeAuditCardProps> = ({
         {/* Title */}
         <div
           className={`font-bold text-[18px] leading-tight ${
-            isSelected ? "text-white" : "text-[var(--color-dap-orange)]"
+            isSelected ? "text-white" : "text-dap-orange"
           }`}
         >
           {title}
@@ -54,12 +54,12 @@ const DegreeAuditCard: React.FC<DegreeAuditCardProps> = ({
           {/* Percentage Badge */}
           <div
             className={`rounded-[8px] px-3 py-2 flex items-center justify-center ${
-              isSelected ? "bg-white" : "bg-[var(--color-dap-orange)]"
+              isSelected ? "bg-background" : "bg-dap-orange"
             }`}
           >
             <span
               className={`text-base font-bold leading-tight ${
-                isSelected ? "text-[var(--color-dap-orange)]" : "text-white"
+                isSelected ? "text-dap-orange" : "text-white"
               }`}
             >
               {percentage}%
@@ -68,9 +68,7 @@ const DegreeAuditCard: React.FC<DegreeAuditCardProps> = ({
 
           <button
             type="button"
-            className={
-              isSelected ? "text-white" : "text-[var(--color-dap-orange)]"
-            }
+            className={isSelected ? "text-white" : "text-dap-orange"}
             onClick={(e) => {
               e.stopPropagation();
               setMenuOpen((prev) => !prev);
@@ -85,18 +83,18 @@ const DegreeAuditCard: React.FC<DegreeAuditCardProps> = ({
 
       {menuOpen && (
         <div
-          className="absolute right-0 top-full z-30 mt-2 min-w-[180px] rounded-[8px] border border-[var(--color-dap-border)] bg-white p-2 shadow-lg"
+          className="absolute right-0 top-full z-30 mt-2 min-w-[180px] rounded-[8px] border border-dap-border bg-background p-2 shadow-lg"
           onClick={(e) => e.stopPropagation()}
         >
-          <button className="flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-[15px] text-[var(--color-dap-dark-alt)] hover:bg-gray-50">
+          <button className="flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-[15px] hover:bg-hover-bg">
             <PencilSimpleLine size={20} className="shrink-0" />
             <span>Rename</span>
           </button>
-          <button className="flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-[15px] text-[var(--color-dap-dark-alt)] hover:bg-gray-50">
+          <button className="flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-[15px] hover:bg-hover-bg">
             <CopySimple size={20} className="shrink-0" />
             <span>Duplicate</span>
           </button>
-          <button className="flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-[15px] text-[#c63636] hover:bg-red-50">
+          <button className="flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-[15px] text-[#c63636] hover:bg-hover-bg">
             <Trash size={20} className="shrink-0" />
             <span>Delete Audit</span>
           </button>
@@ -116,15 +114,15 @@ export const DegreeAuditCardPopup: React.FC<DegreeAuditCardProps> = ({
   percentage = 90,
 }) => {
   return (
-    <div className="bg-[#FAFAF9] rounded border border-[var(--color-dap-border)] px-3 py-[12px]  w-full transition-all duration-200 cursor-pointer">
+    <div className="bg-background rounded border border-dap-border px-3 py-[12px]  w-full transition-all duration-200 cursor-pointer">
       <div className="flex items-center justify-between">
         {/* Title */}
-        <div className="font-bold text-[18px] leading-tight text-[var(--color-dap-orange)]">
+        <div className="font-bold text-[18px] leading-tight text-dap-orange">
           {title}
         </div>
 
         {/* Percentage Badge */}
-        <div className="bg-[var(--color-dap-orange)] rounded-md px-3 py-2 flex items-center justify-center">
+        <div className="bg-dap-orange rounded-md px-3 py-2 flex items-center justify-center">
           <span className="text-white text-base font-bold leading-tight">
             {percentage}%
           </span>

entrypoints/components/banner.tsx

@@ -1,11 +1,10 @@
-import { AnimatePresence, motion } from "framer-motion";
+import { getAuditHistory } from "@/lib/backend/storage";
+import { XIcon } from "@phosphor-icons/react";
 import { useEffect, useState } from "react";
+import noiseTexture from "../../assets/noise-texture.svg";
 import ArrowTopRightIcon from "../../assets/svgs/arrow-top-right";
 import DAPLogo from "../../assets/svgs/dap-logo";
 import gridBg from "../../public/Grid.png";
-import noiseTexture from "../../assets/noise-texture.svg";
-import { XIcon } from "@phosphor-icons/react";
-import { getAuditHistory } from "@/lib/backend/storage";
 
 const TryDAPBanner = () => {
   const [isOpen, setIsOpen] = useState(true);
@@ -90,7 +89,7 @@ const TryDAPBanner = () => {
               </p>
             </div>
             <button
-              className="flex items-center gap-2 text-black absolute right-12 top-[55%] -translate-y-1/2 bg-white rounded-md px-4 py-2 cursor-pointer transition-all duration-300 ease-in-out transform scale-100 origin-center z-10 h-[44px]"
+              className="flex items-center gap-2 absolute right-12 top-[55%] -translate-y-1/2 bg-background rounded-md px-4 py-2 cursor-pointer transition-all duration-300 ease-in-out transform scale-100 origin-center z-10 h-[44px]"
               onClick={handleTryItNow}
             >
               <ArrowTopRightIcon className="w-6 h-6" />
@@ -107,9 +106,9 @@ const TryDAPBanner = () => {
             </button>
           </div>
 
-          <div className="w-full h-[12px] bg-[var(--color-dap-orange-light)]" />
+          <div className="w-full h-[12px] bg-dap-orange-light" />
 
-          <div className="w-full h-[6px] bg-[var(--color-dap-yellow)]" />
+          <div className="w-full h-[6px] bg-dap-yellow" />
         </div>
       )}
     </div>

entrypoints/components/common/button.tsx

@@ -18,14 +18,14 @@ const styleMap: Record<
     none: "bg-transparent text-dap-primary border-transparent",
   },
   white: {
-    solid: "bg-white text-black border-transparent",
+    solid: "bg-background text-text border-transparent",
     outline: "bg-transparent text-white border-white",
     none: "bg-transparent text-white border-transparent",
   },
   black: {
-    solid: "bg-gray-800 text-white border-transparent",
-    outline: "bg-transparent text-gray-800 border-gray-800",
-    none: "bg-transparent text-gray-800 border-transparent",
+    solid: "bg-text text-background border-transparent",
+    outline: "bg-transparent text-text border-text",
+    none: "bg-transparent text-text border-transparent",
   },
 };
 
@@ -149,7 +149,7 @@ export const ToggleSwitch = forwardRef<HTMLButtonElement, ToggleSwitchProps>(
       >
         <span
           className={cn(
-            "inline-block rounded-full bg-white shadow-sm transform transition-transform duration-200 ease-in-out",
+            "inline-block rounded-full bg-background shadow-sm transform transition-transform duration-200 ease-in-out",
             currentSize.thumb,
             currentSize.translate,
           )}

entrypoints/components/common/modal.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import { XIcon } from "@phosphor-icons/react";
+import React from "react";
 import { cn } from "~/lib/utils";
 
 type ModalSize = "sm" | "md" | "lg" | "xl" | "full";
@@ -52,7 +52,7 @@ export default function Modal({
     >
       <div
         className={cn(
-          "bg-white rounded-lg shadow-xl w-full mx-4 overflow-hidden",
+          "bg-background rounded-lg shadow-xl w-full mx-4 overflow-hidden",
           sizeClasses[size],
           className,
         )}
@@ -61,9 +61,7 @@ export default function Modal({
         {/* Header */}
         {showHeader && (
           <div className="flex items-center justify-between p-4 border-b border-gray-200">
-            <h2 className="text-xl font-bold text-[var(--color-dap-dark)]">
-              {title}
-            </h2>
+            <h2 className="text-xl font-bold text-dap-dark">{title}</h2>
             <button
               onClick={onClose}
               className="p-1 hover:bg-gray-100 rounded-full transition-colors"

entrypoints/components/common/select-dropdown.tsx

@@ -1,5 +1,5 @@
-import { CaretDown } from "@phosphor-icons/react";
-import { useState, useRef, useEffect } from "react";
+import { CaretDownIcon } from "@phosphor-icons/react";
+import { useEffect, useRef, useState } from "react";
 import { cn } from "~/lib/utils";
 
 type SelectDropdownProps = {
@@ -44,14 +44,14 @@ export default function SelectDropdown({
           onClick={() => !disabled && setIsOpen(!isOpen)}
           disabled={disabled}
           className={cn(
-            "w-full flex items-center justify-between px-3 py-2 border border-dap-border rounded-lg text-base bg-white cursor-pointer transition-all disabled:opacity-50 disabled:cursor-not-allowed",
+            "w-full flex items-center justify-between px-3 py-2 border border-dap-border rounded-lg text-base bg-background cursor-pointer transition-all disabled:opacity-50 disabled:cursor-not-allowed",
             isOpen && "ring-2 ring-dap-orange border-transparent",
           )}
         >
-          <span className={value ? "text-gray-900" : "text-gray-500"}>
+          <span className={value ? "text-text" : "text-gray-500"}>
             {value || placeholder}
           </span>
-          <CaretDown
+          <CaretDownIcon
             size={20}
             className={cn(
               "text-gray-500 transition-transform",
@@ -61,7 +61,7 @@ export default function SelectDropdown({
         </button>
 
         {isOpen && (
-          <div className="absolute left-0 right-0 mt-2 bg-white border border-dap-border rounded-lg shadow-lg z-10 max-h-60 overflow-y-auto">
+          <div className="absolute left-0 right-0 mt-2 bg-background border border-dap-border rounded-lg shadow-lg z-10 max-h-60 overflow-y-auto">
             <div className="p-2 space-y-1">
               {options.map((option) => (
                 <button
@@ -72,10 +72,7 @@ export default function SelectDropdown({
                     setIsOpen(false);
                   }}
                   className={cn(
-                    "w-full text-left px-4 py-3 rounded-lg text-base transition-colors",
-                    value === option
-                      ? "bg-gray-100 text-gray-900"
-                      : "text-gray-700 hover:bg-gray-50",
+                    "w-full text-left px-4 py-3 rounded-lg text-base transition-colors text-text hover:bg-hover-bg",
                   )}
                 >
                   {option}

entrypoints/components/course-add-modal.tsx

@@ -1,5 +1,5 @@
-import { searchCatalogCourses } from "@/lib/backend/db";
 import { getCurrentSemester } from "@/lib/backend/audit-scraper";
+import { searchCatalogCourses } from "@/lib/backend/db";
 import type {
   CatalogCourse,
   CourseCode,
@@ -99,12 +99,12 @@ function DivisionToggle({
       >
         <div
           className={cn(
-            "w-5 h-5 rounded-full transform transition-transform duration-200 absolute top-1/2 -translate-y-1/2 bg-white",
+            "w-5 h-5 rounded-full transform transition-transform duration-200 absolute top-1/2 -translate-y-1/2 bg-background",
             checked ? "translate-x-[24px]" : "translate-x-1",
           )}
         />
       </button>
-      <span className="text-base text-gray-900">{label}</span>
+      <span className="text-base text-text">{label}</span>
     </div>
   );
 }
@@ -423,12 +423,12 @@ function FulfillingCoursesContent({
         value={query}
         onChange={(event) => setQuery(event.target.value)}
         placeholder="Search fulfilling courses"
-        className="w-full h-12 px-4 border border-[#E5E1DA] rounded-md text-base font-semibold placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-[#579D42] focus:border-transparent transition-all"
+        className="w-full h-12 px-4 border border-dap-border rounded-md text-base font-semibold placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-dap-orange focus:border-transparent transition-all"
       />
 
       <div className="mt-4 space-y-3 max-h-[500px] overflow-y-auto pr-1">
         {isLoading ? (
-          <div className="flex items-center gap-2 text-gray-600">
+          <div className="flex items-center gap-2 text-muted">
             <CircleNotchIcon className="h-5 w-5 animate-spin" />
             <span>Loading fulfilling courses...</span>
           </div>
@@ -443,7 +443,7 @@ function FulfillingCoursesContent({
                 key={course.uniqueId}
                 onClick={() => setSelectedCourseId(course.uniqueId)}
                 className={cn(
-                  "w-full min-h-[70px] grid grid-cols-[22px_1fr] items-stretch overflow-hidden rounded-md border bg-white text-left transition-colors",
+                  "w-full min-h-[70px] grid grid-cols-[22px_1fr] items-stretch overflow-hidden rounded-md border bg-background text-left transition-colors",
                   isSelected
                     ? "border-2 border-[#579D42]"
                     : "border-[#E5E1DA] hover:border-gray-300",
@@ -457,24 +457,24 @@ function FulfillingCoursesContent({
                   />
                 </div>
                 <div className="px-3 py-3">
-                  <p className="text-base font-semibold text-gray-900 leading-tight">
+                  <p className="text-base font-semibold leading-tight">
                     {courseCode}
                   </p>
-                  <p className="mt-2 text-sm font-medium text-black leading-tight">
+                  <p className="mt-2 text-sm font-medium leading-tight">
                     {course.fullName}
                   </p>
                 </div>
               </button>
             );
           })
         ) : (
-          <div className="min-h-[180px] rounded-md border border-dashed border-[#E5E1DA] bg-[#FAFAF9] px-6 py-8 flex flex-col items-center justify-center text-center">
-            <p className="text-lg font-semibold text-gray-900">
+          <div className="min-h-[180px] rounded-md border border-dashed border-dap-border bg-background px-6 py-8 flex flex-col items-center justify-center text-center">
+            <p className="text-lg font-semibold text-text">
               {hasSearchQuery
                 ? "No matching fulfilling courses"
                 : "No fulfilling courses found"}
             </p>
-            <p className="mt-2 text-sm text-gray-600">
+            <p className="mt-2 text-sm text-muted">
               {hasSearchQuery
                 ? "Try a different course number, title, or instructor."
                 : "This requirement does not have any catalog matches yet."}
@@ -578,13 +578,13 @@ export default function CourseAddModal({
     >
       <div
         className={cn(
-          "bg-white rounded-md border border-dap-border shadow-2xl w-full max-w-[550px] max-h-[90vh] mx-4 transform transition-all duration-200 overflow-hidden",
+          "bg-background rounded-md border border-dap-border shadow-2xl w-full max-w-[550px] max-h-[90vh] mx-4 transform transition-all duration-200 overflow-hidden",
           isOpen ? "scale-100 opacity-100" : "scale-95 opacity-0",
         )}
         onClick={(e) => e.stopPropagation()}
       >
         <div className="px-7 pt-7 pb-7">
-          <h2 className="text-3xl leading-none font-bold text-gray-900 mb-8">
+          <h2 className="text-3xl leading-none font-bold text-text mb-8">
             Fulfilling courses
           </h2>
           <FulfillingCoursesContent

entrypoints/components/course-card.tsx

@@ -45,7 +45,7 @@ const CourseCardVisual = forwardRef<
       {...rest}
       ref={ref}
       className={cn(
-        "bg-white rounded-md flex items-stretch overflow-hidden border-2 border-dap-border transition-all duration-200 hover:shadow-md hover:border-gray-300 cursor-pointer",
+        "bg-background rounded-md flex items-stretch overflow-hidden border-2 border-dap-border transition-all duration-200 hover:shadow-md hover:border-gray-300 cursor-pointer",
         className,
       )}
     >
@@ -57,7 +57,7 @@ const CourseCardVisual = forwardRef<
         ) : null}
       </div>
       <div className="py-3 px-3 flex-1">
-        <p className="text-gray-900 font-semibold text-sm">{fullName}</p>
+        <p className="text-text font-semibold text-sm">{fullName}</p>
         <p className="text-gray-500 text-xs">{courseName}</p>
       </div>
       {type === "add" && (

entrypoints/degree-audit/components/degree-audit-page.tsx

@@ -4,7 +4,7 @@ import { CourseSearchPanel } from "@/entrypoints/components/course-add-modal";
 import "@/entrypoints/styles/content.css";
 import { formatMajorLabel } from "@/lib/utils";
 import { useAuditContext } from "../providers/audit-provider";
-import { SimpleDegreeCompletionDonut } from "./degree-completion-donut";
+import DegreeCompletionDonut from "./degree-completion-donut";
 import { CreditHourTotalsCard, GPATotalsCard } from "./gpa-credit-cards";
 import RequirementBreakdown, {
   UnifiedDegreeCard,
@@ -38,12 +38,12 @@ const SidePanel = () => {
 
   return (
     <VStack
-      className="self-start sticky top-0 z-20 bg-white"
+      className="self-start sticky top-0 z-20 bg-background"
       y="stretch"
       x="center"
     >
-      <SimpleDegreeCompletionDonut size={300} />
-      <div className="w-sm mt-10 p-3 rounded-lg border border-gray-200 bg-[#FAFAF9]">
+      <DegreeCompletionDonut size={300} />
+      <div className="w-sm mt-10 p-3 rounded-lg border border-gray-200 bg-background">
         <CourseSearchPanel />
       </div>
       <VStack gap={4} className="w-sm mt-4">