Theme toggle tweaks

src/components/App.tsx

@@ -5,6 +5,7 @@ import {
   CalendarEventsProvider,
   SnackbarProvider,
 } from '@context';
+import { USER_THEME_STORAGE_KEY } from '@hooks';
 import { CssVarsProvider, styled } from '@mui/joy';
 import { SessionContextProvider } from '@supabase/auth-helpers-react';
 import { supabaseClient, theme } from '@utils';
@@ -21,8 +22,8 @@ const App = () => {
   return (
     <CssVarsProvider
       theme={theme}
-      defaultMode="system"
-      modeStorageKey="user_mode_preference"
+      defaultMode="light"
+      modeStorageKey={USER_THEME_STORAGE_KEY}
     >
       <SessionContextProvider supabaseClient={supabaseClient}>
         <SnackbarProvider>

src/components/header/ThemeToggle.tsx

@@ -1,3 +1,4 @@
+import { ThemeModes, useTheme } from '@hooks';
 import LightModeRoundedIcon from '@mui/icons-material/LightModeRounded';
 import NightlightRoundRoundedIcon from '@mui/icons-material/NightlightRoundRounded';
 import { Button, useColorScheme } from '@mui/joy';
@@ -6,22 +7,22 @@ import React from 'react';
 import { StyledToggleModeIconButton } from './styled';
 
 const ThemeToggle = () => {
+  useTheme();
   const { mode, setMode } = useColorScheme();
 
   const handleToggleMode = () => {
-    setMode(mode === 'light' ? 'dark' : 'light');
+    setMode(mode === ThemeModes.LIGHT ? ThemeModes.DARK : ThemeModes.LIGHT);
   };
 
   return (
     <>
       <StyledToggleModeIconButton onClick={handleToggleMode}>
-        {mode === 'light' ? (
+        {mode === ThemeModes.LIGHT ? (
           <NightlightRoundRoundedIcon />
         ) : (
           <LightModeRoundedIcon />
         )}
       </StyledToggleModeIconButton>
-      <Button variant="plain">Current theme: {mode}</Button>
     </>
   );
 };

src/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './useTheme';
+export { default as useTheme } from './useTheme';

src/hooks/useTheme.ts

@@ -0,0 +1,47 @@
+import { useColorScheme } from '@mui/joy';
+import React from 'react';
+
+export const USER_THEME_STORAGE_KEY = 'user-theme-preference';
+
+export enum ThemeModes {
+  LIGHT = 'light',
+  DARK = 'dark',
+}
+
+const useTheme = () => {
+  const { setMode } = useColorScheme();
+  const [theme, setTheme] = React.useState<ThemeModes>(ThemeModes.LIGHT);
+
+  const darkThemeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+  React.useEffect(() => {
+    const userTheme = localStorage.getItem(
+      USER_THEME_STORAGE_KEY
+    ) as ThemeModes | null;
+
+    if (userTheme) {
+      setTheme(userTheme);
+    } else {
+      setTheme(
+        darkThemeMediaQuery.matches ? ThemeModes.DARK : ThemeModes.LIGHT
+      );
+    }
+  }, [darkThemeMediaQuery.matches]);
+
+  React.useEffect(() => {
+    if (theme) {
+      setMode(theme);
+      localStorage.setItem(USER_THEME_STORAGE_KEY, theme);
+    }
+  }, [theme, setMode]);
+
+  darkThemeMediaQuery.addEventListener('change', (mediaQueryListEvent) => {
+    setTheme(mediaQueryListEvent.matches ? ThemeModes.DARK : ThemeModes.LIGHT);
+  });
+
+  return {
+    theme,
+  };
+};
+
+export default useTheme;