Skip to content

Commit 4d4c034

Browse files
author
Jovert Lota Palonpon
committed
Better contrast in dark/light mode
1 parent bac01d1 commit 4d4c034

File tree

4 files changed

+92
-59
lines changed

4 files changed

+92
-59
lines changed

‎resources/js/themes/backoffice/dark.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ theme = {
2929
overrides: {
3030
MuiDrawer: {
3131
paper: {
32-
backgroundColor: '#18202c',
32+
backgroundColor: theme.palette.grey[800],
3333
},
3434
},
3535

@@ -89,7 +89,7 @@ theme = {
8989

9090
MuiDivider: {
9191
root: {
92-
backgroundColor: '#404854',
92+
backgroundColor: theme.palette.text.secondary,
9393
},
9494
},
9595

‎resources/js/themes/backoffice/light.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ theme = {
2828
overrides: {
2929
MuiDrawer: {
3030
paper: {
31-
backgroundColor: '#18202c',
31+
backgroundColor: theme.palette.common.white,
3232
},
3333
},
3434

@@ -88,7 +88,7 @@ theme = {
8888

8989
MuiDivider: {
9090
root: {
91-
backgroundColor: '#404854',
91+
backgroundColor: theme.palette.text.secondary,
9292
},
9393
},
9494

‎resources/js/ui/Snackbar.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ const Snackbar = props => {
4545
if (action && actionText) {
4646
primaryAction = (
4747
<Button key="undo" color="inherit" size="small" onClick={action}>
48-
<Typography color="inherit">{actionText}</Typography>
48+
<Typography className={classes.text}>{actionText}</Typography>
4949
</Button>
5050
);
5151
}
@@ -88,7 +88,7 @@ const Snackbar = props => {
8888
)}
8989
/>
9090

91-
<Typography color="inherit">{body}</Typography>
91+
<Typography className={classes.text}>{body}</Typography>
9292
</span>
9393
}
9494
action={actions.reverse()}
@@ -128,6 +128,10 @@ const styles = theme => ({
128128
color: theme.palette.common['white'],
129129
},
130130

131+
text: {
132+
color: theme.palette.common['white'],
133+
},
134+
131135
iconVariant: {
132136
opacity: 0.9,
133137
marginRight: theme.spacing.unit,

‎resources/js/views/__backoffice/partials/Sidebar.js

Lines changed: 82 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -59,11 +59,13 @@ const Sidebar = props => {
5959
>
6060
<Skeleton
6161
width={100}
62-
color={colors.grey['A700']}
63-
highlightColor={colors.grey['A400']}
62+
color={nightMode && colors.grey['A700']}
63+
highlightColor={nightMode && colors.grey['A400']}
6464
/>
6565
</div>
6666

67+
<Divider className={classes.topDivider} />
68+
6769
<div
6870
className={classNames(
6971
classes.link,
@@ -77,16 +79,16 @@ const Sidebar = props => {
7779
circle
7880
width={25}
7981
height={25}
80-
color={colors.grey['900']}
81-
highlightColor={colors.grey['700']}
82+
color={nightMode && colors.grey['A700']}
83+
highlightColor={nightMode && colors.grey['A400']}
8284
/>
8385
</span>
8486

8587
<span className={classes.linkTextLoading}>
8688
<Skeleton
8789
width={100}
88-
color={colors.grey['900']}
89-
highlightColor={colors.grey['700']}
90+
color={nightMode && colors.grey['A700']}
91+
highlightColor={nightMode && colors.grey['A400']}
9092
/>
9193
</span>
9294
</div>
@@ -101,8 +103,8 @@ const Sidebar = props => {
101103
>
102104
<Skeleton
103105
width={100}
104-
color={colors.grey['A700']}
105-
highlightColor={colors.grey['A400']}
106+
color={nightMode && colors.grey['A700']}
107+
highlightColor={nightMode && colors.grey['A400']}
106108
/>
107109
</div>
108110

@@ -120,16 +122,20 @@ const Sidebar = props => {
120122
circle
121123
width={25}
122124
height={25}
123-
color={colors.grey['900']}
124-
highlightColor={colors.grey['700']}
125+
color={nightMode && colors.grey['A700']}
126+
highlightColor={
127+
nightMode && colors.grey['A400']
128+
}
125129
/>
126130
</span>
127131

128132
<span className={classes.linkTextLoading}>
129133
<Skeleton
130134
width={100}
131-
color={colors.grey['900']}
132-
highlightColor={colors.grey['700']}
135+
color={nightMode && colors.grey['A700']}
136+
highlightColor={
137+
nightMode && colors.grey['A400']
138+
}
133139
/>
134140
</span>
135141
</div>
@@ -157,22 +163,24 @@ const Sidebar = props => {
157163
/>
158164
</ListItem>
159165

166+
<Divider className={classes.topDivider} />
167+
160168
<ListItem
161169
button
162170
dense
163171
className={classNames(
164172
classes.link,
165173
classes.linkGroup,
166174
classes.linkActionable,
167-
locationPathname === homeLink.path && classes.itemActive,
175+
locationPathname === homeLink.path && classes.linkActive,
168176
)}
169177
onClick={() => navigate(homeLink.path)}
170178
>
171179
<ListItemIcon>{homeLink.icon}</ListItemIcon>
172180

173181
<ListItemText
174182
classes={{
175-
primary: classes.linkPrimary,
183+
primary: classes.linkText,
176184
}}
177185
>
178186
{homeLink.name}
@@ -199,15 +207,15 @@ const Sidebar = props => {
199207
className={classNames(
200208
classes.link,
201209
classes.linkActionable,
202-
locationPathname === path && classes.itemActive,
210+
locationPathname === path && classes.linkActive,
203211
)}
204212
onClick={() => navigate(path)}
205213
>
206214
<ListItemIcon>{icon}</ListItemIcon>
207215

208216
<ListItemText
209217
classes={{
210-
primary: classes.linkPrimary,
218+
primary: classes.linkText,
211219
textDense: classes.textDense,
212220
}}
213221
>
@@ -236,78 +244,99 @@ Sidebar.propTypes = {
236244
};
237245

238246
const styles = theme => ({
247+
brand: {
248+
fontSize: 24,
249+
fontFamily: theme.typography.fontFamily,
250+
color: theme.palette.common.white,
251+
},
252+
253+
brandLogo: {
254+
width: 230,
255+
},
256+
239257
linkGroupHeader: {
240258
paddingTop: 16,
241259
paddingBottom: 16,
242260
},
243261

244262
linkGroupHeaderPrimary: {
245-
color: theme.palette.common.white,
263+
color:
264+
theme.palette.type === 'dark'
265+
? theme.palette.text.primary
266+
: theme.palette.text.secondary,
246267
},
247268

248269
link: {
249270
paddingTop: 4,
250271
paddingBottom: 4,
251-
color: 'rgba(255, 255, 255, 0.7)',
272+
color: theme.palette.text.secondary,
252273
},
253274

254275
linkGroup: {
255-
backgroundColor: '#232f3e',
256-
boxShadow: '0 -1px 0 #404854 inset',
276+
backgroundColor:
277+
theme.palette.type === 'dark'
278+
? theme.palette.grey[800]
279+
: theme.palette.common.white,
257280
paddingTop: 16,
258281
paddingBottom: 16,
259282
},
260283

261-
brandLoading: {
262-
padding: '1rem 0.75rem',
284+
linkText: {
285+
color: 'inherit',
286+
fontSize: theme.typography.fontSize,
287+
'&$textDense': {
288+
fontSize: theme.typography.fontSize,
289+
},
263290
},
264291

265-
brandLogo: {
266-
width: 230,
292+
linkActionable: {
293+
'&:hover': {
294+
color:
295+
theme.palette.type === 'dark'
296+
? theme.palette.text.primary
297+
: theme.palette.text.secondary,
298+
},
267299
},
268300

269-
linkLoading: {
270-
padding: '0.75rem',
271-
display: 'flex',
272-
flexDirection: 'row',
301+
linkActive: {
302+
color: theme.palette.common.white,
303+
backgroundColor: theme.palette.primary.main,
273304
},
274305

275-
linkIconLoading: {
276-
marginRight: theme.spacing.unit * 2,
277-
},
306+
textDense: {},
278307

279-
linkTextLoading: {
280-
marginTop: theme.spacing.unit / 2,
308+
divider: {
309+
marginTop: theme.spacing.unit * 2,
310+
backgroundColor:
311+
theme.palette.type === 'dark'
312+
? theme.palette.grey['700']
313+
: theme.palette.grey['200'],
281314
},
282315

283-
brand: {
284-
fontSize: 24,
285-
fontFamily: theme.typography.fontFamily,
286-
color: theme.palette.common.white,
316+
topDivider: {
317+
marginBottom: theme.spacing.unit * 2,
318+
backgroundColor:
319+
theme.palette.type === 'dark'
320+
? theme.palette.grey['700']
321+
: theme.palette.grey['200'],
287322
},
288323

289-
linkActionable: {
290-
'&:hover': {
291-
backgroundColor: 'rgba(255, 255, 255, 0.08)',
292-
},
324+
brandLoading: {
325+
padding: '1rem 0.75rem',
293326
},
294327

295-
itemActive: {
296-
color: '#4fc3f7',
328+
linkLoading: {
329+
padding: '0.75rem',
330+
display: 'flex',
331+
flexDirection: 'row',
297332
},
298333

299-
linkPrimary: {
300-
color: 'inherit',
301-
fontSize: theme.typography.fontSize,
302-
'&$textDense': {
303-
fontSize: theme.typography.fontSize,
304-
},
334+
linkIconLoading: {
335+
marginRight: theme.spacing.unit * 2,
305336
},
306337

307-
textDense: {},
308-
309-
divider: {
310-
marginTop: theme.spacing.unit * 2,
338+
linkTextLoading: {
339+
marginTop: theme.spacing.unit / 2,
311340
},
312341
});
313342

0 commit comments

Comments
 (0)