diff options
| -rw-r--r-- | modern/public/styles.css | 5 | ||||
| -rw-r--r-- | modern/src/common/attributes/useServerAttributes.js | 4 | ||||
| -rw-r--r-- | modern/src/common/components/StatusCard.jsx | 2 | ||||
| -rw-r--r-- | modern/src/common/theme/components.js | 8 | ||||
| -rw-r--r-- | modern/src/common/theme/palette.js | 17 | ||||
| -rw-r--r-- | modern/src/resources/l10n/en.json | 1 | ||||
| -rw-r--r-- | modern/src/settings/PreferencesPage.jsx | 84 |
7 files changed, 63 insertions, 58 deletions
diff --git a/modern/public/styles.css b/modern/public/styles.css index 686e446c..f6c61c0a 100644 --- a/modern/public/styles.css +++ b/modern/public/styles.css @@ -7,11 +7,6 @@ body { padding: 0; } -canvas { - outline: none; - -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -} - .root { display: flex; flex-direction: column; diff --git a/modern/src/common/attributes/useServerAttributes.js b/modern/src/common/attributes/useServerAttributes.js index 74749991..5cce479e 100644 --- a/modern/src/common/attributes/useServerAttributes.js +++ b/modern/src/common/attributes/useServerAttributes.js @@ -31,6 +31,10 @@ export default (t) => useMemo(() => ({ name: t('serverChangeDisable'), type: 'boolean', }, + darkMode: { + name: t('settingsDarkMode'), + type: 'boolean', + }, 'ui.disableLoginLanguage': { name: t('attributeUiDisableLoginLanguage'), type: 'boolean', diff --git a/modern/src/common/components/StatusCard.jsx b/modern/src/common/components/StatusCard.jsx index 0d32eb0d..c8898b7c 100644 --- a/modern/src/common/components/StatusCard.jsx +++ b/modern/src/common/components/StatusCard.jsx @@ -45,7 +45,7 @@ const useStyles = makeStyles((theme) => ({ alignItems: 'flex-start', }, mediaButton: { - color: theme.palette.colors.white, + color: theme.palette.primary.contrastText, mixBlendMode: 'difference', }, header: { diff --git a/modern/src/common/theme/components.js b/modern/src/common/theme/components.js index 572f876e..56a2ac75 100644 --- a/modern/src/common/theme/components.js +++ b/modern/src/common/theme/components.js @@ -1,5 +1,3 @@ -import { grey } from '@mui/material/colors'; - export default { MuiUseMediaQuery: { defaultProps: { @@ -8,9 +6,9 @@ export default { }, MuiOutlinedInput: { styleOverrides: { - root: { - backgroundColor: grey[50], - }, + root: ({ theme }) => ({ + backgroundColor: theme.palette.background.default, + }), }, }, MuiButton: { diff --git a/modern/src/common/theme/palette.js b/modern/src/common/theme/palette.js index 51a01c69..99288aee 100644 --- a/modern/src/common/theme/palette.js +++ b/modern/src/common/theme/palette.js @@ -1,15 +1,18 @@ +import { useMediaQuery } from '@mui/material'; import { - amber, grey, green, indigo, red, common, + amber, grey, green, indigo, red, } 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; + const colors = { - white: common.white, - background: grey[50], - primary: validatedColor(server?.attributes?.colorPrimary) || indigo[900], - secondary: validatedColor(server?.attributes?.colorSecondary) || green[800], + primary: validatedColor(server?.attributes?.colorPrimary) || (darkMode ? indigo[200] : indigo[900]), + secondary: validatedColor(server?.attributes?.colorSecondary) || (darkMode ? green[200] : green[800]), positive: green[500], medium: amber[700], negative: red[500], @@ -18,15 +21,15 @@ export default (server) => { }; return { + mode: darkMode ? 'dark' : 'light', background: { - default: colors.background, + default: darkMode ? grey[900] : grey[50], }, primary: { main: colors.primary, }, secondary: { main: colors.secondary, - contrastText: colors.white, }, colors, }; diff --git a/modern/src/resources/l10n/en.json b/modern/src/resources/l10n/en.json index dcfea816..7933abd8 100644 --- a/modern/src/resources/l10n/en.json +++ b/modern/src/resources/l10n/en.json @@ -221,6 +221,7 @@ "settingsServerVersion": "Server Version", "settingsAppVersion": "App Version", "settingsConnection": "Connection", + "settingsDarkMode": "Dark Mode", "reportTitle": "Reports", "reportScheduled": "Scheduled Reports", "reportDevice": "Device", diff --git a/modern/src/settings/PreferencesPage.jsx b/modern/src/settings/PreferencesPage.jsx index b83e7095..15fd762a 100644 --- a/modern/src/settings/PreferencesPage.jsx +++ b/modern/src/settings/PreferencesPage.jsx @@ -114,48 +114,9 @@ const PreferencesPage = () => { return ( <PageLayout menu={<SettingsMenu />} breadcrumbs={['settingsTitle', 'sharedPreferences']}> <Container maxWidth="xs" className={classes.container}> - <Accordion defaultExpanded> - <AccordionSummary expandIcon={<ExpandMoreIcon />}> - <Typography variant="subtitle1"> - {t('userToken')} - </Typography> - </AccordionSummary> - <AccordionDetails className={classes.details}> - <TextField - label={t('userExpirationTime')} - type="date" - value={tokenExpiration} - onChange={(e) => { - setTokenExpiration(e.target.value); - setToken(null); - }} - /> - <FormControl> - <OutlinedInput - multiline - rows={6} - readOnly - type="text" - value={token || ''} - endAdornment={( - <InputAdornment position="end"> - <div className={classes.tokenActions}> - <IconButton size="small" edge="end" onClick={generateToken} disabled={!!token}> - <CachedIcon fontSize="small" /> - </IconButton> - <IconButton size="small" edge="end" onClick={() => navigator.clipboard.writeText(token)} disabled={!token}> - <ContentCopyIcon fontSize="small" /> - </IconButton> - </div> - </InputAdornment> - )} - /> - </FormControl> - </AccordionDetails> - </Accordion> {!readonly && ( <> - <Accordion> + <Accordion defaultExpanded> <AccordionSummary expandIcon={<ExpandMoreIcon />}> <Typography variant="subtitle1"> {t('mapTitle')} @@ -346,6 +307,49 @@ const PreferencesPage = () => { /> </AccordionDetails> </Accordion> + </> + )} + <Accordion> + <AccordionSummary expandIcon={<ExpandMoreIcon />}> + <Typography variant="subtitle1"> + {t('userToken')} + </Typography> + </AccordionSummary> + <AccordionDetails className={classes.details}> + <TextField + label={t('userExpirationTime')} + type="date" + value={tokenExpiration} + onChange={(e) => { + setTokenExpiration(e.target.value); + setToken(null); + }} + /> + <FormControl> + <OutlinedInput + multiline + rows={6} + readOnly + type="text" + value={token || ''} + endAdornment={( + <InputAdornment position="end"> + <div className={classes.tokenActions}> + <IconButton size="small" edge="end" onClick={generateToken} disabled={!!token}> + <CachedIcon fontSize="small" /> + </IconButton> + <IconButton size="small" edge="end" onClick={() => navigator.clipboard.writeText(token)} disabled={!token}> + <ContentCopyIcon fontSize="small" /> + </IconButton> + </div> + </InputAdornment> + )} + /> + </FormControl> + </AccordionDetails> + </Accordion> + {!readonly && ( + <> <Accordion> <AccordionSummary expandIcon={<ExpandMoreIcon />}> <Typography variant="subtitle1"> |