got new theme system to work without re-rendering

src/app/UserWrapper.tsx

@@ -9,7 +9,8 @@ import { GlobalState, GlobalStateAction, StateProvider } from '../providers/Stat
 import { User } from '../models/user'
 import { Team } from '../models/team'
 import { makeStyles } from '@mui/styles'
-import { Theme } from '@mui/material'
+import { CssBaseline, Theme } from '@mui/material'
+import { AppThemeProvider } from 'theme/AppThemeProvider'
 // import FirmwareLoader from './FirmwareLoader'
 
 const reducer = (state: GlobalState, action: GlobalStateAction): GlobalState => {
@@ -50,12 +51,7 @@ const globalDefault = {
   firmware: new Map()
 }
 
-interface Props {
-  toggleTheme: () => void;
-}
-
-export default function UserWrapper(props: Props) {
-  const { toggleTheme } = props;
+export default function UserWrapper() {
   const [loading, setLoading] = useState(false)
   const userAPI = useUserAPI();
   const classes = useStyles();
@@ -99,10 +95,14 @@ export default function UserWrapper(props: Props) {
 
   return (
     <StateProvider state={global} reducer={reducer}>
-      {/* <FirmwareLoader> */}
+      <AppThemeProvider >
+        <CssBaseline/>
         <main className={classes.appContent}>
-          <NavigationContainer toggleTheme={toggleTheme} />
+          <NavigationContainer />
         </main>
+      </AppThemeProvider>
+      {/* <FirmwareLoader> */}
+        
       {/* </FirmwareLoader> */}
     </StateProvider>
   )