From 75be8714df29c7047a6eacd65f83e84fa913e6e2 Mon Sep 17 00:00:00 2001
From: Minh Nguyen <64875104+MinhxNguyen7@users.noreply.github.com>
Date: Thu, 1 Feb 2024 00:17:06 +0000
Subject: [PATCH 1/2] Remove unused import

---
 apps/antalmanac/src/lib/helpers.ts | 1 -
 1 file changed, 1 deletion(-)

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({

From 6263803f0cf30b7bcfbf5233d6f1cdc3426d86ee Mon Sep 17 00:00:00 2001
From: Minh Nguyen <64875104+MinhxNguyen7@users.noreply.github.com>
Date: Thu, 1 Feb 2024 00:25:04 +0000
Subject: [PATCH 2/2] Simplify theme computation logic.

---
 apps/antalmanac/src/stores/SettingsStore.ts | 53 +++++++--------------
 1 file changed, 17 insertions(+), 36 deletions(-)

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