From 78e6ddd05354723320243b01e96c391c7ee2fcb5 Mon Sep 17 00:00:00 2001
From: Sean Kelman <seanrkelman@gmail.com>
Date: Sun, 24 Dec 2023 23:12:36 -0800
Subject: [PATCH 1/7] deprecated isDarkMode in favor of useThemeStore

---
 .../Calendar/CourseCalendarEvent.tsx          |  7 ++-
 .../CustomEventDialog/CustomEventDialog.tsx   |  8 ++-
 .../EditSchedule/DeleteScheduleDialog.tsx     |  6 +-
 .../EditSchedule/ScheduleNameDialog.tsx       |  6 +-
 .../Header/LoadSaveFunctionality.tsx          | 18 ++++--
 .../RightPane/CoursePane/CourseRenderPane.tsx | 23 ++++---
 .../components/RightPane/RightPaneRoot.tsx    |  6 +-
 .../RightPane/SectionTable/GradesPopup.tsx    |  6 +-
 .../RightPane/SectionTable/PrereqTree.tsx     |  7 ++-
 .../SectionTable/SectionTableBody.tsx         | 63 ++++++++++++++-----
 .../src/components/buttons/Screenshot.tsx     |  5 +-
 .../src/components/dialogs/AddSchedule.tsx    |  6 +-
 .../src/components/dialogs/DeleteSchedule.tsx |  6 +-
 .../src/components/dialogs/RenameSchedule.tsx |  1 -
 14 files changed, 114 insertions(+), 54 deletions(-)

diff --git a/apps/antalmanac/src/components/Calendar/CourseCalendarEvent.tsx b/apps/antalmanac/src/components/Calendar/CourseCalendarEvent.tsx
index 82dff4dc5..01dd0c4b5 100644
--- a/apps/antalmanac/src/components/Calendar/CourseCalendarEvent.tsx
+++ b/apps/antalmanac/src/components/Calendar/CourseCalendarEvent.tsx
@@ -10,12 +10,12 @@ import CustomEventDialog from './Toolbar/CustomEventDialog/CustomEventDialog';
 import { deleteCourse, deleteCustomEvent } from '$actions/AppStoreActions';
 import ColorPicker from '$components/ColorPicker';
 import analyticsEnum, { logAnalytics } from '$lib/analytics';
-import { clickToCopy, isDarkMode } from '$lib/helpers';
+import { clickToCopy } from '$lib/helpers';
 import AppStore from '$stores/AppStore';
 import locationIds from '$lib/location_ids';
 import { useTabStore } from '$stores/TabStore';
 import { formatTimes } from '$stores/calendarizeHelpers';
-import { useTimeFormatStore } from '$stores/SettingsStore';
+import { useTimeFormatStore, useThemeStore } from '$stores/SettingsStore';
 import buildingCatalogue from '$lib/buildingCatalogue';
 
 const styles: Styles<Theme, object> = {
@@ -74,7 +74,6 @@ const styles: Styles<Theme, object> = {
 
     clickableLocation: {
         cursor: 'pointer',
-        color: isDarkMode() ? '#1cbeff' : 'blue',
         background: 'none !important',
         border: 'none',
         padding: '0 !important',
@@ -177,6 +176,7 @@ const CourseCalendarEvent = (props: CourseCalendarEventProps) => {
 
     const { setActiveTab } = useTabStore();
     const { isMilitaryTime } = useTimeFormatStore();
+    const appTheme = useThemeStore((store) => store.appTheme);
 
     const focusMap = useCallback(() => {
         setActiveTab(2);
@@ -262,6 +262,7 @@ const CourseCalendarEvent = (props: CourseCalendarEventProps) => {
                                             className={classes.clickableLocation}
                                             to={`/map?location=${locationIds[location.building] ?? 0}`}
                                             onClick={focusMap}
+                                            color={appTheme == 'dark' ? '#1cbeff' : 'blue'}
                                         >
                                             {location.building} {location.room}
                                         </Link>
diff --git a/apps/antalmanac/src/components/Calendar/Toolbar/CustomEventDialog/CustomEventDialog.tsx b/apps/antalmanac/src/components/Calendar/Toolbar/CustomEventDialog/CustomEventDialog.tsx
index 69764d159..bb55a301e 100644
--- a/apps/antalmanac/src/components/Calendar/Toolbar/CustomEventDialog/CustomEventDialog.tsx
+++ b/apps/antalmanac/src/components/Calendar/Toolbar/CustomEventDialog/CustomEventDialog.tsx
@@ -19,7 +19,7 @@ import DaySelector from './DaySelector';
 import ScheduleSelector from './ScheduleSelector';
 import { addCustomEvent, editCustomEvent } from '$actions/AppStoreActions';
 import analyticsEnum, { logAnalytics } from '$lib/analytics';
-import { isDarkMode } from '$lib/helpers';
+import { useThemeStore } from '$stores/SettingsStore';
 import AppStore from '$stores/AppStore';
 import { BuildingSelect, ExtendedBuilding } from '$components/inputs/building-select';
 
@@ -129,6 +129,7 @@ class CustomEventDialog extends PureComponent<CustomEventDialogProps, CustomEven
     };
 
     render() {
+        const appTheme = useThemeStore.getState().appTheme;
         return (
             <>
                 {this.props.customEvent !== undefined ? (
@@ -203,7 +204,10 @@ class CustomEventDialog extends PureComponent<CustomEventDialogProps, CustomEven
                     </DialogContent>
 
                     <DialogActions>
-                        <Button onClick={() => this.handleClose(true)} color={isDarkMode() ? 'secondary' : 'primary'}>
+                        <Button
+                            onClick={() => this.handleClose(true)}
+                            color={appTheme == 'dark' ? 'secondary' : 'primary'}
+                        >
                             Cancel
                         </Button>
                         <Tooltip title="Schedule and day must be checked" disableHoverListener={!this.isAddDisabled()}>
diff --git a/apps/antalmanac/src/components/Calendar/Toolbar/EditSchedule/DeleteScheduleDialog.tsx b/apps/antalmanac/src/components/Calendar/Toolbar/EditSchedule/DeleteScheduleDialog.tsx
index 7f919943c..2b5df1cae 100644
--- a/apps/antalmanac/src/components/Calendar/Toolbar/EditSchedule/DeleteScheduleDialog.tsx
+++ b/apps/antalmanac/src/components/Calendar/Toolbar/EditSchedule/DeleteScheduleDialog.tsx
@@ -14,7 +14,7 @@ import { useState } from 'react';
 import { Clear } from '@material-ui/icons';
 
 import { deleteSchedule } from '$actions/AppStoreActions';
-import { isDarkMode } from '$lib/helpers';
+import { useThemeStore } from '$stores/SettingsStore';
 import AppStore from '$stores/AppStore';
 
 interface DeleteScheduleDialogProps {
@@ -23,6 +23,8 @@ interface DeleteScheduleDialogProps {
 }
 
 const DeleteScheduleDialog = (props: DeleteScheduleDialogProps) => {
+    const appTheme = useThemeStore((store) => store.appTheme);
+
     const { scheduleIndex } = props;
 
     const [isOpen, setIsOpen] = useState(false);
@@ -58,7 +60,7 @@ const DeleteScheduleDialog = (props: DeleteScheduleDialogProps) => {
                     </DialogContentText>
                 </DialogContent>
                 <DialogActions>
-                    <Button onClick={handleClose} color={isDarkMode() ? 'secondary' : 'primary'}>
+                    <Button onClick={handleClose} color={appTheme == 'dark' ? 'secondary' : 'primary'}>
                         Cancel
                     </Button>
                     <Button onClick={handleDelete} variant="contained" color="primary">
diff --git a/apps/antalmanac/src/components/Calendar/Toolbar/EditSchedule/ScheduleNameDialog.tsx b/apps/antalmanac/src/components/Calendar/Toolbar/EditSchedule/ScheduleNameDialog.tsx
index 33e4bc69c..937f443d6 100644
--- a/apps/antalmanac/src/components/Calendar/Toolbar/EditSchedule/ScheduleNameDialog.tsx
+++ b/apps/antalmanac/src/components/Calendar/Toolbar/EditSchedule/ScheduleNameDialog.tsx
@@ -15,7 +15,7 @@ import { ClassNameMap } from '@material-ui/core/styles/withStyles';
 import { Add, Edit } from '@material-ui/icons';
 
 import { addSchedule, renameSchedule } from '$actions/AppStoreActions';
-import { isDarkMode } from '$lib/helpers';
+import { useThemeStore } from '$stores/SettingsStore';
 
 const styles = () => ({
     addButton: {
@@ -35,6 +35,8 @@ interface ScheduleNameDialogProps {
 }
 
 const ScheduleNameDialog = forwardRef((props: ScheduleNameDialogProps, ref) => {
+    const appTheme = useThemeStore((store) => store.appTheme);
+
     const { classes, onOpen, onClose, scheduleNames, scheduleRenameIndex } = props;
 
     const [isOpen, setIsOpen] = useState(false);
@@ -143,7 +145,7 @@ const ScheduleNameDialog = forwardRef((props: ScheduleNameDialogProps, ref) => {
                 </DialogContent>
 
                 <DialogActions>
-                    <Button onClick={handleCancel} color={isDarkMode() ? 'secondary' : 'primary'}>
+                    <Button onClick={handleCancel} color={appTheme == 'dark' ? 'secondary' : 'primary'}>
                         Cancel
                     </Button>
                     <Button
diff --git a/apps/antalmanac/src/components/Header/LoadSaveFunctionality.tsx b/apps/antalmanac/src/components/Header/LoadSaveFunctionality.tsx
index b3d9675b2..7e6a797b9 100644
--- a/apps/antalmanac/src/components/Header/LoadSaveFunctionality.tsx
+++ b/apps/antalmanac/src/components/Header/LoadSaveFunctionality.tsx
@@ -14,13 +14,14 @@ import { ChangeEvent, PureComponent, useEffect, useState } from 'react';
 
 import { LoadingButton } from '@mui/lab';
 import { loadSchedule, saveSchedule } from '$actions/AppStoreActions';
-import { isDarkMode } from '$lib/helpers';
+import { useThemeStore } from '$stores/SettingsStore';
 
 interface LoadSaveButtonBaseProps {
     action: typeof saveSchedule;
     actionName: 'Save' | 'Load';
     disabled: boolean;
     loading: boolean;
+    colorType: 'primary' | 'secondary';
 }
 
 interface LoadSaveButtonBaseState {
@@ -123,10 +124,10 @@ class LoadSaveButtonBase extends PureComponent<LoadSaveButtonBaseProps, LoadSave
                         />
                     </DialogContent>
                     <DialogActions>
-                        <Button onClick={() => this.handleClose(true)} color={isDarkMode() ? 'secondary' : 'primary'}>
+                        <Button onClick={() => this.handleClose(true)} color={this.props.colorType}>
                             {'Cancel'}
                         </Button>
-                        <Button onClick={() => this.handleClose(false)} color={isDarkMode() ? 'secondary' : 'primary'}>
+                        <Button onClick={() => this.handleClose(false)} color={this.props.colorType}>
                             {this.props.actionName}
                         </Button>
                     </DialogActions>
@@ -137,6 +138,8 @@ class LoadSaveButtonBase extends PureComponent<LoadSaveButtonBaseProps, LoadSave
 }
 
 const LoadSaveScheduleFunctionality = () => {
+    const appTheme = useThemeStore((store) => store.appTheme);
+
     const [loading, setLoading] = useState(false);
 
     const loadScheduleAndSetLoading = async (userID: string, rememberMe: boolean) => {
@@ -158,12 +161,19 @@ const LoadSaveScheduleFunctionality = () => {
 
     return (
         <>
-            <LoadSaveButtonBase actionName={'Save'} action={saveSchedule} disabled={loading} loading={false} />
+            <LoadSaveButtonBase
+                actionName={'Save'}
+                action={saveSchedule}
+                disabled={loading}
+                loading={false}
+                colorType={appTheme == 'dark' ? 'primary' : 'secondary'}
+            />
             <LoadSaveButtonBase
                 actionName={'Load'}
                 action={loadScheduleAndSetLoading}
                 disabled={false}
                 loading={loading}
+                colorType={appTheme == 'dark' ? 'primary' : 'secondary'}
             />
         </>
     );
diff --git a/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx b/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx
index 2375e8b8b..60f2b7f4a 100644
--- a/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx
+++ b/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx
@@ -14,7 +14,7 @@ import loadingGif from './SearchForm/Gifs/loading.gif';
 import darkNoNothing from './static/dark-no_results.png';
 import noNothing from './static/no_results.png';
 import AppStore from '$stores/AppStore';
-import { isDarkMode } from '$lib/helpers';
+import { useThemeStore } from '$stores/SettingsStore';
 import Grades from '$lib/grades';
 import analyticsEnum from '$lib/analytics';
 import { openSnackbar } from '$actions/AppStoreActions';
@@ -52,6 +52,8 @@ const flattenSOCObject = (SOCObject: WebsocAPIResponse): (WebsocSchool | WebsocD
 const RecruitmentBanner = () => {
     const [bannerVisibility, setBannerVisibility] = useState(true);
 
+    const appTheme = useThemeStore((store) => store.appTheme);
+
     // Display recruitment banner if more than 11 weeks (in ms) has passed since last dismissal
     const recruitmentDismissalTime = window.localStorage.getItem('recruitmentDismissalTime');
     const dismissedRecently =
@@ -67,8 +69,8 @@ const RecruitmentBanner = () => {
                     icon={false}
                     severity="info"
                     style={{
-                        color: isDarkMode() ? '#ece6e6' : '#2e2e2e',
-                        backgroundColor: isDarkMode() ? '#2e2e2e' : '#ece6e6',
+                        color: appTheme == 'dark' ? '#ece6e6' : '#2e2e2e',
+                        backgroundColor: appTheme == 'dark' ? '#2e2e2e' : '#ece6e6',
                     }}
                     action={
                         <IconButton
@@ -144,18 +146,20 @@ const SectionTableWrapped = (
 };
 
 const LoadingMessage = () => {
+    const appTheme = useThemeStore((store) => store.appTheme);
     return (
         <Box sx={{ height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-            <img src={isDarkMode() ? darkModeLoadingGif : loadingGif} alt="Loading courses" />
+            <img src={appTheme == 'dark' ? darkModeLoadingGif : loadingGif} alt="Loading courses" />
         </Box>
     );
 };
 
 const ErrorMessage = () => {
+    const appTheme = useThemeStore((store) => store.appTheme);
     return (
         <Box sx={{ height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
             <img
-                src={isDarkMode() ? darkNoNothing : noNothing}
+                src={appTheme == 'dark' ? darkNoNothing : noNothing}
                 alt="No Results Found"
                 style={{ objectFit: 'contain', width: '80%', height: '80%' }}
             />
@@ -203,11 +207,10 @@ export default function CourseRenderPane(props: { id?: number }) {
                     ? WebSOC.queryMultiple(websocQueryParams, 'units')
                     : WebSOC.query(websocQueryParams),
                 // Catch the error here so that the course pane still loads even if the grades cache fails to populate
-                Grades.populateGradesCache(gradesQueryParams)
-                    .catch((error) => {
-                        console.error(error);
-                        openSnackbar('error', 'Error loading grades information');
-                    }),
+                Grades.populateGradesCache(gradesQueryParams).catch((error) => {
+                    console.error(error);
+                    openSnackbar('error', 'Error loading grades information');
+                }),
             ]);
 
             setError(false);
diff --git a/apps/antalmanac/src/components/RightPane/RightPaneRoot.tsx b/apps/antalmanac/src/components/RightPane/RightPaneRoot.tsx
index 5b666f5b7..e2701d778 100644
--- a/apps/antalmanac/src/components/RightPane/RightPaneRoot.tsx
+++ b/apps/antalmanac/src/components/RightPane/RightPaneRoot.tsx
@@ -8,7 +8,7 @@ import CoursePane from './CoursePane/CoursePaneRoot';
 import darkModeLoadingGif from './CoursePane/SearchForm/Gifs/dark-loading.gif';
 import loadingGif from './CoursePane/SearchForm/Gifs/loading.gif';
 import { useTabStore } from '$stores/TabStore';
-import { isDarkMode } from '$lib/helpers';
+import { useThemeStore } from '$stores/SettingsStore';
 
 const UCIMap = React.lazy(() => import('../Map'));
 
@@ -47,6 +47,8 @@ const tabs = [
 export default function Desktop({ style }: DesktopTabsProps) {
     const { activeTab, setActiveTab } = useTabStore();
 
+    const appTheme = useThemeStore((store) => store.appTheme);
+
     return (
         <Box style={{ ...style, margin: '0 4px' }}>
             <Paper elevation={0} variant="outlined" square style={{ borderRadius: '4px 4px 0 0' }}>
@@ -81,7 +83,7 @@ export default function Desktop({ style }: DesktopTabsProps) {
                     <Suspense
                         fallback={
                             <div style={styles.fallback}>
-                                <img src={isDarkMode() ? darkModeLoadingGif : loadingGif} alt="Loading map" />
+                                <img src={appTheme == 'dark' ? darkModeLoadingGif : loadingGif} alt="Loading map" />
                             </div>
                         }
                     >
diff --git a/apps/antalmanac/src/components/RightPane/SectionTable/GradesPopup.tsx b/apps/antalmanac/src/components/RightPane/SectionTable/GradesPopup.tsx
index 01045f8d0..03cc03e9c 100644
--- a/apps/antalmanac/src/components/RightPane/SectionTable/GradesPopup.tsx
+++ b/apps/antalmanac/src/components/RightPane/SectionTable/GradesPopup.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect, useMemo } from 'react';
 import { Bar, BarChart, CartesianGrid, ResponsiveContainer, XAxis, YAxis } from 'recharts';
 import { Box, Link, Typography, Skeleton } from '@mui/material';
-import { isDarkMode } from '$lib/helpers';
+import { useThemeStore } from '$stores/SettingsStore';
 import GradesHelper, { type Grades } from '$lib/grades';
 
 export interface GradeData {
@@ -51,6 +51,8 @@ export interface GradesPopupProps {
 }
 
 function GradesPopup(props: GradesPopupProps) {
+    const appTheme = useThemeStore((store) => store.appTheme);
+
     const { deptCode, courseNumber, instructor = '', isMobileScreen } = props;
 
     const [loading, setLoading] = useState(true);
@@ -106,7 +108,7 @@ function GradesPopup(props: GradesPopupProps) {
     }
 
     const encodedDept = encodeURIComponent(deptCode);
-    const axisColor = isDarkMode() ? '#fff' : '#111';
+    const axisColor = appTheme == 'dark' ? '#fff' : '#111';
 
     return (
         <Box sx={{ padding: '4px' }}>
diff --git a/apps/antalmanac/src/components/RightPane/SectionTable/PrereqTree.tsx b/apps/antalmanac/src/components/RightPane/SectionTable/PrereqTree.tsx
index 1bc339d09..cd519897a 100644
--- a/apps/antalmanac/src/components/RightPane/SectionTable/PrereqTree.tsx
+++ b/apps/antalmanac/src/components/RightPane/SectionTable/PrereqTree.tsx
@@ -4,7 +4,7 @@ import { FC, useState } from 'react';
 import { Button, Modal, Popover } from '@material-ui/core';
 
 import { CourseInfo } from './CourseInfoBar';
-import { isDarkMode } from '$lib/helpers';
+import { useThemeStore } from '$stores/SettingsStore';
 
 import './PrereqTree.css';
 
@@ -23,13 +23,14 @@ interface NodeProps {
 }
 
 const Node: FC<NodeProps> = (props) => {
+    const appTheme = useThemeStore((store) => store.appTheme);
     return (
         <div style={{ padding: '1px 0' }} className={`${props.node}`} key={props.index}>
             <div
                 className={'course'}
                 style={{
-                    backgroundColor: isDarkMode() ? '#303030' : '#e0e0e0',
-                    color: isDarkMode() ? '#bfbfbf' : 'black',
+                    backgroundColor: appTheme == 'dark' ? '#303030' : '#e0e0e0',
+                    color: appTheme == 'dark' ? '#bfbfbf' : 'black',
                 }}
             >
                 {props.label}
diff --git a/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody.tsx b/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody.tsx
index c2f23e89b..af5d9906f 100644
--- a/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody.tsx
+++ b/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody.tsx
@@ -25,7 +25,7 @@ import { ColorAndDelete, ScheduleAddCell } from './SectionTableButtons';
 import restrictionsMapping from './static/restrictionsMapping.json';
 import GradesPopup from './GradesPopup';
 import analyticsEnum, { logAnalytics } from '$lib/analytics';
-import { clickToCopy, isDarkMode } from '$lib/helpers';
+import { clickToCopy } from '$lib/helpers';
 import { CourseDetails } from '$lib/course_data.types';
 import Grades from '$lib/grades';
 import AppStore from '$stores/AppStore';
@@ -33,14 +33,14 @@ import { useTabStore } from '$stores/TabStore';
 import locationIds from '$lib/location_ids';
 import { normalizeTime, parseDaysString, formatTimes } from '$stores/calendarizeHelpers';
 import useColumnStore, { type SectionTableColumn } from '$stores/ColumnStore';
-import { useTimeFormatStore } from '$stores/SettingsStore';
+import { useTimeFormatStore, useThemeStore } from '$stores/SettingsStore';
 
 const styles: Styles<Theme, object> = (theme) => ({
     sectionCode: {
         display: 'inline-flex',
         cursor: 'pointer',
         '&:hover': {
-            color: isDarkMode() ? 'gold' : 'blueviolet',
+            //color: isDarkMode() ? 'gold' : 'blueviolet',
             cursor: 'pointer',
         },
         alignSelf: 'center',
@@ -50,23 +50,12 @@ const styles: Styles<Theme, object> = (theme) => ({
             backgroundColor: theme.palette.action.hover,
         },
     },
-    tr: {
-        '&.addedCourse': {
-            background: isDarkMode() ? '#b0b04f' : '#fcfc97',
-        },
-        '&.scheduleConflict': {
-            background: isDarkMode() ? '#121212' : '#a0a0a0',
-            opacity: isDarkMode() ? 0.6 : 1,
-        },
-    },
     cell: {},
     link: {
         textDecoration: 'underline',
-        color: isDarkMode() ? 'dodgerblue' : 'blue',
         cursor: 'pointer',
     },
     mapLink: {
-        color: isDarkMode() ? 'dodgerblue' : 'blue',
         cursor: 'pointer',
         background: 'none !important',
         border: 'none',
@@ -100,7 +89,6 @@ const styles: Styles<Theme, object> = (theme) => ({
     Tap: { color: '#8d2df0' },
     Tut: { color: '#ffc705' },
     popoverText: {
-        color: isDarkMode() ? 'dodgerblue' : 'blue',
         cursor: 'pointer',
     },
     codeCell: {
@@ -121,8 +109,20 @@ interface CourseCodeCellProps {
 }
 
 const CourseCodeCell = withStyles(styles)((props: CourseCodeCellProps) => {
+    const appTheme = useThemeStore((store) => store.appTheme);
+
     const { classes, sectionCode } = props;
 
+    const [isHovered, setIsHovered] = useState(false);
+
+    const handleMouseEnter = () => {
+        setIsHovered(true);
+    };
+
+    const handleMouseLeave = () => {
+        setIsHovered(false);
+    };
+
     return (
         <NoPaddingTableCell className={`${classes.cell} ${classes.codeCell}`}>
             <Tooltip title="Click to copy course code" placement="bottom" enterDelay={150}>
@@ -136,6 +136,11 @@ const CourseCodeCell = withStyles(styles)((props: CourseCodeCellProps) => {
                     }}
                     className={classes.sectionCode}
                     label={sectionCode}
+                    onMouseEnter={handleMouseEnter}
+                    onMouseLeave={handleMouseLeave}
+                    style={{
+                        color: isHovered ? (appTheme == 'dark' ? 'gold' : 'blueviolet') : '',
+                    }}
                     size="small"
                 />
             </Tooltip>
@@ -232,6 +237,8 @@ interface GPACellProps {
 }
 
 function GPACell(props: GPACellProps) {
+    const appTheme = useThemeStore((store) => store.appTheme);
+
     const { deptCode, courseNumber, instructors } = props;
 
     const [gpa, setGpa] = useState('');
@@ -263,7 +270,7 @@ function GPACell(props: GPACellProps) {
         <NoPaddingTableCell>
             <Button
                 style={{
-                    color: isDarkMode() ? 'dodgerblue' : 'blue',
+                    color: appTheme == 'dark' ? 'dodgerblue' : 'blue',
                     padding: 0,
                     minWidth: 0,
                     fontWeight: 400,
@@ -300,6 +307,8 @@ interface LocationsCellProps {
 }
 
 const LocationsCell = withStyles(styles)((props: LocationsCellProps) => {
+    const appTheme = useThemeStore((store) => store.appTheme);
+
     const { classes, meetings } = props;
 
     const { setActiveTab } = useTabStore();
@@ -317,7 +326,12 @@ const LocationsCell = withStyles(styles)((props: LocationsCellProps) => {
                         const buildingId = locationIds[buildingName];
                         return (
                             <Fragment key={meeting.timeIsTBA + bldg}>
-                                <Link className={classes.mapLink} to={`/map?location=${buildingId}`} onClick={focusMap}>
+                                <Link
+                                    className={classes.mapLink}
+                                    to={`/map?location=${buildingId}`}
+                                    onClick={focusMap}
+                                    color={appTheme == 'dark' ? 'dodgerblue' : 'blue'}
+                                >
                                     {bldg}
                                 </Link>
                                 <br />
@@ -486,6 +500,8 @@ const tableBodyCells: Record<SectionTableColumn, React.ComponentType<any>> = {
  * TODO: SectionNum name parity -> SectionNumber
  */
 const SectionTableBody = withStyles(styles)((props: SectionTableBodyProps) => {
+    const appTheme = useThemeStore((store) => store.appTheme);
+
     const { classes, section, courseDetails, term, allowHighlight, scheduleNames } = props;
 
     const activeColumns = useColumnStore((store) => store.activeColumns);
@@ -592,6 +608,19 @@ const SectionTableBody = withStyles(styles)((props: SectionTableBodyProps) => {
                 // allowHighlight is ALWAYS false when in Added Course Pane and ALWAYS true when in CourseRenderPane
                 addedCourse ? { addedCourse: addedCourse && allowHighlight } : { scheduleConflict: scheduleConflict }
             )}
+            style={{
+                background:
+                    addedCourse && allowHighlight
+                        ? appTheme == 'dark'
+                            ? '#b0b04f'
+                            : '#fcfc97'
+                        : scheduleConflict && allowHighlight
+                        ? appTheme == 'dark'
+                            ? '#121212'
+                            : '#a0a0a0'
+                        : '',
+                opacity: scheduleConflict && allowHighlight && appTheme == 'dark' ? 0.6 : 1,
+            }}
         >
             {!addedCourse ? (
                 <ScheduleAddCell
diff --git a/apps/antalmanac/src/components/buttons/Screenshot.tsx b/apps/antalmanac/src/components/buttons/Screenshot.tsx
index e73bcd1ce..ce75a5d1f 100644
--- a/apps/antalmanac/src/components/buttons/Screenshot.tsx
+++ b/apps/antalmanac/src/components/buttons/Screenshot.tsx
@@ -6,17 +6,18 @@ import html2canvas from 'html2canvas';
 import { PureComponent } from 'react';
 
 import analyticsEnum, { logAnalytics } from '$lib/analytics';
-import { isDarkMode } from '$lib/helpers';
+import { useThemeStore } from '$stores/SettingsStore';
 
 class ScreenshotButton extends PureComponent {
     handleClick = () => {
+        const appTheme = useThemeStore((store) => store.appTheme);
         logAnalytics({
             category: analyticsEnum.calendar.title,
             action: analyticsEnum.calendar.actions.SCREENSHOT,
         });
         void html2canvas(document.getElementById('screenshot') as HTMLElement, {
             scale: 2.5,
-            backgroundColor: isDarkMode() ? '#303030' : '#fafafa',
+            backgroundColor: appTheme == 'dark' ? '#303030' : '#fafafa',
         }).then((canvas) => {
             const imgRaw = canvas.toDataURL('image/png');
             saveAs(imgRaw, 'Schedule.png');
diff --git a/apps/antalmanac/src/components/dialogs/AddSchedule.tsx b/apps/antalmanac/src/components/dialogs/AddSchedule.tsx
index 318da32fe..48f9dd33b 100644
--- a/apps/antalmanac/src/components/dialogs/AddSchedule.tsx
+++ b/apps/antalmanac/src/components/dialogs/AddSchedule.tsx
@@ -10,7 +10,7 @@ import {
     Box,
 } from '@mui/material';
 import { addSchedule } from '$actions/AppStoreActions';
-import { isDarkMode } from '$lib/helpers';
+import { useThemeStore } from '$stores/SettingsStore';
 import AppStore from '$stores/AppStore';
 
 type ScheduleNameDialogProps = DialogProps;
@@ -19,6 +19,8 @@ type ScheduleNameDialogProps = DialogProps;
  * Dialog with a text field to add a schedule.
  */
 function AddScheduleDialog(props: ScheduleNameDialogProps) {
+    const appTheme = useThemeStore((store) => store.appTheme);
+
     /**
      * {@link props.onClose} also needs to be forwarded to the {@link Dialog} component.
      * A custom {@link onKeyDown} handler is provided to handle the Enter and Escape keys.
@@ -88,7 +90,7 @@ function AddScheduleDialog(props: ScheduleNameDialogProps) {
             </DialogContent>
 
             <DialogActions>
-                <Button onClick={handleCancel} color={isDarkMode() ? 'secondary' : 'primary'}>
+                <Button onClick={handleCancel} color={appTheme == 'dark' ? 'secondary' : 'primary'}>
                     Cancel
                 </Button>
                 <Button onClick={submitName} variant="contained" color="primary" disabled={name.trim() === ''}>
diff --git a/apps/antalmanac/src/components/dialogs/DeleteSchedule.tsx b/apps/antalmanac/src/components/dialogs/DeleteSchedule.tsx
index 1dc62fd1d..271e7e632 100644
--- a/apps/antalmanac/src/components/dialogs/DeleteSchedule.tsx
+++ b/apps/antalmanac/src/components/dialogs/DeleteSchedule.tsx
@@ -9,7 +9,7 @@ import {
     type DialogProps,
 } from '@mui/material';
 import { deleteSchedule } from '$actions/AppStoreActions';
-import { isDarkMode } from '$lib/helpers';
+import { useThemeStore } from '$stores/SettingsStore';
 import AppStore from '$stores/AppStore';
 
 interface ScheduleNameDialogProps extends DialogProps {
@@ -23,6 +23,8 @@ interface ScheduleNameDialogProps extends DialogProps {
  * Dialog with a prompt to delete the specified schedule.
  */
 function DeleteScheduleDialog(props: ScheduleNameDialogProps) {
+    const appTheme = useThemeStore((store) => store.appTheme);
+
     /**
      * {@link props.onClose} also needs to be forwarded to the {@link Dialog} component.
      */
@@ -55,7 +57,7 @@ function DeleteScheduleDialog(props: ScheduleNameDialogProps) {
             </DialogContent>
 
             <DialogActions>
-                <Button onClick={handleCancel} color={isDarkMode() ? 'secondary' : 'primary'}>
+                <Button onClick={handleCancel} color={appTheme == 'dark' ? 'secondary' : 'primary'}>
                     Cancel
                 </Button>
                 <Button onClick={handleDelete} variant="contained" color="primary">
diff --git a/apps/antalmanac/src/components/dialogs/RenameSchedule.tsx b/apps/antalmanac/src/components/dialogs/RenameSchedule.tsx
index 8ee66fc06..16bc7315f 100644
--- a/apps/antalmanac/src/components/dialogs/RenameSchedule.tsx
+++ b/apps/antalmanac/src/components/dialogs/RenameSchedule.tsx
@@ -10,7 +10,6 @@ import {
     type DialogProps,
 } from '@mui/material';
 import { renameSchedule } from '$actions/AppStoreActions';
-import { isDarkMode } from '$lib/helpers';
 import AppStore from '$stores/AppStore';
 
 interface ScheduleNameDialogProps extends DialogProps {

From 22128adaea9be784c63eaa795845007b494b2e7f Mon Sep 17 00:00:00 2001
From: Sean Kelman <seanrkelman@gmail.com>
Date: Sun, 24 Dec 2023 23:12:36 -0800
Subject: [PATCH 2/7] Deprecated isDarkMode in favor of ThemeStore

---
 .../Calendar/CourseCalendarEvent.tsx          |  7 ++-
 .../CustomEventDialog/CustomEventDialog.tsx   |  8 ++-
 .../EditSchedule/DeleteScheduleDialog.tsx     |  6 +-
 .../EditSchedule/ScheduleNameDialog.tsx       |  6 +-
 .../Header/LoadSaveFunctionality.tsx          | 18 ++++--
 .../RightPane/CoursePane/CourseRenderPane.tsx | 23 ++++---
 .../components/RightPane/RightPaneRoot.tsx    |  6 +-
 .../RightPane/SectionTable/GradesPopup.tsx    |  6 +-
 .../RightPane/SectionTable/PrereqTree.tsx     |  7 ++-
 .../SectionTable/SectionTableBody.tsx         | 62 ++++++++++++++-----
 .../src/components/buttons/Screenshot.tsx     |  5 +-
 .../src/components/dialogs/AddSchedule.tsx    |  6 +-
 .../src/components/dialogs/DeleteSchedule.tsx |  6 +-
 .../src/components/dialogs/RenameSchedule.tsx |  1 -
 apps/antalmanac/src/lib/helpers.ts            | 11 ----
 15 files changed, 113 insertions(+), 65 deletions(-)

diff --git a/apps/antalmanac/src/components/Calendar/CourseCalendarEvent.tsx b/apps/antalmanac/src/components/Calendar/CourseCalendarEvent.tsx
index 82dff4dc5..01dd0c4b5 100644
--- a/apps/antalmanac/src/components/Calendar/CourseCalendarEvent.tsx
+++ b/apps/antalmanac/src/components/Calendar/CourseCalendarEvent.tsx
@@ -10,12 +10,12 @@ import CustomEventDialog from './Toolbar/CustomEventDialog/CustomEventDialog';
 import { deleteCourse, deleteCustomEvent } from '$actions/AppStoreActions';
 import ColorPicker from '$components/ColorPicker';
 import analyticsEnum, { logAnalytics } from '$lib/analytics';
-import { clickToCopy, isDarkMode } from '$lib/helpers';
+import { clickToCopy } from '$lib/helpers';
 import AppStore from '$stores/AppStore';
 import locationIds from '$lib/location_ids';
 import { useTabStore } from '$stores/TabStore';
 import { formatTimes } from '$stores/calendarizeHelpers';
-import { useTimeFormatStore } from '$stores/SettingsStore';
+import { useTimeFormatStore, useThemeStore } from '$stores/SettingsStore';
 import buildingCatalogue from '$lib/buildingCatalogue';
 
 const styles: Styles<Theme, object> = {
@@ -74,7 +74,6 @@ const styles: Styles<Theme, object> = {
 
     clickableLocation: {
         cursor: 'pointer',
-        color: isDarkMode() ? '#1cbeff' : 'blue',
         background: 'none !important',
         border: 'none',
         padding: '0 !important',
@@ -177,6 +176,7 @@ const CourseCalendarEvent = (props: CourseCalendarEventProps) => {
 
     const { setActiveTab } = useTabStore();
     const { isMilitaryTime } = useTimeFormatStore();
+    const appTheme = useThemeStore((store) => store.appTheme);
 
     const focusMap = useCallback(() => {
         setActiveTab(2);
@@ -262,6 +262,7 @@ const CourseCalendarEvent = (props: CourseCalendarEventProps) => {
                                             className={classes.clickableLocation}
                                             to={`/map?location=${locationIds[location.building] ?? 0}`}
                                             onClick={focusMap}
+                                            color={appTheme == 'dark' ? '#1cbeff' : 'blue'}
                                         >
                                             {location.building} {location.room}
                                         </Link>
diff --git a/apps/antalmanac/src/components/Calendar/Toolbar/CustomEventDialog/CustomEventDialog.tsx b/apps/antalmanac/src/components/Calendar/Toolbar/CustomEventDialog/CustomEventDialog.tsx
index 69764d159..bb55a301e 100644
--- a/apps/antalmanac/src/components/Calendar/Toolbar/CustomEventDialog/CustomEventDialog.tsx
+++ b/apps/antalmanac/src/components/Calendar/Toolbar/CustomEventDialog/CustomEventDialog.tsx
@@ -19,7 +19,7 @@ import DaySelector from './DaySelector';
 import ScheduleSelector from './ScheduleSelector';
 import { addCustomEvent, editCustomEvent } from '$actions/AppStoreActions';
 import analyticsEnum, { logAnalytics } from '$lib/analytics';
-import { isDarkMode } from '$lib/helpers';
+import { useThemeStore } from '$stores/SettingsStore';
 import AppStore from '$stores/AppStore';
 import { BuildingSelect, ExtendedBuilding } from '$components/inputs/building-select';
 
@@ -129,6 +129,7 @@ class CustomEventDialog extends PureComponent<CustomEventDialogProps, CustomEven
     };
 
     render() {
+        const appTheme = useThemeStore.getState().appTheme;
         return (
             <>
                 {this.props.customEvent !== undefined ? (
@@ -203,7 +204,10 @@ class CustomEventDialog extends PureComponent<CustomEventDialogProps, CustomEven
                     </DialogContent>
 
                     <DialogActions>
-                        <Button onClick={() => this.handleClose(true)} color={isDarkMode() ? 'secondary' : 'primary'}>
+                        <Button
+                            onClick={() => this.handleClose(true)}
+                            color={appTheme == 'dark' ? 'secondary' : 'primary'}
+                        >
                             Cancel
                         </Button>
                         <Tooltip title="Schedule and day must be checked" disableHoverListener={!this.isAddDisabled()}>
diff --git a/apps/antalmanac/src/components/Calendar/Toolbar/EditSchedule/DeleteScheduleDialog.tsx b/apps/antalmanac/src/components/Calendar/Toolbar/EditSchedule/DeleteScheduleDialog.tsx
index 7f919943c..2b5df1cae 100644
--- a/apps/antalmanac/src/components/Calendar/Toolbar/EditSchedule/DeleteScheduleDialog.tsx
+++ b/apps/antalmanac/src/components/Calendar/Toolbar/EditSchedule/DeleteScheduleDialog.tsx
@@ -14,7 +14,7 @@ import { useState } from 'react';
 import { Clear } from '@material-ui/icons';
 
 import { deleteSchedule } from '$actions/AppStoreActions';
-import { isDarkMode } from '$lib/helpers';
+import { useThemeStore } from '$stores/SettingsStore';
 import AppStore from '$stores/AppStore';
 
 interface DeleteScheduleDialogProps {
@@ -23,6 +23,8 @@ interface DeleteScheduleDialogProps {
 }
 
 const DeleteScheduleDialog = (props: DeleteScheduleDialogProps) => {
+    const appTheme = useThemeStore((store) => store.appTheme);
+
     const { scheduleIndex } = props;
 
     const [isOpen, setIsOpen] = useState(false);
@@ -58,7 +60,7 @@ const DeleteScheduleDialog = (props: DeleteScheduleDialogProps) => {
                     </DialogContentText>
                 </DialogContent>
                 <DialogActions>
-                    <Button onClick={handleClose} color={isDarkMode() ? 'secondary' : 'primary'}>
+                    <Button onClick={handleClose} color={appTheme == 'dark' ? 'secondary' : 'primary'}>
                         Cancel
                     </Button>
                     <Button onClick={handleDelete} variant="contained" color="primary">
diff --git a/apps/antalmanac/src/components/Calendar/Toolbar/EditSchedule/ScheduleNameDialog.tsx b/apps/antalmanac/src/components/Calendar/Toolbar/EditSchedule/ScheduleNameDialog.tsx
index 33e4bc69c..937f443d6 100644
--- a/apps/antalmanac/src/components/Calendar/Toolbar/EditSchedule/ScheduleNameDialog.tsx
+++ b/apps/antalmanac/src/components/Calendar/Toolbar/EditSchedule/ScheduleNameDialog.tsx
@@ -15,7 +15,7 @@ import { ClassNameMap } from '@material-ui/core/styles/withStyles';
 import { Add, Edit } from '@material-ui/icons';
 
 import { addSchedule, renameSchedule } from '$actions/AppStoreActions';
-import { isDarkMode } from '$lib/helpers';
+import { useThemeStore } from '$stores/SettingsStore';
 
 const styles = () => ({
     addButton: {
@@ -35,6 +35,8 @@ interface ScheduleNameDialogProps {
 }
 
 const ScheduleNameDialog = forwardRef((props: ScheduleNameDialogProps, ref) => {
+    const appTheme = useThemeStore((store) => store.appTheme);
+
     const { classes, onOpen, onClose, scheduleNames, scheduleRenameIndex } = props;
 
     const [isOpen, setIsOpen] = useState(false);
@@ -143,7 +145,7 @@ const ScheduleNameDialog = forwardRef((props: ScheduleNameDialogProps, ref) => {
                 </DialogContent>
 
                 <DialogActions>
-                    <Button onClick={handleCancel} color={isDarkMode() ? 'secondary' : 'primary'}>
+                    <Button onClick={handleCancel} color={appTheme == 'dark' ? 'secondary' : 'primary'}>
                         Cancel
                     </Button>
                     <Button
diff --git a/apps/antalmanac/src/components/Header/LoadSaveFunctionality.tsx b/apps/antalmanac/src/components/Header/LoadSaveFunctionality.tsx
index b3d9675b2..7e6a797b9 100644
--- a/apps/antalmanac/src/components/Header/LoadSaveFunctionality.tsx
+++ b/apps/antalmanac/src/components/Header/LoadSaveFunctionality.tsx
@@ -14,13 +14,14 @@ import { ChangeEvent, PureComponent, useEffect, useState } from 'react';
 
 import { LoadingButton } from '@mui/lab';
 import { loadSchedule, saveSchedule } from '$actions/AppStoreActions';
-import { isDarkMode } from '$lib/helpers';
+import { useThemeStore } from '$stores/SettingsStore';
 
 interface LoadSaveButtonBaseProps {
     action: typeof saveSchedule;
     actionName: 'Save' | 'Load';
     disabled: boolean;
     loading: boolean;
+    colorType: 'primary' | 'secondary';
 }
 
 interface LoadSaveButtonBaseState {
@@ -123,10 +124,10 @@ class LoadSaveButtonBase extends PureComponent<LoadSaveButtonBaseProps, LoadSave
                         />
                     </DialogContent>
                     <DialogActions>
-                        <Button onClick={() => this.handleClose(true)} color={isDarkMode() ? 'secondary' : 'primary'}>
+                        <Button onClick={() => this.handleClose(true)} color={this.props.colorType}>
                             {'Cancel'}
                         </Button>
-                        <Button onClick={() => this.handleClose(false)} color={isDarkMode() ? 'secondary' : 'primary'}>
+                        <Button onClick={() => this.handleClose(false)} color={this.props.colorType}>
                             {this.props.actionName}
                         </Button>
                     </DialogActions>
@@ -137,6 +138,8 @@ class LoadSaveButtonBase extends PureComponent<LoadSaveButtonBaseProps, LoadSave
 }
 
 const LoadSaveScheduleFunctionality = () => {
+    const appTheme = useThemeStore((store) => store.appTheme);
+
     const [loading, setLoading] = useState(false);
 
     const loadScheduleAndSetLoading = async (userID: string, rememberMe: boolean) => {
@@ -158,12 +161,19 @@ const LoadSaveScheduleFunctionality = () => {
 
     return (
         <>
-            <LoadSaveButtonBase actionName={'Save'} action={saveSchedule} disabled={loading} loading={false} />
+            <LoadSaveButtonBase
+                actionName={'Save'}
+                action={saveSchedule}
+                disabled={loading}
+                loading={false}
+                colorType={appTheme == 'dark' ? 'primary' : 'secondary'}
+            />
             <LoadSaveButtonBase
                 actionName={'Load'}
                 action={loadScheduleAndSetLoading}
                 disabled={false}
                 loading={loading}
+                colorType={appTheme == 'dark' ? 'primary' : 'secondary'}
             />
         </>
     );
diff --git a/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx b/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx
index 2375e8b8b..60f2b7f4a 100644
--- a/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx
+++ b/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx
@@ -14,7 +14,7 @@ import loadingGif from './SearchForm/Gifs/loading.gif';
 import darkNoNothing from './static/dark-no_results.png';
 import noNothing from './static/no_results.png';
 import AppStore from '$stores/AppStore';
-import { isDarkMode } from '$lib/helpers';
+import { useThemeStore } from '$stores/SettingsStore';
 import Grades from '$lib/grades';
 import analyticsEnum from '$lib/analytics';
 import { openSnackbar } from '$actions/AppStoreActions';
@@ -52,6 +52,8 @@ const flattenSOCObject = (SOCObject: WebsocAPIResponse): (WebsocSchool | WebsocD
 const RecruitmentBanner = () => {
     const [bannerVisibility, setBannerVisibility] = useState(true);
 
+    const appTheme = useThemeStore((store) => store.appTheme);
+
     // Display recruitment banner if more than 11 weeks (in ms) has passed since last dismissal
     const recruitmentDismissalTime = window.localStorage.getItem('recruitmentDismissalTime');
     const dismissedRecently =
@@ -67,8 +69,8 @@ const RecruitmentBanner = () => {
                     icon={false}
                     severity="info"
                     style={{
-                        color: isDarkMode() ? '#ece6e6' : '#2e2e2e',
-                        backgroundColor: isDarkMode() ? '#2e2e2e' : '#ece6e6',
+                        color: appTheme == 'dark' ? '#ece6e6' : '#2e2e2e',
+                        backgroundColor: appTheme == 'dark' ? '#2e2e2e' : '#ece6e6',
                     }}
                     action={
                         <IconButton
@@ -144,18 +146,20 @@ const SectionTableWrapped = (
 };
 
 const LoadingMessage = () => {
+    const appTheme = useThemeStore((store) => store.appTheme);
     return (
         <Box sx={{ height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-            <img src={isDarkMode() ? darkModeLoadingGif : loadingGif} alt="Loading courses" />
+            <img src={appTheme == 'dark' ? darkModeLoadingGif : loadingGif} alt="Loading courses" />
         </Box>
     );
 };
 
 const ErrorMessage = () => {
+    const appTheme = useThemeStore((store) => store.appTheme);
     return (
         <Box sx={{ height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
             <img
-                src={isDarkMode() ? darkNoNothing : noNothing}
+                src={appTheme == 'dark' ? darkNoNothing : noNothing}
                 alt="No Results Found"
                 style={{ objectFit: 'contain', width: '80%', height: '80%' }}
             />
@@ -203,11 +207,10 @@ export default function CourseRenderPane(props: { id?: number }) {
                     ? WebSOC.queryMultiple(websocQueryParams, 'units')
                     : WebSOC.query(websocQueryParams),
                 // Catch the error here so that the course pane still loads even if the grades cache fails to populate
-                Grades.populateGradesCache(gradesQueryParams)
-                    .catch((error) => {
-                        console.error(error);
-                        openSnackbar('error', 'Error loading grades information');
-                    }),
+                Grades.populateGradesCache(gradesQueryParams).catch((error) => {
+                    console.error(error);
+                    openSnackbar('error', 'Error loading grades information');
+                }),
             ]);
 
             setError(false);
diff --git a/apps/antalmanac/src/components/RightPane/RightPaneRoot.tsx b/apps/antalmanac/src/components/RightPane/RightPaneRoot.tsx
index 5b666f5b7..e2701d778 100644
--- a/apps/antalmanac/src/components/RightPane/RightPaneRoot.tsx
+++ b/apps/antalmanac/src/components/RightPane/RightPaneRoot.tsx
@@ -8,7 +8,7 @@ import CoursePane from './CoursePane/CoursePaneRoot';
 import darkModeLoadingGif from './CoursePane/SearchForm/Gifs/dark-loading.gif';
 import loadingGif from './CoursePane/SearchForm/Gifs/loading.gif';
 import { useTabStore } from '$stores/TabStore';
-import { isDarkMode } from '$lib/helpers';
+import { useThemeStore } from '$stores/SettingsStore';
 
 const UCIMap = React.lazy(() => import('../Map'));
 
@@ -47,6 +47,8 @@ const tabs = [
 export default function Desktop({ style }: DesktopTabsProps) {
     const { activeTab, setActiveTab } = useTabStore();
 
+    const appTheme = useThemeStore((store) => store.appTheme);
+
     return (
         <Box style={{ ...style, margin: '0 4px' }}>
             <Paper elevation={0} variant="outlined" square style={{ borderRadius: '4px 4px 0 0' }}>
@@ -81,7 +83,7 @@ export default function Desktop({ style }: DesktopTabsProps) {
                     <Suspense
                         fallback={
                             <div style={styles.fallback}>
-                                <img src={isDarkMode() ? darkModeLoadingGif : loadingGif} alt="Loading map" />
+                                <img src={appTheme == 'dark' ? darkModeLoadingGif : loadingGif} alt="Loading map" />
                             </div>
                         }
                     >
diff --git a/apps/antalmanac/src/components/RightPane/SectionTable/GradesPopup.tsx b/apps/antalmanac/src/components/RightPane/SectionTable/GradesPopup.tsx
index 01045f8d0..03cc03e9c 100644
--- a/apps/antalmanac/src/components/RightPane/SectionTable/GradesPopup.tsx
+++ b/apps/antalmanac/src/components/RightPane/SectionTable/GradesPopup.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect, useMemo } from 'react';
 import { Bar, BarChart, CartesianGrid, ResponsiveContainer, XAxis, YAxis } from 'recharts';
 import { Box, Link, Typography, Skeleton } from '@mui/material';
-import { isDarkMode } from '$lib/helpers';
+import { useThemeStore } from '$stores/SettingsStore';
 import GradesHelper, { type Grades } from '$lib/grades';
 
 export interface GradeData {
@@ -51,6 +51,8 @@ export interface GradesPopupProps {
 }
 
 function GradesPopup(props: GradesPopupProps) {
+    const appTheme = useThemeStore((store) => store.appTheme);
+
     const { deptCode, courseNumber, instructor = '', isMobileScreen } = props;
 
     const [loading, setLoading] = useState(true);
@@ -106,7 +108,7 @@ function GradesPopup(props: GradesPopupProps) {
     }
 
     const encodedDept = encodeURIComponent(deptCode);
-    const axisColor = isDarkMode() ? '#fff' : '#111';
+    const axisColor = appTheme == 'dark' ? '#fff' : '#111';
 
     return (
         <Box sx={{ padding: '4px' }}>
diff --git a/apps/antalmanac/src/components/RightPane/SectionTable/PrereqTree.tsx b/apps/antalmanac/src/components/RightPane/SectionTable/PrereqTree.tsx
index 1bc339d09..cd519897a 100644
--- a/apps/antalmanac/src/components/RightPane/SectionTable/PrereqTree.tsx
+++ b/apps/antalmanac/src/components/RightPane/SectionTable/PrereqTree.tsx
@@ -4,7 +4,7 @@ import { FC, useState } from 'react';
 import { Button, Modal, Popover } from '@material-ui/core';
 
 import { CourseInfo } from './CourseInfoBar';
-import { isDarkMode } from '$lib/helpers';
+import { useThemeStore } from '$stores/SettingsStore';
 
 import './PrereqTree.css';
 
@@ -23,13 +23,14 @@ interface NodeProps {
 }
 
 const Node: FC<NodeProps> = (props) => {
+    const appTheme = useThemeStore((store) => store.appTheme);
     return (
         <div style={{ padding: '1px 0' }} className={`${props.node}`} key={props.index}>
             <div
                 className={'course'}
                 style={{
-                    backgroundColor: isDarkMode() ? '#303030' : '#e0e0e0',
-                    color: isDarkMode() ? '#bfbfbf' : 'black',
+                    backgroundColor: appTheme == 'dark' ? '#303030' : '#e0e0e0',
+                    color: appTheme == 'dark' ? '#bfbfbf' : 'black',
                 }}
             >
                 {props.label}
diff --git a/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody.tsx b/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody.tsx
index c2f23e89b..25667fa33 100644
--- a/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody.tsx
+++ b/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody.tsx
@@ -25,7 +25,7 @@ import { ColorAndDelete, ScheduleAddCell } from './SectionTableButtons';
 import restrictionsMapping from './static/restrictionsMapping.json';
 import GradesPopup from './GradesPopup';
 import analyticsEnum, { logAnalytics } from '$lib/analytics';
-import { clickToCopy, isDarkMode } from '$lib/helpers';
+import { clickToCopy } from '$lib/helpers';
 import { CourseDetails } from '$lib/course_data.types';
 import Grades from '$lib/grades';
 import AppStore from '$stores/AppStore';
@@ -33,14 +33,13 @@ import { useTabStore } from '$stores/TabStore';
 import locationIds from '$lib/location_ids';
 import { normalizeTime, parseDaysString, formatTimes } from '$stores/calendarizeHelpers';
 import useColumnStore, { type SectionTableColumn } from '$stores/ColumnStore';
-import { useTimeFormatStore } from '$stores/SettingsStore';
+import { useTimeFormatStore, useThemeStore } from '$stores/SettingsStore';
 
 const styles: Styles<Theme, object> = (theme) => ({
     sectionCode: {
         display: 'inline-flex',
         cursor: 'pointer',
         '&:hover': {
-            color: isDarkMode() ? 'gold' : 'blueviolet',
             cursor: 'pointer',
         },
         alignSelf: 'center',
@@ -50,23 +49,12 @@ const styles: Styles<Theme, object> = (theme) => ({
             backgroundColor: theme.palette.action.hover,
         },
     },
-    tr: {
-        '&.addedCourse': {
-            background: isDarkMode() ? '#b0b04f' : '#fcfc97',
-        },
-        '&.scheduleConflict': {
-            background: isDarkMode() ? '#121212' : '#a0a0a0',
-            opacity: isDarkMode() ? 0.6 : 1,
-        },
-    },
     cell: {},
     link: {
         textDecoration: 'underline',
-        color: isDarkMode() ? 'dodgerblue' : 'blue',
         cursor: 'pointer',
     },
     mapLink: {
-        color: isDarkMode() ? 'dodgerblue' : 'blue',
         cursor: 'pointer',
         background: 'none !important',
         border: 'none',
@@ -100,7 +88,6 @@ const styles: Styles<Theme, object> = (theme) => ({
     Tap: { color: '#8d2df0' },
     Tut: { color: '#ffc705' },
     popoverText: {
-        color: isDarkMode() ? 'dodgerblue' : 'blue',
         cursor: 'pointer',
     },
     codeCell: {
@@ -121,8 +108,20 @@ interface CourseCodeCellProps {
 }
 
 const CourseCodeCell = withStyles(styles)((props: CourseCodeCellProps) => {
+    const appTheme = useThemeStore((store) => store.appTheme);
+
     const { classes, sectionCode } = props;
 
+    const [isHovered, setIsHovered] = useState(false);
+
+    const handleMouseEnter = () => {
+        setIsHovered(true);
+    };
+
+    const handleMouseLeave = () => {
+        setIsHovered(false);
+    };
+
     return (
         <NoPaddingTableCell className={`${classes.cell} ${classes.codeCell}`}>
             <Tooltip title="Click to copy course code" placement="bottom" enterDelay={150}>
@@ -136,6 +135,11 @@ const CourseCodeCell = withStyles(styles)((props: CourseCodeCellProps) => {
                     }}
                     className={classes.sectionCode}
                     label={sectionCode}
+                    onMouseEnter={handleMouseEnter}
+                    onMouseLeave={handleMouseLeave}
+                    style={{
+                        color: isHovered ? (appTheme == 'dark' ? 'gold' : 'blueviolet') : '',
+                    }}
                     size="small"
                 />
             </Tooltip>
@@ -232,6 +236,8 @@ interface GPACellProps {
 }
 
 function GPACell(props: GPACellProps) {
+    const appTheme = useThemeStore((store) => store.appTheme);
+
     const { deptCode, courseNumber, instructors } = props;
 
     const [gpa, setGpa] = useState('');
@@ -263,7 +269,7 @@ function GPACell(props: GPACellProps) {
         <NoPaddingTableCell>
             <Button
                 style={{
-                    color: isDarkMode() ? 'dodgerblue' : 'blue',
+                    color: appTheme == 'dark' ? 'dodgerblue' : 'blue',
                     padding: 0,
                     minWidth: 0,
                     fontWeight: 400,
@@ -300,6 +306,8 @@ interface LocationsCellProps {
 }
 
 const LocationsCell = withStyles(styles)((props: LocationsCellProps) => {
+    const appTheme = useThemeStore((store) => store.appTheme);
+
     const { classes, meetings } = props;
 
     const { setActiveTab } = useTabStore();
@@ -317,7 +325,12 @@ const LocationsCell = withStyles(styles)((props: LocationsCellProps) => {
                         const buildingId = locationIds[buildingName];
                         return (
                             <Fragment key={meeting.timeIsTBA + bldg}>
-                                <Link className={classes.mapLink} to={`/map?location=${buildingId}`} onClick={focusMap}>
+                                <Link
+                                    className={classes.mapLink}
+                                    to={`/map?location=${buildingId}`}
+                                    onClick={focusMap}
+                                    color={appTheme == 'dark' ? 'dodgerblue' : 'blue'}
+                                >
                                     {bldg}
                                 </Link>
                                 <br />
@@ -486,6 +499,8 @@ const tableBodyCells: Record<SectionTableColumn, React.ComponentType<any>> = {
  * TODO: SectionNum name parity -> SectionNumber
  */
 const SectionTableBody = withStyles(styles)((props: SectionTableBodyProps) => {
+    const appTheme = useThemeStore((store) => store.appTheme);
+
     const { classes, section, courseDetails, term, allowHighlight, scheduleNames } = props;
 
     const activeColumns = useColumnStore((store) => store.activeColumns);
@@ -592,6 +607,19 @@ const SectionTableBody = withStyles(styles)((props: SectionTableBodyProps) => {
                 // allowHighlight is ALWAYS false when in Added Course Pane and ALWAYS true when in CourseRenderPane
                 addedCourse ? { addedCourse: addedCourse && allowHighlight } : { scheduleConflict: scheduleConflict }
             )}
+            style={{
+                background:
+                    addedCourse && allowHighlight
+                        ? appTheme == 'dark'
+                            ? '#b0b04f'
+                            : '#fcfc97'
+                        : scheduleConflict && allowHighlight
+                        ? appTheme == 'dark'
+                            ? '#121212'
+                            : '#a0a0a0'
+                        : '',
+                opacity: scheduleConflict && allowHighlight && appTheme == 'dark' ? 0.6 : 1,
+            }}
         >
             {!addedCourse ? (
                 <ScheduleAddCell
diff --git a/apps/antalmanac/src/components/buttons/Screenshot.tsx b/apps/antalmanac/src/components/buttons/Screenshot.tsx
index e73bcd1ce..ce75a5d1f 100644
--- a/apps/antalmanac/src/components/buttons/Screenshot.tsx
+++ b/apps/antalmanac/src/components/buttons/Screenshot.tsx
@@ -6,17 +6,18 @@ import html2canvas from 'html2canvas';
 import { PureComponent } from 'react';
 
 import analyticsEnum, { logAnalytics } from '$lib/analytics';
-import { isDarkMode } from '$lib/helpers';
+import { useThemeStore } from '$stores/SettingsStore';
 
 class ScreenshotButton extends PureComponent {
     handleClick = () => {
+        const appTheme = useThemeStore((store) => store.appTheme);
         logAnalytics({
             category: analyticsEnum.calendar.title,
             action: analyticsEnum.calendar.actions.SCREENSHOT,
         });
         void html2canvas(document.getElementById('screenshot') as HTMLElement, {
             scale: 2.5,
-            backgroundColor: isDarkMode() ? '#303030' : '#fafafa',
+            backgroundColor: appTheme == 'dark' ? '#303030' : '#fafafa',
         }).then((canvas) => {
             const imgRaw = canvas.toDataURL('image/png');
             saveAs(imgRaw, 'Schedule.png');
diff --git a/apps/antalmanac/src/components/dialogs/AddSchedule.tsx b/apps/antalmanac/src/components/dialogs/AddSchedule.tsx
index 318da32fe..48f9dd33b 100644
--- a/apps/antalmanac/src/components/dialogs/AddSchedule.tsx
+++ b/apps/antalmanac/src/components/dialogs/AddSchedule.tsx
@@ -10,7 +10,7 @@ import {
     Box,
 } from '@mui/material';
 import { addSchedule } from '$actions/AppStoreActions';
-import { isDarkMode } from '$lib/helpers';
+import { useThemeStore } from '$stores/SettingsStore';
 import AppStore from '$stores/AppStore';
 
 type ScheduleNameDialogProps = DialogProps;
@@ -19,6 +19,8 @@ type ScheduleNameDialogProps = DialogProps;
  * Dialog with a text field to add a schedule.
  */
 function AddScheduleDialog(props: ScheduleNameDialogProps) {
+    const appTheme = useThemeStore((store) => store.appTheme);
+
     /**
      * {@link props.onClose} also needs to be forwarded to the {@link Dialog} component.
      * A custom {@link onKeyDown} handler is provided to handle the Enter and Escape keys.
@@ -88,7 +90,7 @@ function AddScheduleDialog(props: ScheduleNameDialogProps) {
             </DialogContent>
 
             <DialogActions>
-                <Button onClick={handleCancel} color={isDarkMode() ? 'secondary' : 'primary'}>
+                <Button onClick={handleCancel} color={appTheme == 'dark' ? 'secondary' : 'primary'}>
                     Cancel
                 </Button>
                 <Button onClick={submitName} variant="contained" color="primary" disabled={name.trim() === ''}>
diff --git a/apps/antalmanac/src/components/dialogs/DeleteSchedule.tsx b/apps/antalmanac/src/components/dialogs/DeleteSchedule.tsx
index 1dc62fd1d..271e7e632 100644
--- a/apps/antalmanac/src/components/dialogs/DeleteSchedule.tsx
+++ b/apps/antalmanac/src/components/dialogs/DeleteSchedule.tsx
@@ -9,7 +9,7 @@ import {
     type DialogProps,
 } from '@mui/material';
 import { deleteSchedule } from '$actions/AppStoreActions';
-import { isDarkMode } from '$lib/helpers';
+import { useThemeStore } from '$stores/SettingsStore';
 import AppStore from '$stores/AppStore';
 
 interface ScheduleNameDialogProps extends DialogProps {
@@ -23,6 +23,8 @@ interface ScheduleNameDialogProps extends DialogProps {
  * Dialog with a prompt to delete the specified schedule.
  */
 function DeleteScheduleDialog(props: ScheduleNameDialogProps) {
+    const appTheme = useThemeStore((store) => store.appTheme);
+
     /**
      * {@link props.onClose} also needs to be forwarded to the {@link Dialog} component.
      */
@@ -55,7 +57,7 @@ function DeleteScheduleDialog(props: ScheduleNameDialogProps) {
             </DialogContent>
 
             <DialogActions>
-                <Button onClick={handleCancel} color={isDarkMode() ? 'secondary' : 'primary'}>
+                <Button onClick={handleCancel} color={appTheme == 'dark' ? 'secondary' : 'primary'}>
                     Cancel
                 </Button>
                 <Button onClick={handleDelete} variant="contained" color="primary">
diff --git a/apps/antalmanac/src/components/dialogs/RenameSchedule.tsx b/apps/antalmanac/src/components/dialogs/RenameSchedule.tsx
index 8ee66fc06..16bc7315f 100644
--- a/apps/antalmanac/src/components/dialogs/RenameSchedule.tsx
+++ b/apps/antalmanac/src/components/dialogs/RenameSchedule.tsx
@@ -10,7 +10,6 @@ import {
     type DialogProps,
 } from '@mui/material';
 import { renameSchedule } from '$actions/AppStoreActions';
-import { isDarkMode } from '$lib/helpers';
 import AppStore from '$stores/AppStore';
 
 interface ScheduleNameDialogProps extends DialogProps {
diff --git a/apps/antalmanac/src/lib/helpers.ts b/apps/antalmanac/src/lib/helpers.ts
index f4004dd51..059e74761 100644
--- a/apps/antalmanac/src/lib/helpers.ts
+++ b/apps/antalmanac/src/lib/helpers.ts
@@ -41,15 +41,4 @@ export async function clickToCopy(event: React.MouseEvent<HTMLElement, MouseEven
     openSnackbar('success', 'WebsocSection code copied to clipboard');
 }
 
-export function isDarkMode() {
-    switch (useThemeStore.getState().appTheme) {
-        case 'light':
-            return false;
-        case 'dark':
-            return true;
-        default:
-            return window.matchMedia('(prefers-color-scheme: dark)').matches;
-    }
-}
-
 export const FAKE_LOCATIONS = ['VRTL REMOTE', 'ON LINE', 'TBA'];

From a39323fd08df87d6211e0200c7c73acac9f71ec2 Mon Sep 17 00:00:00 2001
From: Sean Kelman <seanrkelman@gmail.com>
Date: Fri, 19 Jan 2024 11:01:25 -0800
Subject: [PATCH 3/7] added isDark to ThemeStore

---
 .../Calendar/CourseCalendarEvent.tsx          |  4 ++--
 .../CustomEventDialog/CustomEventDialog.tsx   |  4 ++--
 .../EditSchedule/DeleteScheduleDialog.tsx     |  4 ++--
 .../EditSchedule/ScheduleNameDialog.tsx       |  4 ++--
 .../Header/LoadSaveFunctionality.tsx          |  6 ++---
 .../src/components/Header/SettingsMenu.tsx    | 18 ++++++++-------
 .../RightPane/CoursePane/CourseRenderPane.tsx | 14 +++++------
 .../components/RightPane/RightPaneRoot.tsx    |  4 ++--
 .../RightPane/SectionTable/GradesPopup.tsx    |  2 +-
 .../RightPane/SectionTable/PrereqTree.tsx     |  4 ++--
 .../SectionTable/SectionTableBody.tsx         | 20 ++++++++--------
 .../src/components/buttons/Screenshot.tsx     |  2 +-
 .../src/components/dialogs/AddSchedule.tsx    |  4 ++--
 .../src/components/dialogs/DeleteSchedule.tsx |  4 ++--
 apps/antalmanac/src/stores/SettingsStore.ts   | 23 ++++++++++++++++++-
 15 files changed, 70 insertions(+), 47 deletions(-)

diff --git a/apps/antalmanac/src/components/Calendar/CourseCalendarEvent.tsx b/apps/antalmanac/src/components/Calendar/CourseCalendarEvent.tsx
index 1939e906c..6cb7d5cc4 100644
--- a/apps/antalmanac/src/components/Calendar/CourseCalendarEvent.tsx
+++ b/apps/antalmanac/src/components/Calendar/CourseCalendarEvent.tsx
@@ -176,7 +176,7 @@ const CourseCalendarEvent = (props: CourseCalendarEventProps) => {
 
     const { setActiveTab } = useTabStore();
     const { isMilitaryTime } = useTimeFormatStore();
-    const appTheme = useThemeStore((store) => store.appTheme);
+    const isDark = useThemeStore((store) => store.isDark);
 
     const focusMap = useCallback(() => {
         setActiveTab(2);
@@ -262,7 +262,7 @@ const CourseCalendarEvent = (props: CourseCalendarEventProps) => {
                                             className={classes.clickableLocation}
                                             to={`/map?location=${locationIds[location.building] ?? 0}`}
                                             onClick={focusMap}
-                                            color={appTheme == 'dark' ? '#1cbeff' : 'blue'}
+                                            color={isDark ? '#1cbeff' : 'blue'}
                                         >
                                             {location.building} {location.room}
                                         </Link>
diff --git a/apps/antalmanac/src/components/Calendar/Toolbar/CustomEventDialog/CustomEventDialog.tsx b/apps/antalmanac/src/components/Calendar/Toolbar/CustomEventDialog/CustomEventDialog.tsx
index f8c08150a..4fd5978dd 100644
--- a/apps/antalmanac/src/components/Calendar/Toolbar/CustomEventDialog/CustomEventDialog.tsx
+++ b/apps/antalmanac/src/components/Calendar/Toolbar/CustomEventDialog/CustomEventDialog.tsx
@@ -139,7 +139,7 @@ function CustomEventDialogs(props: CustomEventDialogProps) {
         };
     }, []);
 
-    const appTheme = useThemeStore.getState().appTheme;
+    const isDark = useThemeStore.getState().isDark;
     return (
         <>
             {props.customEvent ? (
@@ -219,7 +219,7 @@ function CustomEventDialogs(props: CustomEventDialogProps) {
                 </DialogContent>
 
                 <DialogActions>
-                    <Button onClick={handleClose} color={appTheme == 'dark' ? 'secondary' : 'primary'}>
+                    <Button onClick={handleClose} color={isDark ? 'secondary' : 'primary'}>
                         Cancel
                     </Button>
                     <Button onClick={handleSubmit} variant="contained" color="primary" disabled={disabled}>
diff --git a/apps/antalmanac/src/components/Calendar/Toolbar/EditSchedule/DeleteScheduleDialog.tsx b/apps/antalmanac/src/components/Calendar/Toolbar/EditSchedule/DeleteScheduleDialog.tsx
index 2b5df1cae..1c6e33047 100644
--- a/apps/antalmanac/src/components/Calendar/Toolbar/EditSchedule/DeleteScheduleDialog.tsx
+++ b/apps/antalmanac/src/components/Calendar/Toolbar/EditSchedule/DeleteScheduleDialog.tsx
@@ -23,7 +23,7 @@ interface DeleteScheduleDialogProps {
 }
 
 const DeleteScheduleDialog = (props: DeleteScheduleDialogProps) => {
-    const appTheme = useThemeStore((store) => store.appTheme);
+    const isDark = useThemeStore((store) => store.isDark);
 
     const { scheduleIndex } = props;
 
@@ -60,7 +60,7 @@ const DeleteScheduleDialog = (props: DeleteScheduleDialogProps) => {
                     </DialogContentText>
                 </DialogContent>
                 <DialogActions>
-                    <Button onClick={handleClose} color={appTheme == 'dark' ? 'secondary' : 'primary'}>
+                    <Button onClick={handleClose} color={isDark ? 'secondary' : 'primary'}>
                         Cancel
                     </Button>
                     <Button onClick={handleDelete} variant="contained" color="primary">
diff --git a/apps/antalmanac/src/components/Calendar/Toolbar/EditSchedule/ScheduleNameDialog.tsx b/apps/antalmanac/src/components/Calendar/Toolbar/EditSchedule/ScheduleNameDialog.tsx
index 937f443d6..e87ec0228 100644
--- a/apps/antalmanac/src/components/Calendar/Toolbar/EditSchedule/ScheduleNameDialog.tsx
+++ b/apps/antalmanac/src/components/Calendar/Toolbar/EditSchedule/ScheduleNameDialog.tsx
@@ -35,7 +35,7 @@ interface ScheduleNameDialogProps {
 }
 
 const ScheduleNameDialog = forwardRef((props: ScheduleNameDialogProps, ref) => {
-    const appTheme = useThemeStore((store) => store.appTheme);
+    const isDark = useThemeStore((store) => store.isDark);
 
     const { classes, onOpen, onClose, scheduleNames, scheduleRenameIndex } = props;
 
@@ -145,7 +145,7 @@ const ScheduleNameDialog = forwardRef((props: ScheduleNameDialogProps, ref) => {
                 </DialogContent>
 
                 <DialogActions>
-                    <Button onClick={handleCancel} color={appTheme == 'dark' ? 'secondary' : 'primary'}>
+                    <Button onClick={handleCancel} color={isDark ? 'secondary' : 'primary'}>
                         Cancel
                     </Button>
                     <Button
diff --git a/apps/antalmanac/src/components/Header/LoadSaveFunctionality.tsx b/apps/antalmanac/src/components/Header/LoadSaveFunctionality.tsx
index 5f3e76761..345892e7a 100644
--- a/apps/antalmanac/src/components/Header/LoadSaveFunctionality.tsx
+++ b/apps/antalmanac/src/components/Header/LoadSaveFunctionality.tsx
@@ -142,7 +142,7 @@ class LoadSaveButtonBase extends PureComponent<LoadSaveButtonBaseProps, LoadSave
 }
 
 const LoadSaveScheduleFunctionality = () => {
-    const appTheme = useThemeStore((store) => store.appTheme);
+    const isDark = useThemeStore((store) => store.isDark);
 
     const [loading, setLoading] = useState(false);
     const [skeletonMode, setSkeletonMode] = useState(AppStore.getSkeletonMode());
@@ -183,14 +183,14 @@ const LoadSaveScheduleFunctionality = () => {
                 action={saveSchedule}
                 disabled={loading}
                 loading={false}
-                colorType={appTheme == 'dark' ? 'primary' : 'secondary'}
+                colorType={isDark ? 'primary' : 'secondary'}
             />
             <LoadSaveButtonBase
                 actionName={'Load'}
                 action={loadScheduleAndSetLoading}
                 disabled={skeletonMode}
                 loading={loading}
-                colorType={appTheme == 'dark' ? 'primary' : 'secondary'}
+                colorType={isDark ? 'primary' : 'secondary'}
             />
         </>
     );
diff --git a/apps/antalmanac/src/components/Header/SettingsMenu.tsx b/apps/antalmanac/src/components/Header/SettingsMenu.tsx
index f4b72b6f9..0893fbd03 100644
--- a/apps/antalmanac/src/components/Header/SettingsMenu.tsx
+++ b/apps/antalmanac/src/components/Header/SettingsMenu.tsx
@@ -17,14 +17,15 @@ const darkSelectedStyle: CSSProperties = {
     color: '#99CCF3',
 };
 
-function getSelectedStyle(buttonValue: string, themeSetting: string, appTheme: string) {
-    return themeSetting === buttonValue ? (appTheme == 'dark' ? darkSelectedStyle : lightSelectedStyle) : {};
+function getSelectedStyle(buttonValue: string, themeSetting: string, appTheme: string, isDark: boolean) {
+    return themeSetting === buttonValue ? (isDark ? darkSelectedStyle : lightSelectedStyle) : {};
 }
 
 function ThemeMenu() {
-    const [themeSetting, appTheme, setTheme] = useThemeStore((store) => [
+    const [themeSetting, appTheme, isDark, setTheme] = useThemeStore((store) => [
         store.themeSetting,
         store.appTheme,
+        store.isDark,
         store.setAppTheme,
     ]);
 
@@ -45,7 +46,7 @@ function ThemeMenu() {
                         padding: '1rem 2rem',
                         borderRadius: '12px 0px 0px 12px',
                         width: '100%',
-                        ...getSelectedStyle('light', themeSetting, appTheme),
+                        ...getSelectedStyle('light', themeSetting, appTheme, isDark),
                     }}
                     value="light"
                     onClick={handleThemeChange}
@@ -57,7 +58,7 @@ function ThemeMenu() {
                     style={{
                         padding: '1rem 2rem',
                         width: '100%',
-                        ...getSelectedStyle('system', themeSetting, appTheme),
+                        ...getSelectedStyle('system', themeSetting, appTheme, isDark),
                     }}
                     value="system"
                     onClick={handleThemeChange}
@@ -70,7 +71,7 @@ function ThemeMenu() {
                         padding: '1rem 2rem',
                         borderRadius: '0px 12px 12px 0px',
                         width: '100%',
-                        ...getSelectedStyle('dark', themeSetting, appTheme),
+                        ...getSelectedStyle('dark', themeSetting, appTheme, isDark),
                     }}
                     value="dark"
                     onClick={handleThemeChange}
@@ -84,6 +85,7 @@ function ThemeMenu() {
 
 function TimeMenu() {
     const [isMilitaryTime, setTimeFormat] = useTimeFormatStore((store) => [store.isMilitaryTime, store.setTimeFormat]);
+    const isDark = useThemeStore((store) => store.isDark);
     const theme = useThemeStore((store) => store.appTheme);
 
     const handleTimeFormatChange = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -109,7 +111,7 @@ function TimeMenu() {
                         borderRadius: '12px 0px 0px 12px',
                         width: '100%',
                         fontSize: '12px',
-                        ...getSelectedStyle('false', isMilitaryTime.toString(), theme),
+                        ...getSelectedStyle('false', isMilitaryTime.toString(), theme, isDark),
                     }}
                     value="false"
                     onClick={handleTimeFormatChange}
@@ -123,7 +125,7 @@ function TimeMenu() {
                         borderRadius: '0px 12px 12px 0px',
                         width: '100%',
                         fontSize: '12px',
-                        ...getSelectedStyle('true', isMilitaryTime.toString(), theme),
+                        ...getSelectedStyle('true', isMilitaryTime.toString(), theme, isDark),
                     }}
                     value="true"
                     onClick={handleTimeFormatChange}
diff --git a/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx b/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx
index 60f2b7f4a..2fb68eec9 100644
--- a/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx
+++ b/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx
@@ -52,7 +52,7 @@ const flattenSOCObject = (SOCObject: WebsocAPIResponse): (WebsocSchool | WebsocD
 const RecruitmentBanner = () => {
     const [bannerVisibility, setBannerVisibility] = useState(true);
 
-    const appTheme = useThemeStore((store) => store.appTheme);
+    const isDark = useThemeStore((store) => store.isDark);
 
     // Display recruitment banner if more than 11 weeks (in ms) has passed since last dismissal
     const recruitmentDismissalTime = window.localStorage.getItem('recruitmentDismissalTime');
@@ -69,8 +69,8 @@ const RecruitmentBanner = () => {
                     icon={false}
                     severity="info"
                     style={{
-                        color: appTheme == 'dark' ? '#ece6e6' : '#2e2e2e',
-                        backgroundColor: appTheme == 'dark' ? '#2e2e2e' : '#ece6e6',
+                        color: isDark ? '#ece6e6' : '#2e2e2e',
+                        backgroundColor: isDark ? '#2e2e2e' : '#ece6e6',
                     }}
                     action={
                         <IconButton
@@ -146,20 +146,20 @@ const SectionTableWrapped = (
 };
 
 const LoadingMessage = () => {
-    const appTheme = useThemeStore((store) => store.appTheme);
+    const isDark = useThemeStore((store) => store.isDark);
     return (
         <Box sx={{ height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-            <img src={appTheme == 'dark' ? darkModeLoadingGif : loadingGif} alt="Loading courses" />
+            <img src={isDark ? darkModeLoadingGif : loadingGif} alt="Loading courses" />
         </Box>
     );
 };
 
 const ErrorMessage = () => {
-    const appTheme = useThemeStore((store) => store.appTheme);
+    const isDark = useThemeStore((store) => store.isDark);
     return (
         <Box sx={{ height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
             <img
-                src={appTheme == 'dark' ? darkNoNothing : noNothing}
+                src={isDark ? darkNoNothing : noNothing}
                 alt="No Results Found"
                 style={{ objectFit: 'contain', width: '80%', height: '80%' }}
             />
diff --git a/apps/antalmanac/src/components/RightPane/RightPaneRoot.tsx b/apps/antalmanac/src/components/RightPane/RightPaneRoot.tsx
index e2701d778..0553af29e 100644
--- a/apps/antalmanac/src/components/RightPane/RightPaneRoot.tsx
+++ b/apps/antalmanac/src/components/RightPane/RightPaneRoot.tsx
@@ -47,7 +47,7 @@ const tabs = [
 export default function Desktop({ style }: DesktopTabsProps) {
     const { activeTab, setActiveTab } = useTabStore();
 
-    const appTheme = useThemeStore((store) => store.appTheme);
+    const isDark = useThemeStore((store) => store.isDark);
 
     return (
         <Box style={{ ...style, margin: '0 4px' }}>
@@ -83,7 +83,7 @@ export default function Desktop({ style }: DesktopTabsProps) {
                     <Suspense
                         fallback={
                             <div style={styles.fallback}>
-                                <img src={appTheme == 'dark' ? darkModeLoadingGif : loadingGif} alt="Loading map" />
+                                <img src={isDark ? darkModeLoadingGif : loadingGif} alt="Loading map" />
                             </div>
                         }
                     >
diff --git a/apps/antalmanac/src/components/RightPane/SectionTable/GradesPopup.tsx b/apps/antalmanac/src/components/RightPane/SectionTable/GradesPopup.tsx
index 03cc03e9c..e2467e015 100644
--- a/apps/antalmanac/src/components/RightPane/SectionTable/GradesPopup.tsx
+++ b/apps/antalmanac/src/components/RightPane/SectionTable/GradesPopup.tsx
@@ -108,7 +108,7 @@ function GradesPopup(props: GradesPopupProps) {
     }
 
     const encodedDept = encodeURIComponent(deptCode);
-    const axisColor = appTheme == 'dark' ? '#fff' : '#111';
+    const axisColor = isDark ? '#fff' : '#111';
 
     return (
         <Box sx={{ padding: '4px' }}>
diff --git a/apps/antalmanac/src/components/RightPane/SectionTable/PrereqTree.tsx b/apps/antalmanac/src/components/RightPane/SectionTable/PrereqTree.tsx
index cd519897a..90e3ee0d4 100644
--- a/apps/antalmanac/src/components/RightPane/SectionTable/PrereqTree.tsx
+++ b/apps/antalmanac/src/components/RightPane/SectionTable/PrereqTree.tsx
@@ -29,8 +29,8 @@ const Node: FC<NodeProps> = (props) => {
             <div
                 className={'course'}
                 style={{
-                    backgroundColor: appTheme == 'dark' ? '#303030' : '#e0e0e0',
-                    color: appTheme == 'dark' ? '#bfbfbf' : 'black',
+                    backgroundColor: isDark ? '#303030' : '#e0e0e0',
+                    color: isDark ? '#bfbfbf' : 'black',
                 }}
             >
                 {props.label}
diff --git a/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody.tsx b/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody.tsx
index 25667fa33..29c7b2a68 100644
--- a/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody.tsx
+++ b/apps/antalmanac/src/components/RightPane/SectionTable/SectionTableBody.tsx
@@ -108,7 +108,7 @@ interface CourseCodeCellProps {
 }
 
 const CourseCodeCell = withStyles(styles)((props: CourseCodeCellProps) => {
-    const appTheme = useThemeStore((store) => store.appTheme);
+    const isDark = useThemeStore((store) => store.isDark);
 
     const { classes, sectionCode } = props;
 
@@ -138,7 +138,7 @@ const CourseCodeCell = withStyles(styles)((props: CourseCodeCellProps) => {
                     onMouseEnter={handleMouseEnter}
                     onMouseLeave={handleMouseLeave}
                     style={{
-                        color: isHovered ? (appTheme == 'dark' ? 'gold' : 'blueviolet') : '',
+                        color: isHovered ? (isDark ? 'gold' : 'blueviolet') : '',
                     }}
                     size="small"
                 />
@@ -236,7 +236,7 @@ interface GPACellProps {
 }
 
 function GPACell(props: GPACellProps) {
-    const appTheme = useThemeStore((store) => store.appTheme);
+    const isDark = useThemeStore((store) => store.isDark);
 
     const { deptCode, courseNumber, instructors } = props;
 
@@ -269,7 +269,7 @@ function GPACell(props: GPACellProps) {
         <NoPaddingTableCell>
             <Button
                 style={{
-                    color: appTheme == 'dark' ? 'dodgerblue' : 'blue',
+                    color: isDark ? 'dodgerblue' : 'blue',
                     padding: 0,
                     minWidth: 0,
                     fontWeight: 400,
@@ -306,7 +306,7 @@ interface LocationsCellProps {
 }
 
 const LocationsCell = withStyles(styles)((props: LocationsCellProps) => {
-    const appTheme = useThemeStore((store) => store.appTheme);
+    const isDark = useThemeStore((store) => store.isDark);
 
     const { classes, meetings } = props;
 
@@ -329,7 +329,7 @@ const LocationsCell = withStyles(styles)((props: LocationsCellProps) => {
                                     className={classes.mapLink}
                                     to={`/map?location=${buildingId}`}
                                     onClick={focusMap}
-                                    color={appTheme == 'dark' ? 'dodgerblue' : 'blue'}
+                                    color={isDark ? 'dodgerblue' : 'blue'}
                                 >
                                     {bldg}
                                 </Link>
@@ -499,7 +499,7 @@ const tableBodyCells: Record<SectionTableColumn, React.ComponentType<any>> = {
  * TODO: SectionNum name parity -> SectionNumber
  */
 const SectionTableBody = withStyles(styles)((props: SectionTableBodyProps) => {
-    const appTheme = useThemeStore((store) => store.appTheme);
+    const isDark = useThemeStore((store) => store.isDark);
 
     const { classes, section, courseDetails, term, allowHighlight, scheduleNames } = props;
 
@@ -610,15 +610,15 @@ const SectionTableBody = withStyles(styles)((props: SectionTableBodyProps) => {
             style={{
                 background:
                     addedCourse && allowHighlight
-                        ? appTheme == 'dark'
+                        ? isDark
                             ? '#b0b04f'
                             : '#fcfc97'
                         : scheduleConflict && allowHighlight
-                        ? appTheme == 'dark'
+                        ? isDark
                             ? '#121212'
                             : '#a0a0a0'
                         : '',
-                opacity: scheduleConflict && allowHighlight && appTheme == 'dark' ? 0.6 : 1,
+                opacity: scheduleConflict && allowHighlight && isDark ? 0.6 : 1,
             }}
         >
             {!addedCourse ? (
diff --git a/apps/antalmanac/src/components/buttons/Screenshot.tsx b/apps/antalmanac/src/components/buttons/Screenshot.tsx
index ce75a5d1f..a3fad523e 100644
--- a/apps/antalmanac/src/components/buttons/Screenshot.tsx
+++ b/apps/antalmanac/src/components/buttons/Screenshot.tsx
@@ -17,7 +17,7 @@ class ScreenshotButton extends PureComponent {
         });
         void html2canvas(document.getElementById('screenshot') as HTMLElement, {
             scale: 2.5,
-            backgroundColor: appTheme == 'dark' ? '#303030' : '#fafafa',
+            backgroundColor: isDark ? '#303030' : '#fafafa',
         }).then((canvas) => {
             const imgRaw = canvas.toDataURL('image/png');
             saveAs(imgRaw, 'Schedule.png');
diff --git a/apps/antalmanac/src/components/dialogs/AddSchedule.tsx b/apps/antalmanac/src/components/dialogs/AddSchedule.tsx
index 48f9dd33b..21f475047 100644
--- a/apps/antalmanac/src/components/dialogs/AddSchedule.tsx
+++ b/apps/antalmanac/src/components/dialogs/AddSchedule.tsx
@@ -19,7 +19,7 @@ type ScheduleNameDialogProps = DialogProps;
  * Dialog with a text field to add a schedule.
  */
 function AddScheduleDialog(props: ScheduleNameDialogProps) {
-    const appTheme = useThemeStore((store) => store.appTheme);
+    const isDark = useThemeStore((store) => store.isDark);
 
     /**
      * {@link props.onClose} also needs to be forwarded to the {@link Dialog} component.
@@ -90,7 +90,7 @@ function AddScheduleDialog(props: ScheduleNameDialogProps) {
             </DialogContent>
 
             <DialogActions>
-                <Button onClick={handleCancel} color={appTheme == 'dark' ? 'secondary' : 'primary'}>
+                <Button onClick={handleCancel} color={isDark ? 'secondary' : 'primary'}>
                     Cancel
                 </Button>
                 <Button onClick={submitName} variant="contained" color="primary" disabled={name.trim() === ''}>
diff --git a/apps/antalmanac/src/components/dialogs/DeleteSchedule.tsx b/apps/antalmanac/src/components/dialogs/DeleteSchedule.tsx
index 271e7e632..0c0919f9e 100644
--- a/apps/antalmanac/src/components/dialogs/DeleteSchedule.tsx
+++ b/apps/antalmanac/src/components/dialogs/DeleteSchedule.tsx
@@ -23,7 +23,7 @@ interface ScheduleNameDialogProps extends DialogProps {
  * Dialog with a prompt to delete the specified schedule.
  */
 function DeleteScheduleDialog(props: ScheduleNameDialogProps) {
-    const appTheme = useThemeStore((store) => store.appTheme);
+    const isDark = useThemeStore((store) => store.isDark);
 
     /**
      * {@link props.onClose} also needs to be forwarded to the {@link Dialog} component.
@@ -57,7 +57,7 @@ function DeleteScheduleDialog(props: ScheduleNameDialogProps) {
             </DialogContent>
 
             <DialogActions>
-                <Button onClick={handleCancel} color={appTheme == 'dark' ? 'secondary' : 'primary'}>
+                <Button onClick={handleCancel} color={isDark ? 'secondary' : 'primary'}>
                     Cancel
                 </Button>
                 <Button onClick={handleDelete} variant="contained" color="primary">
diff --git a/apps/antalmanac/src/stores/SettingsStore.ts b/apps/antalmanac/src/stores/SettingsStore.ts
index 5ca0d6dd4..fcaf963f1 100644
--- a/apps/antalmanac/src/stores/SettingsStore.ts
+++ b/apps/antalmanac/src/stores/SettingsStore.ts
@@ -10,6 +10,8 @@ export interface ThemeStore {
      * The 'derived' theme, based on user settings and device preferences
      */
     appTheme: 'light' | 'dark';
+    isDark: boolean;
+
     setAppTheme: (themeSetting: 'light' | 'dark' | 'system') => void;
 }
 
@@ -23,9 +25,19 @@ export const useThemeStore = create<ThemeStore>((set) => {
             ? 'dark'
             : 'light';
 
+    const isDark =
+        themeSetting !== 'system'
+            ? themeSetting === 'dark'
+                ? true
+                : false
+            : window.matchMedia('(prefers-color-scheme: dark)').matches
+            ? true
+            : false;
+
     return {
         themeSetting: themeSetting as 'light' | 'dark' | 'system',
         appTheme: appTheme as 'light' | 'dark',
+        isDark,
         setAppTheme: (themeSetting) => {
             if (typeof Storage !== 'undefined') {
                 window.localStorage.setItem('theme', themeSetting);
@@ -38,7 +50,16 @@ export const useThemeStore = create<ThemeStore>((set) => {
                     ? 'dark'
                     : 'light';
 
-            set({ appTheme: appTheme, themeSetting: themeSetting });
+            const isDark =
+                themeSetting !== 'system'
+                    ? themeSetting === 'dark'
+                        ? true
+                        : false
+                    : window.matchMedia('(prefers-color-scheme: dark)').matches
+                    ? true
+                    : false;
+
+            set({ appTheme, themeSetting, isDark });
 
             logAnalytics({
                 category: analyticsEnum.nav.title,

From ae3593da0028996053bb67f26ed118aa466e90b9 Mon Sep 17 00:00:00 2001
From: Sean Kelman <seanrkelman@gmail.com>
Date: Thu, 25 Jan 2024 22:30:02 -0800
Subject: [PATCH 4/7] exported isDark logic to computeTheme() to make code more
 readable

---
 apps/antalmanac/src/stores/SettingsStore.ts | 29 +++++++++------------
 1 file changed, 13 insertions(+), 16 deletions(-)

diff --git a/apps/antalmanac/src/stores/SettingsStore.ts b/apps/antalmanac/src/stores/SettingsStore.ts
index fcaf963f1..5ee250f0b 100644
--- a/apps/antalmanac/src/stores/SettingsStore.ts
+++ b/apps/antalmanac/src/stores/SettingsStore.ts
@@ -15,6 +15,17 @@ export interface ThemeStore {
     setAppTheme: (themeSetting: 'light' | 'dark' | 'system') => void;
 }
 
+function computeTheme(themeSetting: string) {
+    if (themeSetting === 'system') {
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? true : false;
+    } else {
+        if (themeSetting === 'dark') {
+            return true;
+        }
+        return false;
+    }
+}
+
 export const useThemeStore = create<ThemeStore>((set) => {
     const themeSetting = typeof Storage !== 'undefined' ? window.localStorage.getItem('theme') ?? 'system' : 'system';
 
@@ -25,14 +36,7 @@ export const useThemeStore = create<ThemeStore>((set) => {
             ? 'dark'
             : 'light';
 
-    const isDark =
-        themeSetting !== 'system'
-            ? themeSetting === 'dark'
-                ? true
-                : false
-            : window.matchMedia('(prefers-color-scheme: dark)').matches
-            ? true
-            : false;
+    const isDark = computeTheme(themeSetting);
 
     return {
         themeSetting: themeSetting as 'light' | 'dark' | 'system',
@@ -50,14 +54,7 @@ export const useThemeStore = create<ThemeStore>((set) => {
                     ? 'dark'
                     : 'light';
 
-            const isDark =
-                themeSetting !== 'system'
-                    ? themeSetting === 'dark'
-                        ? true
-                        : false
-                    : window.matchMedia('(prefers-color-scheme: dark)').matches
-                    ? true
-                    : false;
+            const isDark = computeTheme(themeSetting);
 
             set({ appTheme, themeSetting, isDark });
 

From 8bddc88438e950f789038bd10a637c3a618254b8 Mon Sep 17 00:00:00 2001
From: Sean Kelman <seanrkelman@gmail.com>
Date: Thu, 25 Jan 2024 22:30:02 -0800
Subject: [PATCH 5/7] exported isDark logic to computeTheme() to make code more
 readable

---
 .../src/components/buttons/Screenshot.tsx     |  2 +-
 apps/antalmanac/src/stores/SettingsStore.ts   | 29 +++++++++----------
 2 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/apps/antalmanac/src/components/buttons/Screenshot.tsx b/apps/antalmanac/src/components/buttons/Screenshot.tsx
index a3fad523e..be08ccbfe 100644
--- a/apps/antalmanac/src/components/buttons/Screenshot.tsx
+++ b/apps/antalmanac/src/components/buttons/Screenshot.tsx
@@ -10,7 +10,7 @@ import { useThemeStore } from '$stores/SettingsStore';
 
 class ScreenshotButton extends PureComponent {
     handleClick = () => {
-        const appTheme = useThemeStore((store) => store.appTheme);
+        const isDark = useThemeStore((store) => store.isDark);
         logAnalytics({
             category: analyticsEnum.calendar.title,
             action: analyticsEnum.calendar.actions.SCREENSHOT,
diff --git a/apps/antalmanac/src/stores/SettingsStore.ts b/apps/antalmanac/src/stores/SettingsStore.ts
index fcaf963f1..5ee250f0b 100644
--- a/apps/antalmanac/src/stores/SettingsStore.ts
+++ b/apps/antalmanac/src/stores/SettingsStore.ts
@@ -15,6 +15,17 @@ export interface ThemeStore {
     setAppTheme: (themeSetting: 'light' | 'dark' | 'system') => void;
 }
 
+function computeTheme(themeSetting: string) {
+    if (themeSetting === 'system') {
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? true : false;
+    } else {
+        if (themeSetting === 'dark') {
+            return true;
+        }
+        return false;
+    }
+}
+
 export const useThemeStore = create<ThemeStore>((set) => {
     const themeSetting = typeof Storage !== 'undefined' ? window.localStorage.getItem('theme') ?? 'system' : 'system';
 
@@ -25,14 +36,7 @@ export const useThemeStore = create<ThemeStore>((set) => {
             ? 'dark'
             : 'light';
 
-    const isDark =
-        themeSetting !== 'system'
-            ? themeSetting === 'dark'
-                ? true
-                : false
-            : window.matchMedia('(prefers-color-scheme: dark)').matches
-            ? true
-            : false;
+    const isDark = computeTheme(themeSetting);
 
     return {
         themeSetting: themeSetting as 'light' | 'dark' | 'system',
@@ -50,14 +54,7 @@ export const useThemeStore = create<ThemeStore>((set) => {
                     ? 'dark'
                     : 'light';
 
-            const isDark =
-                themeSetting !== 'system'
-                    ? themeSetting === 'dark'
-                        ? true
-                        : false
-                    : window.matchMedia('(prefers-color-scheme: dark)').matches
-                    ? true
-                    : false;
+            const isDark = computeTheme(themeSetting);
 
             set({ appTheme, themeSetting, isDark });
 

From cc71fdcd47800d26ff5f2bcb7623e2080abdc20f Mon Sep 17 00:00:00 2001
From: Minh Nguyen <64875104+MinhxNguyen7@users.noreply.github.com>
Date: Fri, 2 Feb 2024 10:23:20 -0800
Subject: [PATCH 6/7] Refactor dark mode logic (#875)

---
 apps/antalmanac/src/lib/helpers.ts          |  1 -
 apps/antalmanac/src/stores/SettingsStore.ts | 53 +++++++--------------
 2 files changed, 17 insertions(+), 37 deletions(-)

diff --git a/apps/antalmanac/src/lib/helpers.ts b/apps/antalmanac/src/lib/helpers.ts
index 059e74761..3d2709588 100644
--- a/apps/antalmanac/src/lib/helpers.ts
+++ b/apps/antalmanac/src/lib/helpers.ts
@@ -2,7 +2,6 @@ import React from 'react';
 
 import { PETERPORTAL_GRAPHQL_ENDPOINT } from './api/endpoints';
 import { openSnackbar } from '$actions/AppStoreActions';
-import { useThemeStore } from '$stores/SettingsStore';
 
 export async function queryGraphQL<PromiseReturnType>(queryString: string): Promise<PromiseReturnType | null> {
     const query = JSON.stringify({
diff --git a/apps/antalmanac/src/stores/SettingsStore.ts b/apps/antalmanac/src/stores/SettingsStore.ts
index c81ca5ba7..3e691a182 100644
--- a/apps/antalmanac/src/stores/SettingsStore.ts
+++ b/apps/antalmanac/src/stores/SettingsStore.ts
@@ -1,67 +1,48 @@
 import { create } from 'zustand';
 import analyticsEnum, { logAnalytics } from '$lib/analytics';
 
+export type ThemeSetting = 'light' | 'dark' | 'system';
+
 export interface ThemeStore {
     /**
      * The 'raw' theme, based on the user's selected setting
      */
-    themeSetting: 'light' | 'dark' | 'system';
+    themeSetting: ThemeSetting;
     /**
      * The 'derived' theme, based on user settings and device preferences
      */
     appTheme: 'light' | 'dark';
     isDark: boolean;
 
-    setAppTheme: (themeSetting: 'light' | 'dark' | 'system') => void;
+    setAppTheme: (themeSetting: ThemeSetting) => void;
 }
 
-function computeTheme(themeSetting: string) {
-    if (themeSetting === 'system') {
-        return window.matchMedia('(prefers-color-scheme: dark)').matches ? true : false;
-    } else {
-        if (themeSetting === 'dark') {
-            return true;
-        }
-        return false;
-    }
+function themeShouldBeDark(themeSetting: ThemeSetting) {
+    if (themeSetting == 'system') return window.matchMedia('(prefers-color-scheme: dark)').matches;
+    return themeSetting == 'dark';
 }
 
 export const useThemeStore = create<ThemeStore>((set) => {
-    const themeSetting = typeof Storage !== 'undefined' ? window.localStorage.getItem('theme') ?? 'system' : 'system';
-
-    const appTheme =
-        themeSetting !== 'system'
-            ? themeSetting
-            : window.matchMedia('(prefers-color-scheme: dark)').matches
-            ? 'dark'
-            : 'light';
-
-    const isDark = computeTheme(themeSetting);
+    const storedThemeSetting: ThemeSetting = (window.localStorage?.getItem('theme') ?? 'system') as ThemeSetting;
+    const isDark = themeShouldBeDark(storedThemeSetting);
 
     return {
-        themeSetting: themeSetting as 'light' | 'dark' | 'system',
-        appTheme: appTheme as 'light' | 'dark',
-        isDark,
-        setAppTheme: (themeSetting) => {
-            if (typeof Storage !== 'undefined') {
-                window.localStorage.setItem('theme', themeSetting);
-            }
+        themeSetting: storedThemeSetting,
+        appTheme: isDark ? 'dark' : 'light',
+        isDark: isDark,
 
-            const appTheme =
-                themeSetting !== 'system'
-                    ? themeSetting
-                    : window.matchMedia('(prefers-color-scheme: dark)').matches
-                    ? 'dark'
-                    : 'light';
+        setAppTheme: (themeSetting) => {
+            window.localStorage?.setItem('theme', themeSetting);
 
-            const isDark = computeTheme(themeSetting);
+            const isDark = themeShouldBeDark(themeSetting);
+            const appTheme = isDark ? 'dark' : 'light';
 
             set({ appTheme, themeSetting, isDark });
 
             logAnalytics({
                 category: analyticsEnum.nav.title,
                 action: analyticsEnum.nav.actions.CHANGE_THEME,
-                label: appTheme,
+                label: themeSetting,
             });
         },
     };

From ea3a4f16572b58cd659687b11b8e79c78fd1c6eb Mon Sep 17 00:00:00 2001
From: Sean Kelman <seanrkelman@gmail.com>
Date: Fri, 2 Feb 2024 10:35:28 -0800
Subject: [PATCH 7/7] fixed bad import in EnrollmentHistoryPopup

---
 .../RightPane/SectionTable/EnrollmentHistoryPopup.tsx       | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/antalmanac/src/components/RightPane/SectionTable/EnrollmentHistoryPopup.tsx b/apps/antalmanac/src/components/RightPane/SectionTable/EnrollmentHistoryPopup.tsx
index 4a475aac7..3394532ad 100644
--- a/apps/antalmanac/src/components/RightPane/SectionTable/EnrollmentHistoryPopup.tsx
+++ b/apps/antalmanac/src/components/RightPane/SectionTable/EnrollmentHistoryPopup.tsx
@@ -3,7 +3,7 @@ import { LineChart, Line, CartesianGrid, ResponsiveContainer, XAxis, YAxis, Tool
 import { Box, Link, Typography, Skeleton, useMediaQuery } from '@mui/material';
 import { MOBILE_BREAKPOINT } from '../../../globals';
 import { DepartmentEnrollmentHistory, EnrollmentHistory } from '$lib/enrollmentHistory';
-import { isDarkMode } from '$lib/helpers';
+import { useThemeStore } from '$stores/SettingsStore';
 
 export interface EnrollmentHistoryPopupProps {
     department: string;
@@ -28,9 +28,9 @@ export function EnrollmentHistoryPopup({ department, courseNumber }: EnrollmentH
             enrollmentHistory.quarter
         } | ${enrollmentHistory.instructors.join(', ')}`;
     }, [courseNumber, department, enrollmentHistory]);
-
+    const isDarkMode = useThemeStore((state) => state.isDark);
     const encodedDept = useMemo(() => encodeURIComponent(department), [department]);
-    const axisColor = isDarkMode() ? '#fff' : '#111';
+    const axisColor = isDarkMode ? '#fff' : '#111';
     const tooltipDateColor = '#111';
 
     useEffect(() => {