diff options
Diffstat (limited to 'modern/src/common')
-rw-r--r-- | modern/src/common/theme/index.js | 6 | ||||
-rw-r--r-- | modern/src/common/theme/palette.js | 43 |
2 files changed, 21 insertions, 28 deletions
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', + }, +}); |