Title: Implement theme switcher to showcase buttons in different modes
Labels: enhancement, UI/UX, hacktoberfest
Description:
Button designs can look dramatically different in light vs dark themes. Adding a theme toggle would help:
Showcase how buttons adapt to different backgrounds
Test accessibility and contrast ratios
Provide better viewing experience for users
Proposed implementation:
Add a sun/moon toggle button in the header
Use Tailwind's dark mode classes
Persist theme preference in localStorage
Default to system preference
Technical notes:
Next.js + Tailwind already supports dark mode
Can use next-themes package for easy implementation
Should work with all three button types (React, HTML, Vanilla)
Acceptance criteria:
Toggle button in header/navbar
Smooth transition between themes
Theme persists across page reloads
Respects system preference on first visit
All buttons remain visible and functional in both modes
Title: Implement theme switcher to showcase buttons in different modes
Labels: enhancement, UI/UX, hacktoberfest
Description:
Button designs can look dramatically different in light vs dark themes. Adding a theme toggle would help:
Showcase how buttons adapt to different backgrounds
Test accessibility and contrast ratios
Provide better viewing experience for users
Proposed implementation:
Add a sun/moon toggle button in the header
Use Tailwind's dark mode classes
Persist theme preference in localStorage
Default to system preference
Technical notes:
Next.js + Tailwind already supports dark mode
Can use next-themes package for easy implementation
Should work with all three button types (React, HTML, Vanilla)
Acceptance criteria:
Toggle button in header/navbar
Smooth transition between themes
Theme persists across page reloads
Respects system preference on first visit
All buttons remain visible and functional in both modes