diff options
author | Anton Tananaev <anton@traccar.org> | 2023-08-27 17:21:22 -0700 |
---|---|---|
committer | Anton Tananaev <anton@traccar.org> | 2023-08-27 17:21:22 -0700 |
commit | 289a968c3f9d8d95b6bb6f346135480cfc246a75 (patch) | |
tree | 7f313c1d2662eefa1e65979b99f95747cb8d268e /modern | |
parent | 1ee5de2369d3ab9649f829d9499f609f85e3337f (diff) | |
download | trackermap-web-289a968c3f9d8d95b6bb6f346135480cfc246a75.tar.gz trackermap-web-289a968c3f9d8d95b6bb6f346135480cfc246a75.tar.bz2 trackermap-web-289a968c3f9d8d95b6bb6f346135480cfc246a75.zip |
Fix theme hooks usage
Diffstat (limited to 'modern')
-rw-r--r-- | modern/src/AppThemeProvider.jsx | 9 | ||||
-rw-r--r-- | modern/src/common/theme/index.js | 6 | ||||
-rw-r--r-- | modern/src/common/theme/palette.js | 43 |
3 files changed, 28 insertions, 30 deletions
diff --git a/modern/src/AppThemeProvider.jsx b/modern/src/AppThemeProvider.jsx index 0f1c5479..109d25c4 100644 --- a/modern/src/AppThemeProvider.jsx +++ b/modern/src/AppThemeProvider.jsx @@ -1,11 +1,16 @@ import React from 'react'; import { useSelector } from 'react-redux'; -import { ThemeProvider } from '@mui/material'; +import { ThemeProvider, useMediaQuery } from '@mui/material'; import theme from './common/theme'; const AppThemeProvider = ({ children }) => { const server = useSelector((state) => state.session.server); - const themeInstance = theme(server); + + const serverDarkMode = server?.attributes?.darkMode; + const preferDarkMode = useMediaQuery('(prefers-color-scheme: dark)'); + const darkMode = serverDarkMode !== undefined ? serverDarkMode : preferDarkMode; + + const themeInstance = theme(server, darkMode); return ( <ThemeProvider theme={themeInstance}> diff --git a/modern/src/common/theme/index.js b/modern/src/common/theme/index.js index 0f163e7e..e8ce698b 100644 --- a/modern/src/common/theme/index.js +++ b/modern/src/common/theme/index.js @@ -4,8 +4,8 @@ import palette from './palette'; import dimensions from './dimensions'; import components from './components'; -export default (server) => useMemo(() => createTheme({ - palette: palette(server), +export default (server, darkMode) => useMemo(() => createTheme({ + palette: palette(server, darkMode), dimensions, components, -}), [server]); +}), [server, darkMode]); diff --git a/modern/src/common/theme/palette.js b/modern/src/common/theme/palette.js index 7bd63dac..f32ed93e 100644 --- a/modern/src/common/theme/palette.js +++ b/modern/src/common/theme/palette.js @@ -1,29 +1,22 @@ -import { useMediaQuery } from '@mui/material'; import { grey, green, indigo } from '@mui/material/colors'; const validatedColor = (color) => (/^#([0-9A-Fa-f]{3}){1,2}$/.test(color) ? color : null); -export default (server) => { - const preferDarkMode = useMediaQuery('(prefers-color-scheme: dark)'); - const serverDarkMode = server?.attributes?.darkMode; - const darkMode = serverDarkMode !== undefined ? serverDarkMode : preferDarkMode; - - return { - mode: darkMode ? 'dark' : 'light', - background: { - default: darkMode ? grey[900] : grey[50], - }, - primary: { - main: validatedColor(server?.attributes?.colorPrimary) || (darkMode ? indigo[200] : indigo[900]), - }, - secondary: { - main: validatedColor(server?.attributes?.colorSecondary) || (darkMode ? green[200] : green[800]), - }, - neutral: { - main: grey[500], - }, - geometry: { - main: '#3bb2d0', - }, - }; -}; +export default (server, darkMode) => ({ + mode: darkMode ? 'dark' : 'light', + background: { + default: darkMode ? grey[900] : grey[50], + }, + primary: { + main: validatedColor(server?.attributes?.colorPrimary) || (darkMode ? indigo[200] : indigo[900]), + }, + secondary: { + main: validatedColor(server?.attributes?.colorSecondary) || (darkMode ? green[200] : green[800]), + }, + neutral: { + main: grey[500], + }, + geometry: { + main: '#3bb2d0', + }, +}); |