-
Notifications
You must be signed in to change notification settings - Fork 19
Dark mode theme #4853
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.
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
base: master
Are you sure you want to change the base?
Dark mode theme #4853
Changes from all commits
3fe501c
bd1c824
5e7be64
00a156e
138559e
555ba43
65c7194
1a1a75b
714f2c0
6810b27
94df91d
afa093d
e7a32c1
cb6bab6
28da15a
2ad283e
8fbb846
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
@@ -3,32 +3,60 @@ import cx from 'classnames'; | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
import config from '../../config.json'; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
import I18N from '../../i18n'; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
import { useTheme } from '../../context/theme'; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
import { Container } from '../../ui/container'; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
import { Icon } from '../../ui/icon'; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
import { FlexStack } from '../../layout/flex-stack'; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
import { JobsHeader } from '../../components/jobs-header'; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
import css from './header.module.css'; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
import { Button } from '../../ui/button'; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
interface HeaderProps { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
jobs: React.ComponentProps<typeof JobsHeader>['jobs']; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
export const Header = ({ className = '', jobs }: HeaderProps & React.ComponentProps<'header'>) => ( | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<Container as="header" className={cx(css.root, className)}> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<FlexStack space="small" alignItems="center"> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<JobsHeader className={css.jobs} jobs={jobs} /> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<div className={css.tools}> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<a | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
href={config.gitHubUrl} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
target="_blank" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
rel="noopener noreferrer" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
title={I18N.GITHUB_LINK_TITLE} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
aria-label={I18N.GITHUB_LINK_TITLE} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
className={css.toolsGitHub} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<Icon glyph={Icon.ICONS.GITHUB} size="large" className={css.toolsGitHubIcon} /> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
</a> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
</div> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
</FlexStack> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
</Container> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
export const Header = ({ className = '', jobs }: HeaderProps & React.ComponentProps<'header'>) => { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
const theme = useTheme(); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
return ( | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<Container as="header" className={cx(css.root, className)}> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<FlexStack space="small" alignItems="center"> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<JobsHeader className={css.jobs} jobs={jobs} /> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<FlexStack space="xxxsmall" alignItems="center" className={css.tools}> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
{theme.name === 'dark' ? ( | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<Button | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
size="small" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
outline | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
onClick={() => theme.update('light')} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
className={css.toolsButton} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<Icon glyph={Icon.ICONS.MOON} /> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
</Button> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
) : ( | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<Button | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
size="small" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
outline | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
onClick={() => theme.update('dark')} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
className={css.toolsButton} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<Icon glyph={Icon.ICONS.SUN} /> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
</Button> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Comment on lines
+27
to
+43
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Add Accessible Labels to Theme Toggle Buttons The theme toggle buttons lack accessible labels, which can hinder users relying on screen readers. To improve accessibility, add <Button
size="small"
outline
onClick={() => theme.update('light')}
className={css.toolsButton}
+ aria-label="Switch to light theme"
>
<Icon glyph={Icon.ICONS.SUN} />
</Button> <Button
size="small"
outline
onClick={() => theme.update('dark')}
className={css.toolsButton}
+ aria-label="Switch to dark theme"
>
<Icon glyph={Icon.ICONS.MOON} />
</Button>
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
)} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Comment on lines
+26
to
+44
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🛠️ Refactor suggestion Adjust Theme Toggle Icon and Logic for Better UX The current implementation displays the icon representing the current theme. This might confuse users, as they might expect the icon to represent the theme they can switch to. Consider updating the logic so that:
This approach aligns with common UX patterns and enhances user intuitiveness. Apply the following diff to adjust the icon and logic: {theme.name === 'dark' ? (
<Button
size="small"
outline
- onClick={() => theme.update('light')}
+ onClick={() => theme.update('light')}
className={css.toolsButton}
>
- <Icon glyph={Icon.ICONS.MOON} />
+ <Icon glyph={Icon.ICONS.SUN} />
</Button>
) : (
<Button
size="small"
outline
- onClick={() => theme.update('dark')}
+ onClick={() => theme.update('dark')}
className={css.toolsButton}
>
- <Icon glyph={Icon.ICONS.SUN} />
+ <Icon glyph={Icon.ICONS.MOON} />
</Button>
)} 📝 Committable suggestion
Suggested change
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<Button | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
size="small" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
outline | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
as="a" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
href={config.gitHubUrl} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
target="_blank" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
rel="noopener noreferrer" | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
title={I18N.GITHUB_LINK_TITLE} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
aria-label={I18N.GITHUB_LINK_TITLE} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
className={css.toolsButton} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<Icon glyph={Icon.ICONS.GITHUB} /> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
</Button> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
</FlexStack> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
</FlexStack> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
</Container> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Add styles for the theme toggle button.
The
.toolsButton
class is empty. Since this is part of the dark mode theme implementation, consider adding styles for proper button appearance and interaction.Here's a suggested implementation:
Would you like me to suggest additional styles or hover states for better user interaction?
📝 Committable suggestion
🧰 Tools
🪛 Biome (1.9.4)
[error] 9-10: An empty block isn't allowed.
Consider removing the empty block or adding styles inside it.
(lint/suspicious/noEmptyBlock)