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 - Vue #76

Closed
11 tasks
Tracked by #63
blackgirlbytes opened this issue Aug 28, 2024 · 2 comments · Fixed by #176
Closed
11 tasks
Tracked by #63

Add dark mode/light theme - Vue #76

blackgirlbytes opened this issue Aug 28, 2024 · 2 comments · Fixed by #176
Assignees
@Johnnyevans32
Labels
hacktoberfest medium vue

Comments

@blackgirlbytes
Copy link
Contributor

blackgirlbytes commented Aug 28, 2024 •
edited
Loading

Add dark mode/light theme with Tailwind CSS - Vue

🚀 Goal

Implement a dark mode/light theme toggle functionality in our Vue.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 Vue.js. This task focuses on adding a theme toggle feature using Tailwind CSS, which is a common and user-friendly functionality in modern web applications.

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

🔑 Tasks and Acceptance Criteria

  • Set up Tailwind CSS in the Vue.js project if not already done
  • Configure Tailwind 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 Tailwind 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 Tailwind's dark mode setting
  • Update all existing components and pages to use Tailwind'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

  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
@Johnnyevans32
Copy link
Contributor

.take

@github-actions GitHub Actions
Copy link

github-actions bot commented Oct 3, 2024

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

@Johnnyevans32 Johnnyevans32 mentioned this issue Oct 4, 2024
Merged
20 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Johnnyevans32 Johnnyevans32

Labels
hacktoberfest medium vue
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Feat/dark mode Johnnyevans32/tbd-examples
2 participants
@blackgirlbytes @Johnnyevans32