Dark/Light Theme Toggle Enhancement

[CipherYuvraj]

Improve the current theme toggle with smooth transitions, better contrast ratios, and persistent theme selection across browser sessions.

🎯 Requirements

• Add smooth CSS transitions for theme changes
• Implement localStorage for theme persistence
• Ensure WCAG AA contrast compliance
• Add theme toggle animation/icon changes
• Update all components to support both themes consistently

✅ Acceptance Criteria

• Theme persists after browser refresh
• Smooth transition animations (300ms duration)
• All text meets WCAG AA contrast requirements
• Toggle button has proper hover/focus states
• Theme preference is respected on first visit
• All visualization elements adapt to theme changes

🛠️ Technical Details

// Expected localStorage structure:
{
  "algorithmVisualizer": {
    "theme": "dark" | "light",
    "preferences": {
      "autoSave": true,
      "animationSpeed": "medium"
    }
  }
}

📚 Helpful Resources

• CSS Transitions Guide
• WCAG Color Contrast Guidelines
• Check src/App.css for current theme variables

---

[ShatadruM]

@CipherYuvraj, can I take up this issue

[Sansi-28]

Assign this to me i can do this easily.