Deprecate isDarkMode in favor of useThemeStore

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>

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

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">

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

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'}
             />
         </>
     );

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

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>
                         }
                     >

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' }}>

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}