blackgirlbytes commented 1 month ago

Add dark mode/light theme with plain CSS - Vanilla

🚀 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

🌟 Resources

Getting Started

Comment ".take" on this issue to get assigned
Fork the repository and create a new branch for this task
Follow the tasks outlined above
Submit a pull request with your changes
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! 🎉

uzefaqureshi06 commented 2 days ago

can you assign this to me

blackgirlbytes commented 2 days ago

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!

uzefaqureshi06 commented 2 days ago

.take

github-actions[bot] commented 2 days ago

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

TBD54566975 / tbd-examples

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