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 isDark = useThemeStore((store) => store.isDark);
 
     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={isDark ? '#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';
 
@@ -139,6 +139,7 @@ function CustomEventDialogs(props: CustomEventDialogProps) {
         };
     }, []);
 
+    const isDark = useThemeStore.getState().isDark;
     return (
         <>
             {props.customEvent ? (
@@ -218,7 +219,7 @@ function CustomEventDialogs(props: CustomEventDialogProps) {
                 </DialogContent>
 
                 <DialogActions>
-                    <Button onClick={handleClose} color={isDarkMode() ? 'secondary' : 'primary'}>
+                    <Button onClick={handleClose} color={isDark ? 'secondary' : 'primary'}>
                         Cancel
                     </Button>
                     <Button onClick={handleSubmit} variant="contained" color="primary" disabled={disabled}>

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 isDark = useThemeStore((store) => store.isDark);
+
     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={isDark ? '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 isDark = useThemeStore((store) => store.isDark);
+
     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={isDark ? 'secondary' : 'primary'}>
                         Cancel
                     </Button>
                     <Button

apps/antalmanac/src/components/Header/LoadSaveFunctionality.tsx

@@ -14,14 +14,15 @@ 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';
 import AppStore from '$stores/AppStore';
 
 interface LoadSaveButtonBaseProps {
     action: typeof saveSchedule;
     actionName: 'Save' | 'Load';
     disabled: boolean;
     loading: boolean;
+    colorType: 'primary' | 'secondary';
 }
 
 interface LoadSaveButtonBaseState {
@@ -127,10 +128,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>
@@ -141,6 +142,8 @@ class LoadSaveButtonBase extends PureComponent<LoadSaveButtonBaseProps, LoadSave
 }
 
 const LoadSaveScheduleFunctionality = () => {
+    const isDark = useThemeStore((store) => store.isDark);
+
     const [loading, setLoading] = useState(false);
     const [skeletonMode, setSkeletonMode] = useState(AppStore.getSkeletonMode());
 
@@ -178,14 +181,16 @@ const LoadSaveScheduleFunctionality = () => {
             <LoadSaveButtonBase
                 actionName={'Save'}
                 action={saveSchedule}
-                disabled={loading || skeletonMode}
+                disabled={loading}
                 loading={false}
+                colorType={isDark ? 'primary' : 'secondary'}
             />
             <LoadSaveButtonBase
                 actionName={'Load'}
                 action={loadScheduleAndSetLoading}
                 disabled={skeletonMode}
                 loading={loading}
+                colorType={isDark ? 'primary' : 'secondary'}
             />
         </>
     );

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}

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 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');
     const dismissedRecently =
@@ -67,8 +69,8 @@ const RecruitmentBanner = () => {
                     icon={false}
                     severity="info"
                     style={{
-                        color: isDarkMode() ? '#ece6e6' : '#2e2e2e',
-                        backgroundColor: isDarkMode() ? '#2e2e2e' : '#ece6e6',
+                        color: isDark ? '#ece6e6' : '#2e2e2e',
+                        backgroundColor: isDark ? '#2e2e2e' : '#ece6e6',
                     }}
                     action={
                         <IconButton
@@ -144,18 +146,20 @@ const SectionTableWrapped = (
 };
 
 const LoadingMessage = () => {
+    const isDark = useThemeStore((store) => store.isDark);
     return (
         <Box sx={{ height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-            <img src={isDarkMode() ? darkModeLoadingGif : loadingGif} alt="Loading courses" />
+            <img src={isDark ? darkModeLoadingGif : loadingGif} alt="Loading courses" />
         </Box>
     );
 };
 
 const ErrorMessage = () => {
+    const isDark = useThemeStore((store) => store.isDark);
     return (
         <Box sx={{ height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
             <img
-                src={isDarkMode() ? darkNoNothing : noNothing}
+                src={isDark ? darkNoNothing : noNothing}
                 alt="No Results Found"
                 style={{ objectFit: 'contain', width: '80%', height: '80%' }}
             />

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 isDark = useThemeStore((store) => store.isDark);
+
     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={isDark ? 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 = isDark ? '#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: isDark ? '#303030' : '#e0e0e0',
+                    color: isDark ? '#bfbfbf' : 'black',
                 }}
             >
                 {props.label}