Add light mode/dark mode theme switcher with localStorage persistence

[Copilot]

Implements a complete light/dark mode theme switcher for the GitHub Grid Agent application using Primer React's built-in theming capabilities.

Features Added

🎨 Theme Management

• Theme Context (app/components/ThemeContext.tsx): React Context API for managing global theme state
• Theme Switcher Component (app/components/ThemeSwitcher.tsx): Icon button that toggles between sun (light mode) and moon (dark mode) icons
• Persistence: Theme preference is automatically saved to localStorage and persists across page reloads and browser sessions

🔧 Integration

• Added theme switcher to the GridHeader toolbar alongside existing controls (Search, Group By, Filter By, Save to Gist)
• Updated both main page (app/page.tsx) and grid page (app/grid/[id]/page.tsx) to use dynamic theming
• Implemented hydration-safe loading to prevent server/client mismatch errors

🎯 User Experience

• Instant switching: Theme changes apply immediately across the entire application
• Accessibility: Proper ARIA labels for screen readers ("Switch to dark mode" / "Switch to light mode")
• Visual feedback: Icons change to reflect current mode and next action
• Seamless integration: Uses Primer React's native color tokens, so all existing components automatically adapt

Technical Implementation

The implementation leverages Primer React's existing ThemeProvider component with dynamic colorMode prop:

// Custom theme context manages state and persistence
const { colorMode, toggleColorMode } = useTheme();

// Primer's ThemeProvider handles the actual theming
<PrimerThemeProvider colorMode={colorMode}>
  <BaseStyles>
    {/* All components automatically use theme-aware colors */}
  </BaseStyles>
</PrimerThemeProvider>

Screenshots

Light Mode

Dark Mode

The theme switcher appears as a moon/sun icon in the top toolbar and instantly switches the entire application theme.

Testing

• ✅ Theme switching works instantly across the entire application
• ✅ Theme preference persists after page refresh
• ✅ Smooth transition between light and dark modes
• ✅ Proper accessibility with aria-labels
• ✅ Build passes successfully with no new errors
• ✅ Hydration-safe implementation prevents React warnings

Files Changed

• app/components/ThemeContext.tsx - New theme management context
• app/components/ThemeSwitcher.tsx - New theme switcher component
• app/components/GridHeader.tsx - Added theme switcher to toolbar
• app/page.tsx - Updated to use dynamic theming
• app/grid/[id]/page.tsx - Updated to use dynamic theming

The theme switcher provides a polished user experience while making minimal changes to the existing codebase by leveraging Primer React's built-in theming system.

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:

• api.openai.com
  • Triggering command: next-server (v14.2.4) (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

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.