Add dark mode with user settings page

[Copilot]

Implements dark mode toggling with localStorage persistence. Users can select light, dark, or system-preference themes via a new settings page.

Implementation

Theme Management

• UserSettingsProvider manages theme state and syncs with document.documentElement.classList
• Monitors system preference via matchMedia('prefers-color-scheme: dark)'
• Persists selection to localStorage using existing scoped key pattern

UI Changes

• New /settings route with theme selector (light/dark/system radio buttons)
• Settings accessible via gear icon in header (always visible) and user dropdown menu (when authenticated)
• Dark mode styles applied to header, homepage, and list components using Tailwind dark: variants

Developer Experience

• Tailwind configured with darkMode: 'class'
• DARK_MODE.md documents the pattern and color palette for extending dark mode to additional components

Pattern

// Standard dark mode pattern used throughout
className="bg-white dark:bg-gray-800 
           text-gray-900 dark:text-white
           border-gray-200 dark:border-gray-700"

Screenshots

Settings Page

Light	Dark

Homepage

Light	Dark

Original prompt

Add dark mode.
Create a user settings page where a user can select their preferences. Preferences get stored in local storage.

You may need to reactor in many places to support dark mode so create patterns that are easy to repeat.

---

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

[netlify]

✅ Deploy Preview for competition-groups ready!

Name	Link
🔨 Latest commit	6d459b1
🔍 Latest deploy log	https://app.netlify.com/projects/competition-groups/deploys/6963e434297b2b0008f18acb
😎 Deploy Preview	https://deploy-preview-54--competition-groups.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 71 Accessibility: 83 Best Practices: 100 SEO: 98 PWA: 90 View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.