Make hover bg red for buttons in dark themes
Luke Karrys committed
Oct 20, 2023 at 18:44 UTC
c29c99eef563b894acce42705d4f37568b010ad2
2 files changed
+33
-22
src/components/nav-drawer.js
+26
-22
@@ -52,33 +52,37 @@ function NavDrawer() {
52
bg: 'canvas.default',
53
}}
54
>
55
- <Box
56
- sx={{
57
- borderWidth: 0,
58
- borderRadius: 0,
59
- borderBottomWidth: 1,
60
- borderColor: 'border.muted',
61
- borderStyle: 'solid',
62
- }}
63
- >
55
+ <ThemeProvider colorMode="night" nightScheme="dark_dimmed">
56
<Box
57
sx={{
66
- py: 3,
67
- pl: 4,
68
- pr: 3,
69
- alignItems: 'center',
70
- justifyContent: 'space-between',
71
- display: 'flex',
58
+ borderWidth: 0,
59
+ borderRadius: 0,
60
+ borderBottomWidth: 1,
61
+ borderColor: 'border.muted',
62
+ borderStyle: 'solid',
63
+ color: 'fg.default',
64
+ bg: 'canvas.default',
65
}}
66
>
74
- <Link to="/" sx={{display: 'inline-block', color: 'inherit'}}>
75
- {siteMetadata.title}
76
- </Link>
77
- <Button aria-label="Close" onClick={setClose}>
78
- <XIcon />
79
- </Button>
67
+ <Box
68
+ sx={{
69
+ py: 3,
70
+ pl: 4,
71
+ pr: 3,
72
+ alignItems: 'center',
73
+ justifyContent: 'space-between',
74
+ display: 'flex',
75
+ }}
76
+ >
77
+ <Link to="/" sx={{fontSize: 2, color: 'fg.default'}}>
78
+ {siteMetadata.title}
79
+ </Link>
80
+ <Button aria-label="Close" onClick={setClose}>
81
+ <XIcon />
82
+ </Button>
83
+ </Box>
84
</Box>
81
- </Box>
85
+ </ThemeProvider>
86
<Box sx={{display: 'flex', flexDirection: 'column'}}>
87
<NavItems />
88
</Box>
src/root.js
+7
@@ -22,6 +22,13 @@ const npmTheme = deepmerge(theme, {
22
fg: {
23
default: '#E1E4E8',
24
},
25
+ btn: {
26
+ text: '#E1E4E8',
27
+ bg: 'transparent',
28
+ border: '#444D56',
29
+ hoverBorder: '#444D56',
30
+ hoverBg: NPM_RED,
31
+ },
32
},
33
},
34
},