got new theme system to work without re-rendering

src/app/App.tsx

@@ -5,14 +5,13 @@ import HTTPProvider from 'providers/http'
 import { useState } from 'react'
 import LoadingScreen from './LoadingScreen'
 import UserWrapper from './UserWrapper'
-import { CssBaseline, Theme, ThemeProvider } from '@mui/material'
-import { CreateTheme } from '../theme/theme'
-import { getThemeType, setThemeType } from '../theme/themeType'
+import { CssBaseline } from '@mui/material'
 import { getWhitelabel } from 'services/whiteLabel'
+import { AppThemeProvider } from 'theme/AppThemeProvider'
 
 function App() {
   const [token, setToken] = useState<string | undefined>(undefined)
-  const [palette, setPalette] = useState<Theme>(CreateTheme(getThemeType()));
+  // const [palette, setPalette] = useState<Theme>(CreateTheme(getThemeType()));
 
   const whiteLabel = getWhitelabel()
   const manifestPath = "/" + whiteLabel.name.replace(/\s/g, "") + "/manifest.json"
@@ -45,33 +44,23 @@ function App() {
 
   let client_id = import.meta.env.VITE_AUTH0_DEV_CLIENT_ID;
 
-  const toggleTheme = () => {
-    if (getThemeType() === "light") {
-      setPalette(CreateTheme("dark"));
-      setThemeType("dark");
-    } else {
-      setPalette(CreateTheme("light"));
-      setThemeType("light");
-    }
-  };
-
   return (
-    <Auth0Provider
-      domain={or(url, "")}
-      clientId={or(client_id, "")}
-      authorizationParams={{
-        audience: or(audience, ""),
-        redirect_uri: window.location.origin + "/callback"
-      }}
-      useRefreshTokens={true}
-      cacheLocation='localstorage'
-    >
-      <ThemeProvider theme={palette}>
-        <CssBaseline />
+    <AppThemeProvider>
+      <Auth0Provider
+        domain={or(url, "")}
+        clientId={or(client_id, "")}
+        authorizationParams={{
+          audience: or(audience, ""),
+          redirect_uri: window.location.origin + "/callback"
+        }}
+        useRefreshTokens={true}
+        cacheLocation='localstorage'
+      >
+        {/* <CssBaseline /> */}
         <AuthWrapper setToken={setToken}>
           { token ? 
             <HTTPProvider token={token}>
-              <UserWrapper toggleTheme={toggleTheme}/>
+              <UserWrapper />
             </HTTPProvider>
           :
             <LoadingScreen
@@ -79,8 +68,8 @@ function App() {
             />
           }
         </AuthWrapper>
-      </ThemeProvider>
-    </Auth0Provider>
+      </Auth0Provider>
+    </AppThemeProvider>
   )
 }
 

src/app/Header.tsx

@@ -15,7 +15,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     appBar: {
         zIndex: theme.zIndex.drawer + 1,
         backgroundImage: "none", // This prevents de-saturation of header in dark mode
-        // backgroundColor: "#272727"
+        backgroundColor: "#272727"
     },
     toolbar: {
         marginLeft: theme.spacing(0.5),
@@ -77,16 +77,8 @@ const useStyles = makeStyles((theme: Theme) => ({
     },
 }));
 
-interface Props {
-    toggleTheme: () => void;
-    // teams: Team[];
-    // setTeams: React.Dispatch<React.SetStateAction<Team[]>>;
-}
+export default function Header() {
 
-export default function Header(props: Props) {
-
-  // const { sideIsOpen, openSide, toggleTheme } = props;
-  const { toggleTheme } = props;
   const themeType = useThemeType();
   const classes = useStyles()
   const isMobile = useMobile();
@@ -125,7 +117,7 @@ export default function Header(props: Props) {
 						)}
 					</Box>
 					<Box className={classes.appBarRight}>
-						<UserMenu toggleTheme={toggleTheme} />
+						<UserMenu />
 						<HeaderButtons hasTeams={hasTeams} team={team} user={user} />
 					</Box>
 			</Toolbar>

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>
   )