Skip to content

feat: add theme switcher with multiple color options#20

Open
idan wants to merge 2 commits intomainfrom
01KM65PB7YQSHW3JEPR4DCEX81
Open

feat: add theme switcher with multiple color options#20
idan wants to merge 2 commits intomainfrom
01KM65PB7YQSHW3JEPR4DCEX81

Conversation

@idan
Copy link
Copy Markdown
Contributor

@idan idan commented Mar 20, 2026

Add a comprehensive theme switcher feature allowing users to select between multiple color themes (orange, purple, green, blue, and teal).

Changes:

  • Added Theme type and themes array defining five available color options
  • Implemented theme state management with localStorage persistence to retain user preference across sessions
  • Added useEffect hook to sync selected theme to DOM data-attribute and localStorage
  • Created interactive color swatch buttons in the header for easy theme selection
  • Refactored gradient and hover colors to use CSS variable --accent instead of hardcoded color values
  • Added CSS custom properties in index.css to define accent colors for each theme
  • Implemented visual feedback for selected theme with ring and scale effects
  • Updated bun.lock with configVersion field
  • Added 'teal' as a new theme color option with corresponding CSS variable definition

Created by GitHub Ace · View Session

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant