Make theme dynamic

1 files changed, 10 insertions, 9 deletions

diff --git a/modern/src/index.js b/modern/src/index.js
index e5457789..936fe7c1 100644
--- a/modern/src/index.js
+++ b/modern/src/index.js
@@ -3,17 +3,17 @@ import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';
-import { CssBaseline, ThemeProvider, StyledEngineProvider } from '@mui/material';
+import { CssBaseline, StyledEngineProvider } from '@mui/material';
 import store from './store';
 import { LocalizationProvider } from './common/components/LocalizationProvider';
 import ErrorHandler from './common/components/ErrorHandler';
-import theme from './common/theme';
 import Navigation from './Navigation';
 import preloadImages from './map/core/preloadImages';
 import * as serviceWorkerRegistration from './serviceWorkerRegistration';
 import NativeInterface from './common/components/NativeInterface';
 import ServerProvider from './ServerProvider';
 import ErrorBoundary from './ErrorBoundary';
+import AppThemeProvider from './AppThemeProvider';
 
 preloadImages();
 
@@ -23,16 +23,17 @@ root.render(
     <Provider store={store}>
       <LocalizationProvider>
         <StyledEngineProvider injectFirst>
-          <ThemeProvider theme={theme}>
-            <CssBaseline />
-            <ServerProvider>
+          <CssBaseline />
+          <ServerProvider>
+            <AppThemeProvider>
+              <CssBaseline />
               <BrowserRouter>
                 <Navigation />
               </BrowserRouter>
-            </ServerProvider>
-            <ErrorHandler />
-            <NativeInterface />
-          </ThemeProvider>
+              <ErrorHandler />
+              <NativeInterface />
+            </AppThemeProvider>
+          </ServerProvider>
         </StyledEngineProvider>
       </LocalizationProvider>
     </Provider>