Add light/dark mode switcher to portfolio

[Copilot]

✨ Features Added

This PR implements a complete light/dark mode theming system for the portfolio website, addressing the requirement to "add a light dark mode switcher".

🎯 Key Features

• Theme Toggle Button: Added a toggle button in the bottom navigation bar with intuitive sun/moon icons
• Theme Persistence: User's theme preference is saved to localStorage and persists across browser sessions
• Smooth Transitions: CSS transitions provide seamless switching between themes
• Context-Based State Management: Implemented React Context for clean theme state management across components
• CSS Variable System: Refactored existing styles to use CSS custom properties for consistent theming

🛠 Technical Implementation

New Components & Context

• ThemeContext.js: React context provider for theme state management
• ThemeToggle.jsx: Reusable theme toggle button component with accessibility features
• ThemeToggle.css: Styling for the toggle button with hover effects

Updated Components

• App.js: Wrapped with ThemeProvider and added theme context
• NavBar2.jsx: Integrated theme toggle button into navigation
• App.css: Converted hardcoded colors to CSS variables
• NavBar.css: Updated glassmorphism effects to respect theme
• Bento.css: Updated text colors to use theme variables

CSS Variables Added

:root {
  /* Dark Theme (Default) */
  --bg-color: #000000;
  --text-color: #F0F8FF;
  --accent-color: #F2C1B6;
  --grid-color: rgba(255, 255, 255, 0.1);
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.2);
  --cursor-color: #ffffff;
  --glow-color: rgba(255, 255, 255, 0.3);
}

.light-theme {
  /* Light Theme Overrides */
  --bg-color: #ffffff;
  --text-color: #1a1a1a;
  --grid-color: rgba(0, 0, 0, 0.1);
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(0, 0, 0, 0.1);
  --cursor-color: #000000;
  --glow-color: rgba(0, 0, 0, 0.1);
}

📸 Screenshots

Dark Theme (Default):

Light Theme:

🔧 Usage

The theme toggle button is located in the bottom navigation bar (visible on desktop only, following the existing responsive design pattern). Users can click the sun/moon icon to switch between light and dark themes. The selected theme is automatically saved and restored on subsequent visits.

♿ Accessibility

• Toggle button includes proper ARIA labels and titles
• Keyboard accessible with focus indicators
• Icons clearly indicate current and target theme state
• Maintains color contrast ratios in both themes

🧪 Testing

• ✅ Theme toggle works correctly in both directions
• ✅ Theme preference persists across browser sessions
• ✅ All components respect theme changes
• ✅ Responsive design maintains mobile/desktop breakpoints
• ✅ No breaking changes to existing functionality

This implementation provides a clean, user-friendly way for visitors to choose their preferred viewing experience while maintaining the portfolio's elegant design aesthetic.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.