Add dark and light mode theme support with toggle functionality

[Copilot]

Implements a complete dark and light mode theme system for the personal website, adding modern theme switching capabilities with proper accessibility and persistence.

Features Added

✅ Theme Toggle Button - Accessible toggle in the top-right corner with intuitive icons (🌙/☀️) and labels

✅ Theme Context Provider - React context that manages theme state across the entire application

✅ Smart Defaults - Automatically detects user's system color scheme preference and falls back to light mode

✅ Theme Persistence - User preferences are saved in localStorage and restored on page reload

✅ Smooth Transitions - CSS transitions provide smooth color changes when switching themes

✅ Accessibility Compliant - Proper ARIA labels, keyboard navigation, and focus management

Technical Implementation

• Theme Structure: Extended theme.json to include light and dark color modes with semantic color tokens
• Component Updates: Updated existing components to use theme-aware colors (text, background, primary, etc.)
• Global Styles: Added theme-aware background and text colors with smooth transitions
• State Management: Custom React context provider manages theme state and persistence

Theme Colors

Light Mode:

• Background: White (#fff)
• Text: Dark gray (#23232c)
• Primary: Blue (#514EFD)
• Secondary: Green (#6AFFC9)

Dark Mode:

• Background: Dark gray (#23232c)
• Text: White (#fff)
• Primary: Green (#6AFFC9)
• Secondary: Blue (#514EFD)

Screenshots

Light Mode	Dark Mode

The implementation follows modern best practices for theme switching and provides a seamless user experience across both light and dark themes. Perfect for a design systems expert's personal website! 🎨

Files Changed

• src/components/ThemeProvider.js - New theme context provider
• src/components/ThemeToggle.js - New theme toggle button component
• src/components/theme.json - Extended with dark/light mode colors
• src/layout.js - Updated to use new theme provider and global styles
• src/pages/index.js - Added theme toggle to header
• src/components/LinkDark.js - Updated to use theme-aware colors
• src/components/index.js - Added exports for new components

[!WARNING]

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

• analytics.gatsbyjs.com
  • Triggering command: /usr/local/bin/node /home/REDACTED/work/broccolini.github.com/broccolini.github.com/node_modules/gatsby-telemetry/lib/send.js (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to my firewall allow list

---

💡 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.