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 Mode Toggle Switch #28

Open
0916dhkim opened this issue Nov 22, 2022 · 4 comments
Open

Add Dark Mode Toggle Switch #28

0916dhkim opened this issue Nov 22, 2022 · 4 comments
Labels
enhancement New feature or request good first issue Good for newcomers help wanted Extra attention is needed scope:frontend Front-end issue

Comments

@0916dhkim
Copy link
Owner

Current Behavior

The app has dark mode support, but the dark mode only activates when @media (prefers-color-scheme: dark) matches.
https://github.com/0916dhkim/spotify-filter/blob/419c0ce21cd193d8f7c8fcc2abc1e1ca6f1a232f/app/public/darkmode.js#L1-L5

Desired Behavior

  • Add a dark mode toggle switch to the home page.
  • The switch should store user preference in local storage.
  • darkmode.js should listen to local storage events and update styles on a preference change.
@0916dhkim 0916dhkim added enhancement New feature or request help wanted Extra attention is needed good first issue Good for newcomers scope:frontend Front-end issue labels Nov 22, 2022
@Yasir761
Copy link

@pea-nut-z can you please tell more about this issue?

@pea-nut-z
Copy link
Contributor

Hey @Yasir761, I didn't work on this part of the codebase specifically. I would add a listener for the button from what Danny has described. We would check for the user's mode preference on the first render and whenever the button is clicked. That would be my starting approach, and I would see where it takes me.

@Yasir761
Copy link

@0916dhkim Hey! Can I work on this?

@0916dhkim
Copy link
Owner Author

@Yasir761 For sure! I've assigned you to this ticket. Please feel free to open a PR 👍
I don't have a particular design in mind, but I prefer a solution without additional dependencies.
Thanks for contributing.

@Yasir761 Yasir761 removed their assignment Oct 6, 2023
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 help wanted Extra attention is needed scope:frontend Front-end issue
Projects
None yet
Development

No branches or pull requests

3 participants