Skip to content
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

Add Dark/Light Mode Theme Toggle #19

Open
kenny-io opened this issue Dec 19, 2024 · 5 comments
Open

Add Dark/Light Mode Theme Toggle #19

kenny-io opened this issue Dec 19, 2024 · 5 comments
Labels
enhancement New feature or request good first issue Good for newcomers

Comments

@kenny-io
Copy link
Collaborator

Add theme toggle functionality to improve user experience and accessibility. The app currently only supports a single theme.

Requirements:

  • Add theme toggle button in the navigation bar
  • Implement both dark and light color schemes using Tailwind
  • Persist user theme preference in local storage
  • Support system theme preference by default
  • Ensure all components maintain proper contrast ratios in both themes

Technical Notes:

  • Use Tailwind's dark mode configuration
  • Implement theme context using React context API
  • Component color schemes should be defined using CSS variables for maintainability
  • Follow existing design system while adapting colors for both themes
@kenny-io kenny-io added enhancement New feature or request good first issue Good for newcomers labels Dec 19, 2024
@thuanvnnet
Copy link

Great idea. It is needed to improve user experience

@mzkrasner
Copy link

mzkrasner commented Dec 20, 2024

Initial take: #20 @kenny-io

@kenny-io
Copy link
Collaborator Author

thank you for your contribution @mzkrasner will take a look and feedback!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request good first issue Good for newcomers
Projects
None yet
Development

No branches or pull requests

4 participants
@kenny-io @thuanvnnet @mzkrasner and others