fix: theme uses system settings and listens for changes

src/App.js

@@ -18,8 +18,8 @@ import Notify from './components/notify/Notify.js'
 import Connected from './components/connected/Connected.js'
 import TourHelper from './components/tour/TourHelper.js'
 import FilesExploreForm from './files/explore-form/files-explore-form.tsx'
-import { ThemeProvider, ThemeContext } from './context/theme-provider'
-import { ThemeToggle } from './components/theme-toggle/toggle'
+import { ThemeProvider, ThemeContext } from './context/theme-provider.tsx'
+import { ThemeToggle } from './components/theme-toggle/toggle.tsx'
 
 export class App extends Component {
   static propTypes = {

src/context/theme-provider.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 
 export interface ThemeProviderProps {
   children: React.ReactNode
@@ -8,27 +8,51 @@ export type Theme = 'light' | 'dark'
 
 export type ThemeContextValues = {
   darkTheme: boolean,
-  toggleTheme: (event?: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
+  toggleTheme: (event?: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement> | undefined) => void;
 }
 
 export const ThemeContext = React.createContext<ThemeContextValues | null>(null)
 
 export const ThemeProvider = ({ children }: ThemeProviderProps) => {
+  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+
   const [isDarkTheme, setDarkTheme] = React.useState<boolean>(() => {
-    const savedTheme =
-      typeof window !== 'undefined' && localStorage.getItem('theme')
+    const savedTheme = localStorage.getItem('theme')
     if (savedTheme) return savedTheme === 'dark'
-    return window.matchMedia('prefers-color-scheme: dark').matches
+    return mediaQuery.matches
   })
-  React.useEffect(() => {
+
+  useEffect(() => {
+    const handleChange = (event: MediaQueryListEvent) => {
+      console.log('changed theme?')
+      const savedTheme = localStorage.getItem('theme')
+      if (!savedTheme) {
+        setDarkTheme(event.matches)
+      }
+    }
+    mediaQuery.addEventListener('change', handleChange)
+    return () => {
+      mediaQuery.removeEventListener('change', handleChange)
+    }
+  }, [mediaQuery])
+
+  useEffect(() => {
     const htmlElem = document.documentElement
     const currentTheme = isDarkTheme ? 'dark' : 'light'
     htmlElem.setAttribute('data-theme', currentTheme)
-    localStorage.setItem('theme', currentTheme)
     htmlElem.setAttribute('aria-label', `Current theme: ${currentTheme}`)
-  }, [isDarkTheme])
-  const toggleTheme = (event: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => {
-    if (event.type === 'keydown') {
+
+    if (isDarkTheme === mediaQuery.matches) {
+      // delete localstorage item when dark=dark or light=light
+      localStorage.removeItem('theme')
+    } else {
+      // save to local storage when it differs from local settings
+      localStorage.setItem('theme', isDarkTheme ? 'dark' : 'light')
+    }
+  }, [isDarkTheme, mediaQuery])
+
+  const toggleTheme = (event: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement> | undefined) => {
+    if (event?.type === 'keydown') {
       const isKeyboardEvent = (event: React.KeyboardEvent | React.MouseEvent): event is React.KeyboardEvent<HTMLButtonElement> => {
         return event.type === 'keydown'
       }
@@ -38,13 +62,14 @@ export const ThemeProvider = ({ children }: ThemeProviderProps) => {
           setDarkTheme((prevTheme) => !prevTheme)
         }
       }
+    } else {
+      setDarkTheme((prevTheme) => !prevTheme)
     }
   }
+
   const values: ThemeContextValues = {
     darkTheme: isDarkTheme,
-    toggleTheme: (event) => {
-      event ? toggleTheme(event) : setDarkTheme(prevTheme => !prevTheme)
-    }
+    toggleTheme
   }
   return (
     <ThemeContext.Provider value={values}>