aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2023-08-27 17:21:22 -0700
committerAnton Tananaev <anton@traccar.org>2023-08-27 17:21:22 -0700
commit289a968c3f9d8d95b6bb6f346135480cfc246a75 (patch)
tree7f313c1d2662eefa1e65979b99f95747cb8d268e
parent1ee5de2369d3ab9649f829d9499f609f85e3337f (diff)
downloadtrackermap-web-289a968c3f9d8d95b6bb6f346135480cfc246a75.tar.gz
trackermap-web-289a968c3f9d8d95b6bb6f346135480cfc246a75.tar.bz2
trackermap-web-289a968c3f9d8d95b6bb6f346135480cfc246a75.zip
Fix theme hooks usage
-rw-r--r--modern/src/AppThemeProvider.jsx9
-rw-r--r--modern/src/common/theme/index.js6
-rw-r--r--modern/src/common/theme/palette.js43
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',
+ },
+});