Skip to content

Adjusted dark mode #268

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Adjusted dark mode #268

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ee791eb
adjusted dark mode
eguerrant May 22, 2025
b971c11
increase contrast for text
eguerrant May 23, 2025
a6faf84
increase white text contrast
eguerrant May 23, 2025
cc0aa51
increase contrast for accent color
eguerrant May 23, 2025
81eff27
tone down logo brightness
eguerrant May 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added public/logo-dark.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/logo-square-dark.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
74 changes: 65 additions & 9 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,9 +51,14 @@ import {
useTheme,
} from '@mui/material';
import {DarkMode, LightMode, Monitor} from '@mui/icons-material';
import {lightGreen, red, yellow} from '@mui/material/colors';
import {lightGreen, red, yellow, grey} from '@mui/material/colors';

const drawerWidth: number = 240;
const darkBg1: string = '#181818';
const darkBg2: string = '#242424';
const darkBg3: string = '#080808';
const darkModeText: string = '#EAEAEA';
const darkPrimary: string = '#413E70';

interface AppBarProps extends MuiAppBarProps {
open?: boolean;
Expand Down Expand Up @@ -173,6 +178,7 @@ function Dashboard({setThemeMode}: {setThemeMode: (theme: PaletteMode) => void})
<Toolbar
sx={{
pr: '24px', // keep right padding when drawer closed
backgroundColor: (theme) => (theme.palette.mode === 'light' ? theme.palette.primary.main : darkPrimary),
}}>
<IconButton
edge="start"
Expand All @@ -191,13 +197,17 @@ function Dashboard({setThemeMode}: {setThemeMode: (theme: PaletteMode) => void})
</IconButton>
</Toolbar>
</AppBar>
<Drawer variant="permanent" open={open}>
<Drawer
sx={{backgroundColor: (theme) => (theme.palette.mode === 'light' ? 'default' : darkBg2)}}
Copy link
Preview

Copilot AI May 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using the literal 'default' for backgroundColor may not yield the intended theme background. Consider using theme.palette.background.default instead.

Suggested change
sx={{backgroundColor: (theme) => (theme.palette.mode === 'light' ? 'default' : darkBg2)}}
sx={{backgroundColor: (theme) => (theme.palette.mode === 'light' ? theme.palette.background.default : darkBg2)}}

Copilot uses AI. Check for mistakes.

variant="permanent"
open={open}>
<Toolbar
sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
px: [1],
backgroundColor: (theme) => (theme.palette.mode === 'light' ? 'default' : darkBg2),
}}>
<Link
to="/"
Expand All @@ -209,7 +219,11 @@ function Dashboard({setThemeMode}: {setThemeMode: (theme: PaletteMode) => void})
px: 2,
textDecoration: 'none',
}}>
<Avatar src="/logo-square.png" variant="square" />
{useTheme().palette.mode === 'light' ? (
<Avatar src="/logo-square.png" variant="square" />
) : (
<Avatar src="/logo-square-dark.png" variant="square" />
)}
<Typography component="h1" variant="h5" sx={{px: 2}} color="text.accent">
ACCESS
</Typography>
Expand All @@ -219,18 +233,20 @@ function Dashboard({setThemeMode}: {setThemeMode: (theme: PaletteMode) => void})
</IconButton>
</Toolbar>
<Divider />
<List component="nav">
<List sx={{backgroundColor: (theme) => (theme.palette.mode === 'light' ? 'default' : darkBg2)}} component="nav">
<NavItems open={open} />
</List>
<Stack marginTop="auto" p={2}>
<Stack
sx={{backgroundColor: (theme) => (theme.palette.mode === 'light' ? 'default' : darkBg2)}}
Comment on lines +236 to +240
Copy link
Preview

Copilot AI May 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using 'default' as a background color may not render as expected. Replace it with theme.palette.background.default for consistency.

Copilot uses AI. Check for mistakes.

marginTop="auto"
p={2}>
<ThemeToggle setThemeMode={setThemeMode} condensed={!open} />
</Stack>
</Drawer>
<Box
component="main"
sx={{
backgroundColor: (theme) =>
theme.palette.mode === 'light' ? theme.palette.grey[200] : theme.palette.grey[800],
backgroundColor: (theme) => (theme.palette.mode === 'light' ? theme.palette.grey[200] : '#1E1E1E'),
flexGrow: 1,
height: '100vh',
overflow: 'auto',
Expand Down Expand Up @@ -278,7 +294,7 @@ export default function App() {
palette: {
mode,
primary: {
main: '#5865F2',
main: mode === 'light' ? '#5865F2' : darkPrimary,
light: '#A5B2FF',
},
secondary: {
Expand All @@ -294,7 +310,12 @@ export default function App() {
main: '#57F287',
},
text: {
accent: mode === 'light' ? '#5865F2' : '#A5B2FF',
accent: mode === 'light' ? '#5865F2' : '#8385DF',
primary: mode === 'light' ? grey[900] : darkModeText,
},
background: {
paper: mode === 'light' ? '#FFFFFF' : darkBg1,
default: mode === 'light' ? '#FFFFFF' : darkBg1,
},
},
components: {
Expand All @@ -315,6 +336,41 @@ export default function App() {
}),
},
},
MuiButtonBase: {
styleOverrides: {
root: {
color: mode === 'light' ? 'default' : darkModeText,
},
},
},
MuiButton: {
styleOverrides: {
root: {
color: mode === 'light' ? 'default' : darkModeText,
},
},
},
MuiSvgIcon: {
styleOverrides: {
root: {
color: mode === 'light' ? 'default' : darkModeText,
},
},
},
MuiDrawer: {
styleOverrides: {
paper: {
backgroundColor: mode === 'light' ? 'default' : darkBg2,
},
},
},
MuiDialog: {
styleOverrides: {
paper: {
backgroundColor: mode === 'light' ? 'default' : darkBg3,
Comment on lines +342 to +370
Copy link
Preview

Copilot AI May 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using the literal 'default' for a color may not have the intended effect. Consider referencing theme.palette.text.primary or a similar valid color value.

Suggested change
color: mode === 'light' ? 'default' : darkModeText,
},
},
},
MuiButton: {
styleOverrides: {
root: {
color: mode === 'light' ? 'default' : darkModeText,
},
},
},
MuiSvgIcon: {
styleOverrides: {
root: {
color: mode === 'light' ? 'default' : darkModeText,
},
},
},
MuiDrawer: {
styleOverrides: {
paper: {
backgroundColor: mode === 'light' ? 'default' : darkBg2,
},
},
},
MuiDialog: {
styleOverrides: {
paper: {
backgroundColor: mode === 'light' ? 'default' : darkBg3,
color: mode === 'light' ? theme.palette.text.primary : darkModeText,
},
},
},
MuiButton: {
styleOverrides: {
root: {
color: mode === 'light' ? theme.palette.text.primary : darkModeText,
},
},
},
MuiSvgIcon: {
styleOverrides: {
root: {
color: mode === 'light' ? theme.palette.text.primary : darkModeText,
},
},
},
MuiDrawer: {
styleOverrides: {
paper: {
backgroundColor: mode === 'light' ? theme.palette.background.default : darkBg2,
},
},
},
MuiDialog: {
styleOverrides: {
paper: {
backgroundColor: mode === 'light' ? theme.palette.background.default : darkBg3,

Copilot uses AI. Check for mistakes.

Comment on lines +342 to +370
Copy link
Preview

Copilot AI May 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using 'default' as a color value might not render properly; consider using a valid theme color such as theme.palette.text.primary.

Suggested change
color: mode === 'light' ? 'default' : darkModeText,
},
},
},
MuiButton: {
styleOverrides: {
root: {
color: mode === 'light' ? 'default' : darkModeText,
},
},
},
MuiSvgIcon: {
styleOverrides: {
root: {
color: mode === 'light' ? 'default' : darkModeText,
},
},
},
MuiDrawer: {
styleOverrides: {
paper: {
backgroundColor: mode === 'light' ? 'default' : darkBg2,
},
},
},
MuiDialog: {
styleOverrides: {
paper: {
backgroundColor: mode === 'light' ? 'default' : darkBg3,
color: mode === 'light' ? theme.palette.text.primary : darkModeText,
},
},
},
MuiButton: {
styleOverrides: {
root: {
color: mode === 'light' ? theme.palette.text.primary : darkModeText,
},
},
},
MuiSvgIcon: {
styleOverrides: {
root: {
color: mode === 'light' ? theme.palette.text.primary : darkModeText,
},
},
},
MuiDrawer: {
styleOverrides: {
paper: {
backgroundColor: mode === 'light' ? theme.palette.background.default : darkBg2,
},
},
},
MuiDialog: {
styleOverrides: {
paper: {
backgroundColor: mode === 'light' ? theme.palette.background.default : darkBg3,

Copilot uses AI. Check for mistakes.

Comment on lines +342 to +370
Copy link
Preview

Copilot AI May 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Replace the 'default' literal with theme.palette.text.primary (or an appropriate theme color) to ensure consistent text styling in light mode.

Suggested change
color: mode === 'light' ? 'default' : darkModeText,
},
},
},
MuiButton: {
styleOverrides: {
root: {
color: mode === 'light' ? 'default' : darkModeText,
},
},
},
MuiSvgIcon: {
styleOverrides: {
root: {
color: mode === 'light' ? 'default' : darkModeText,
},
},
},
MuiDrawer: {
styleOverrides: {
paper: {
backgroundColor: mode === 'light' ? 'default' : darkBg2,
},
},
},
MuiDialog: {
styleOverrides: {
paper: {
backgroundColor: mode === 'light' ? 'default' : darkBg3,
color: mode === 'light' ? theme.palette.text.primary : darkModeText,
},
},
},
MuiButton: {
styleOverrides: {
root: {
color: mode === 'light' ? theme.palette.text.primary : darkModeText,
},
},
},
MuiSvgIcon: {
styleOverrides: {
root: {
color: mode === 'light' ? theme.palette.text.primary : darkModeText,
},
},
},
MuiDrawer: {
styleOverrides: {
paper: {
backgroundColor: mode === 'light' ? theme.palette.background.default : darkBg2,
},
},
},
MuiDialog: {
styleOverrides: {
paper: {
backgroundColor: mode === 'light' ? theme.palette.background.default : darkBg3,

Copilot uses AI. Check for mistakes.

Comment on lines +363 to +370
Copy link
Preview

Copilot AI May 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use theme.palette.background.default instead of 'default' to correctly apply the light mode background color.

Suggested change
backgroundColor: mode === 'light' ? 'default' : darkBg2,
},
},
},
MuiDialog: {
styleOverrides: {
paper: {
backgroundColor: mode === 'light' ? 'default' : darkBg3,
backgroundColor: mode === 'light' ? theme.palette.background.default : darkBg2,
},
},
},
MuiDialog: {
styleOverrides: {
paper: {
backgroundColor: mode === 'light' ? theme.palette.background.default : darkBg3,

Copilot uses AI. Check for mistakes.

Comment on lines +342 to +370
Copy link
Preview

Copilot AI May 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Replace 'default' with theme.palette.background.default to ensure proper rendering of the light mode dialog background.

Suggested change
color: mode === 'light' ? 'default' : darkModeText,
},
},
},
MuiButton: {
styleOverrides: {
root: {
color: mode === 'light' ? 'default' : darkModeText,
},
},
},
MuiSvgIcon: {
styleOverrides: {
root: {
color: mode === 'light' ? 'default' : darkModeText,
},
},
},
MuiDrawer: {
styleOverrides: {
paper: {
backgroundColor: mode === 'light' ? 'default' : darkBg2,
},
},
},
MuiDialog: {
styleOverrides: {
paper: {
backgroundColor: mode === 'light' ? 'default' : darkBg3,
color: mode === 'light' ? theme.palette.background.default : darkModeText,
},
},
},
MuiButton: {
styleOverrides: {
root: {
color: mode === 'light' ? theme.palette.background.default : darkModeText,
},
},
},
MuiSvgIcon: {
styleOverrides: {
root: {
color: mode === 'light' ? theme.palette.background.default : darkModeText,
},
},
},
MuiDrawer: {
styleOverrides: {
paper: {
backgroundColor: mode === 'light' ? theme.palette.background.default : darkBg2,
},
},
},
MuiDialog: {
styleOverrides: {
paper: {
backgroundColor: mode === 'light' ? theme.palette.background.default : darkBg3,

Copilot uses AI. Check for mistakes.

},
},
},
},
});
return createTheme(base, {
Expand Down
2 changes: 1 addition & 1 deletion src/components/DateRange.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ function ButtonField(props: ButtonFieldProps) {
color: theme.palette.text.secondary,
position: 'absolute',
// HACK: Match dark mode MUI Paper at elevation 1, which is where this is currently used
backgroundColor: theme.palette.mode === 'light' ? theme.palette.background.default : '#1E1E1E',
backgroundColor: theme.palette.mode === 'light' ? theme.palette.background.default : '#242424',
Copy link
Preview

Copilot AI May 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[nitpick] Consider extracting the hard-coded dark mode color '#242424' into a theme constant to maintain consistency across components.

Copilot uses AI. Check for mistakes.

marginLeft: '5px',
paddingX: '3px',
zIndex: '2',
Expand Down
16 changes: 8 additions & 8 deletions src/pages/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ import PeopleLeadIcon from '@mui/icons-material/ContentPaste';
import FAQIcon from '@mui/icons-material/TipsAndUpdates';
import UserIcon from '@mui/icons-material/AccountBox';

import {useTheme} from '@mui/material';

const sections: Record<string, [string, string, ReactNode]> = {
// section shorthand --> [guide title, button title, icon]
general: ['Welcome to Access!', 'Overview', <GeneralIcon />],
Expand Down Expand Up @@ -150,6 +152,7 @@ function AccordionMaker(props: AccordionMakerProps) {

export default function Home() {
const [whichAccordion, setWhichAccordion] = React.useState('general'); // general, users, people-lead, app owner, admin, faq
const theme = useTheme();

return (
<React.Fragment>
Expand All @@ -160,14 +163,11 @@ export default function Home() {
<Grid item xs={12}>
<Grid container justifyContent="center">
<Grid item>
<Box
component="img"
src="/logo.png"
alt="Access logo"
sx={{
width: 250,
}}
/>
{theme.palette.mode === 'light' ? (
<Box component="img" src="/logo.png" alt="Access logo" sx={{width: 250}} />
) : (
<Box component="img" src="/logo-dark.png" alt="Access logo" sx={{width: 250}} />
)}
</Grid>
</Grid>
</Grid>
Expand Down