diff options
| -rw-r--r-- | modern/src/App.js | 4 | ||||
| -rw-r--r-- | modern/src/AppThemeProvider.js | 17 | ||||
| -rw-r--r-- | modern/src/common/theme/index.js | 9 | ||||
| -rw-r--r-- | modern/src/common/theme/palette.js | 48 | ||||
| -rw-r--r-- | modern/src/index.js | 19 | ||||
| -rw-r--r-- | modern/src/map/core/preloadImages.js | 2 |
6 files changed, 59 insertions, 40 deletions
diff --git a/modern/src/App.js b/modern/src/App.js index baa2c3f2..89785cfa 100644 --- a/modern/src/App.js +++ b/modern/src/App.js @@ -1,9 +1,8 @@ import React from 'react'; import { Outlet, useNavigate } from 'react-router-dom'; import { useDispatch, useSelector } from 'react-redux'; -import { LinearProgress, useMediaQuery } from '@mui/material'; +import { LinearProgress, useMediaQuery, useTheme } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; -import theme from './common/theme'; import BottomMenu from './common/components/BottomMenu'; import SocketController from './SocketController'; import CachingController from './CachingController'; @@ -22,6 +21,7 @@ const useStyles = makeStyles(() => ({ const App = () => { const classes = useStyles(); + const theme = useTheme(); const dispatch = useDispatch(); const navigate = useNavigate(); diff --git a/modern/src/AppThemeProvider.js b/modern/src/AppThemeProvider.js new file mode 100644 index 00000000..0f1c5479 --- /dev/null +++ b/modern/src/AppThemeProvider.js @@ -0,0 +1,17 @@ +import React from 'react'; +import { useSelector } from 'react-redux'; +import { ThemeProvider } from '@mui/material'; +import theme from './common/theme'; + +const AppThemeProvider = ({ children }) => { + const server = useSelector((state) => state.session.server); + const themeInstance = theme(server); + + return ( + <ThemeProvider theme={themeInstance}> + {children} + </ThemeProvider> + ); +}; + +export default AppThemeProvider; diff --git a/modern/src/common/theme/index.js b/modern/src/common/theme/index.js index 0cc999ad..0f163e7e 100644 --- a/modern/src/common/theme/index.js +++ b/modern/src/common/theme/index.js @@ -1,12 +1,11 @@ +import { useMemo } from 'react'; import { createTheme } from '@mui/material/styles'; import palette from './palette'; import dimensions from './dimensions'; import components from './components'; -const theme = createTheme({ - palette, +export default (server) => useMemo(() => createTheme({ + palette: palette(server), dimensions, components, -}); - -export default theme; +}), [server]); diff --git a/modern/src/common/theme/palette.js b/modern/src/common/theme/palette.js index c6cb00d9..dfc8b9dd 100644 --- a/modern/src/common/theme/palette.js +++ b/modern/src/common/theme/palette.js @@ -2,28 +2,30 @@ import { amber, grey, green, indigo, red, common, } from '@mui/material/colors'; -const colors = { - white: common.white, - background: grey[50], - primary: indigo[900], - secondary: green[800], - positive: green[500], - medium: amber[700], - negative: red[500], - neutral: grey[500], - geometry: '#3bb2d0', -}; +export default (server) => { + const colors = { + white: common.white, + background: grey[50], + primary: server?.attributes?.colorPrimary || indigo[900], + secondary: server?.attributes?.colorSecondary || green[800], + positive: green[500], + medium: amber[700], + negative: red[500], + neutral: grey[500], + geometry: '#3bb2d0', + }; -export default { - background: { - default: colors.background, - }, - primary: { - main: colors.primary, - }, - secondary: { - main: colors.secondary, - contrastText: colors.white, - }, - colors, + return { + background: { + default: colors.background, + }, + primary: { + main: colors.primary, + }, + secondary: { + main: colors.secondary, + contrastText: colors.white, + }, + colors, + }; }; 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> diff --git a/modern/src/map/core/preloadImages.js b/modern/src/map/core/preloadImages.js index 770c1c57..0634251b 100644 --- a/modern/src/map/core/preloadImages.js +++ b/modern/src/map/core/preloadImages.js @@ -61,7 +61,7 @@ export default async () => { const results = []; ['primary', 'positive', 'negative', 'neutral'].forEach((color) => { results.push(loadImage(mapIcons[category]).then((icon) => { - mapImages[`${category}-${color}`] = prepareIcon(background, icon, palette.colors[color]); + mapImages[`${category}-${color}`] = prepareIcon(background, icon, palette().colors[color]); })); }); await Promise.all(results); |