feat: add dark mode toggle to navigation

- Add ThemeToggle component to desktop AppHeader navbar
- Add ThemeToggle to mobile MobileMenu with label
- Reorganize social links in mobile menu for cleaner layout
- Toggle uses existing ThemeToggle component with sun/moon icons

Closes #4

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

apps/web/src/components/AppHeader.tsx

@@ -7,6 +7,7 @@ import { Icon } from '@tpmjs/ui/Icon/Icon';
 import Link from 'next/link';
 import { useState } from 'react';
 import { MobileMenu } from './MobileMenu';
+import { ThemeToggle } from './ThemeToggle';
 
 /**
  * Shared application header used across all pages
@@ -117,6 +118,7 @@ export function AppHeader(): React.ReactElement {
               >
                 <Icon icon="github" size="md" />
               </a>
+              <ThemeToggle />
               {session ? (
                 <Link href="/dashboard">
                   <Button

apps/web/src/components/MobileMenu.tsx

@@ -4,6 +4,7 @@ import { Button } from '@tpmjs/ui/Button/Button';
 import { Icon } from '@tpmjs/ui/Icon/Icon';
 import Link from 'next/link';
 import { useEffect } from 'react';
+import { ThemeToggle } from './ThemeToggle';
 
 interface MobileMenuProps {
   isOpen: boolean;
@@ -125,23 +126,28 @@ export function MobileMenu({
           {/* Divider */}
           <div className="my-4 border-t border-border" />
 
-          {/* Social links */}
+          {/* Social links and theme toggle */}
-          <ul className="space-y-1">
+          <div className="flex items-center justify-between px-3 py-3">
-            {socialLinks.map((link) => (
+            <div className="flex items-center gap-4">
-              <li key={link.href}>
+              {socialLinks.map((link) => (
                 <a
+                  key={link.href}
                   href={link.href}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="flex items-center gap-3 px-3 py-3 text-foreground hover:bg-surface rounded-md transition-colors"
+                  className="text-foreground hover:text-foreground-secondary transition-colors"
                   onClick={onClose}
+                  aria-label={link.label}
                 >
                   <Icon icon={link.icon} size="md" />
-                  {link.label}
                 </a>
-              </li>
+              ))}
-            ))}
+            </div>
-          </ul>
+            <div className="flex items-center gap-2">
+              <span className="text-sm text-foreground-secondary">Theme</span>
+              <ThemeToggle />
+            </div>
+          </div>
 
           {/* Divider */}
           <div className="my-4 border-t border-border" />