Add dark mode toggle feature

[Vishnu912py]

Pull Request Description: Add Dark Mode Toggle Feature

Feature Summary

Added a comprehensive dark mode toggle feature to enhance user experience with theme switching capabilities.

Key Features Added:

• 🌙 Dark Mode Toggle Button: Sun/moon icon button in the top-right navbar for instant theme switching
• 🎨 Complete Theme Support: All components (navbar, cards, inputs, buttons, text) now support both light and dark themes
• 💾 Persistent Preferences: User's theme choice is saved in localStorage and persists across sessions
• 🖥️ System Preference Detection: Automatically detects and respects user's OS dark mode setting by default
• ✨ Smooth Transitions: Elegant CSS transitions between light and dark themes
• 📱 Responsive Design: Toggle works seamlessly on all screen sizes

Technical Implementation:

• New Component: DarkModeToggle.astro with interactive JavaScript for theme switching
• CSS Custom Properties: Added --bg-primary, --text-primary, etc. for theme variables
• Global Theme Classes: Uses html.dark class for theme switching
• Component Updates: Modified 8 components to support theme-aware styling

User Experience:

• Click the sun icon (☀️) to switch to dark mode
• Click the moon icon (🌙) to switch back to light mode
• Theme preference is remembered across browser sessions
• Smooth color transitions provide polished user experience

Files Modified:

• src/components/DarkModeToggle.astro (new)
• src/layouts/Layout.astro
• src/components/Navbar.astro
• src/components/App.astro
• src/components/ProjectCard.astro
• src/components/ProjectList.astro
• src/components/SocialShare.astro
• src/components/IssueList.astro

This feature significantly improves accessibility and user comfort, especially for users who prefer dark themes or work in low-light environments. 🎯

demo.1.mp4