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.

Sign up for GitHub

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

Jump to bottom

Add dark mode/light theme - Vanilla.js #84

Open
12 tasks
Tracked by #81
blackgirlbytes opened this issue Aug 28, 2024 · 17 comments
Open
12 tasks
Tracked by #81

Add dark mode/light theme - Vanilla.js #84

blackgirlbytes opened this issue Aug 28, 2024 · 17 comments
Assignees
@29deepanshutyagi
Labels
hacktoberfest medium

Comments

@blackgirlbytes
Copy link
Contributor

blackgirlbytes commented Aug 28, 2024 •
edited
Loading

Add dark mode/light theme with plain CSS - Vanilla

🔗 Dependencies

This issue is dependent on the completion of #83. Please ensure that issue is resolved before starting work on this task.

🚀 Goal

Implement a dark mode/light theme toggle functionality in our Vanilla.js Decentralized Web App (DWA) starter using Tailwind CSS. Users should be able to switch between dark and light themes, and the app should remember their preference.

🤔 Background

We're expanding our DWA starter collection to include Vanilla.js. This task focuses on adding a theme toggle feature using plain CSS, which is a common and user-friendly functionality in modern web applications.

This is part of our larger project to create a Vanilla.js DWA starter. See our main issue here for the full context and list of all related tasks.

🔑 Tasks and Acceptance Criteria

  • Set up plain CSS in the Vanilla.js project if not already done
  • Configure plain CSS for dark mode (using the dark: variant)
  • Implement a reactive state to manage the current theme (dark or light)
  • Create a toggle button or switch component using CSS classes for users to change between dark and light themes
  • Ensure the theme change is applied immediately when toggled by adding/removing the dark class on the <html> tag
  • Store the user's theme preference in local storage
  • On app load, check local storage for the user's theme preference and apply it
  • If no preference is stored, default to the user's system preference using plain CSS's dark mode setting
  • Update all existing components and pages to use plain CSS's dark mode classes
  • Add appropriate aria labels and roles to the theme toggle for accessibility
  • Test the theme toggle functionality across different routes in the app
  • Implement end-to-end tests using Playwright to:
    - Test the theme toggle button functionality
    - Verify that the theme change is applied immediately across all pages
    - Check that the theme preference is correctly stored in local storage
    - Confirm that the app loads with the correct theme based on local storage or system preference
    - Ensure the theme persists when navigating between different routes
    - Verify that the default theme matches the user's system preference when no stored preference exists

🌟 Resources

Getting Started

  1. Comment ".take" on this issue to get assigned
  2. Fork the repository and create a new branch for this task
  3. Follow the tasks outlined above
  4. Submit a pull request with your changes
  5. Respond to any feedback during the review process

Questions?

If you have any questions or need clarification, please comment on this issue or join our Discord community.

Happy coding! 🎉
@blackgirlbytes blackgirlbytes mentioned this issue Aug 28, 2024
Open
15 tasks
@taniashiba taniashiba changed the title Add dark mode/light theme - Next.js Add dark mode/light theme - Vanilla.js Aug 29, 2024
@uzefaqureshi06
Copy link

can you assign this to me

@blackgirlbytes
Copy link
Contributor Author

Hi @uzefaqureshi06 please read the issue to learn how you can get assigned the issue. You will need to comment .take and it will autoassign the issue to you. Thank you!

@TBD54566975 TBD54566975 deleted a comment from github-actions bot Oct 1, 2024
@blackgirlbytes blackgirlbytes removed their assignment Oct 1, 2024
@uzefaqureshi06
Copy link

.take

@github-actions GitHub Actions
Copy link

github-actions bot commented Oct 1, 2024

Thanks for taking this issue! Let us know if you have any questions!

@blackgirlbytes blackgirlbytes mentioned this issue Oct 8, 2024
Closed
14 tasks
@blackgirlbytes blackgirlbytes mentioned this issue Oct 8, 2024
Open
6 tasks
@29deepanshutyagi
Copy link
Contributor

.take

@github-actions GitHub Actions
Copy link

The issue you are trying to assign to yourself is already assigned.

@blackgirlbytes
Copy link
Contributor Author

Hey @uzefaqureshi06 !! Are you still working on this? If not, ill assign to @29deepanshutyagi

@blackgirlbytes
Copy link
Contributor Author

Hey @29deepanshutyagi . Go ahead and start working on this . I'll work with @uzefaqureshi06 to find a new issue because it's been 9 days since this was assigned. I'll reassign it to you.

@29deepanshutyagi
Copy link
Contributor

29deepanshutyagi commented Oct 10, 2024 •
edited
Loading

sure ,kindly assign me this issue @blackgirlbytes

@VANSH3104
Copy link

.take

@github-actions GitHub Actions
Copy link

The issue you are trying to assign to yourself is already assigned.

@VANSH3104
Copy link

VANSH3104 commented Oct 10, 2024 •
edited
Loading

@blackgirlbytes @taniashiba I made some changes and added dark and light toggle modes can i make a pr please assign this too me

@AnshMehta24
Copy link

.take

@github-actions GitHub Actions
Copy link

The issue you are trying to assign to yourself is already assigned.

@taniashiba
Copy link
Contributor

taniashiba commented Oct 11, 2024 •
edited
Loading

@VANSH3104 @AnshMehta24 - as mentioned on a comment for another issue just a few minutes ago, this issue has already been assigned to someone else. If you try to submit a PR for this issue, you will not be granted points or credit for your PR. As stated within each of our parent issues, do not steal issues already assigned to someone else. If you need help finding an issue you'd like to contribute to across our projects, reach out to our team on https://discord.gg/tbd .

This was referenced Oct 14, 2024
Closed
Merged
@naaa760
Copy link

naaa760 commented Oct 24, 2024

.take

@github-actions GitHub Actions
Copy link

The issue you are trying to assign to yourself is already assigned.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@29deepanshutyagi 29deepanshutyagi

Labels
hacktoberfest medium
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@blackgirlbytes @29deepanshutyagi @taniashiba @VANSH3104 @AnshMehta24 @uzefaqureshi06 @naaa760