use system theme by default, remove theme state

Seneca-CDOT · Apr 29, 2021 · d67a77c · d67a77c
1 parent b2766cc
commit d67a77c
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 13 deletions.
diff --git a/src/web/src/components/Posts/Post.tsx b/src/web/src/components/Posts/Post.tsx
@@ -229,7 +229,7 @@ const PostComponent = ({ postUrl }: Props) => {
   if (error) {
     console.error(`Error loading post at ${postUrl}`, error);
     return (
-      <Box className={classes.root}>
+      <Box component={Box} className={classes.root}>
         <ListSubheader className={classes.titleContainer}>
           <AdminButtons />
           <Typography variant="h1" className={classes.title}>

diff --git a/src/web/src/hooks/use-preferred-theme.ts b/src/web/src/hooks/use-preferred-theme.ts
@@ -1,12 +1,11 @@
-import { useLocalStorage } from 'react-use';
-import useMediaQuery from '@material-ui/core/useMediaQuery';
+import { useLocalStorage, useMedia } from 'react-use';
 
 /**
  * Combination of localStorage for remembering the user's preference between
  * loads of the app, and initial logic to get the browser's preferred colour.
  */
 export default function usePreferredTheme() {
-  const isDarkThemePreferred = useMediaQuery('(prefers-color-scheme: dark)');
+  const isDarkThemePreferred = useMedia('(prefers-color-scheme: dark)');
   const [preferredTheme, setPreferredTheme] = useLocalStorage(
     'preference:theme',
     isDarkThemePreferred ? 'dark' : 'light'

diff --git a/src/web/src/pages/_app.tsx b/src/web/src/pages/_app.tsx
@@ -16,8 +16,8 @@ import '@fontsource/pt-serif';
 const App = ({ Component, pageProps }: AppProps) => {
   // Use the preferred theme for this user and the browser (one of 'dark' or 'light').
   const [preferredTheme, setPreferredTheme] = usePreferredTheme();
-  // Set our initial theme to be whatever the preferred theme is, or the light theme if no preference,
-  const [theme, setTheme] = useState(preferredTheme === 'dark' ? darkTheme : lightTheme);
+  // Set our initial theme to be the preferred system theme, or light theme be default,
+  const theme = preferredTheme === 'dark' ? darkTheme : lightTheme;
 
   // This hook is for ensuring the styling is in sync between client and server
   useEffect(() => {
@@ -30,13 +30,7 @@ const App = ({ Component, pageProps }: AppProps) => {
 
   // Switch the active theme, and also store it for next load
   const toggleTheme = () => {
-    if (theme === lightTheme) {
-      setTheme(darkTheme);
-      setPreferredTheme('dark');
-    } else {
-      setTheme(lightTheme);
-      setPreferredTheme('light');
-    }
+    setPreferredTheme(preferredTheme === 'dark' ? 'light' : 'dark');
   };
 
   return (