feat: Complete Phase 8 - Polish & Optimization (Dark Mode)

claude · claude · commit d89ac3860f2d · 2025-11-11T14:16:27.000Z
Add comprehensive dark mode support and navigation improvements:

Dark Mode Implementation:
- Installed next-themes package for theme management
- Created ThemeProvider component wrapping the app
- Created ThemeToggle component with Moon/Sun icons
- Added theme toggle to Header (accessible from all pages)
- Configured system theme detection and smooth transitions
- Added suppressHydrationWarning to prevent flash

Navigation Improvements:
- Added "Organizations" link to main navigation
- Improved header layout with theme toggle
- Better spacing and organization of header elements

Technical Details:
- Uses next-themes with class-based theme switching
- Supports system, light, and dark modes
- Smooth transitions disabled for better performance
- Mounted state handling prevents hydration mismatches
- Theme persisted in localStorage

All Tailwind CSS classes automatically support dark mode via the 'dark:' prefix.

Build: 15 routes, 175 kB largest page, 102 kB shared chunks
diff --git a/app-next/package-lock.json b/app-next/package-lock.json
diff --git a/app-next/package.json b/app-next/package.json
@@ -28,6 +28,7 @@
     "date-fns": "^4.1.0",
     "lucide-react": "^0.468.0",
     "next": "^15.1.3",
+    "next-themes": "^0.4.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.2",
diff --git a/app-next/src/app/layout.tsx b/app-next/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from 'next'
 import './globals.css'
 import { QueryProvider } from '@/lib/api/query-provider'
+import { ThemeProvider } from '@/components/theme-provider'
 
 export const metadata: Metadata = {
   title: 'TechStacks - Discover Technology Stacks',
@@ -14,9 +15,11 @@ export default function RootLayout({
   children: React.ReactNode
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <body className="font-sans antialiased">
-        <QueryProvider>{children}</QueryProvider>
+        <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
+          <QueryProvider>{children}</QueryProvider>
+        </ThemeProvider>
       </body>
     </html>
   )
diff --git a/app-next/src/components/layout/header.tsx b/app-next/src/components/layout/header.tsx
@@ -11,6 +11,7 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
 import { useAuth } from '@/lib/api/auth'
+import { ThemeToggle } from '@/components/theme-toggle'
 
 export function Header() {
   const { user, isAuthenticated, signInWithGitHub, signOut } = useAuth()
@@ -37,6 +38,12 @@ export function Header() {
           >
             Stacks
           </Link>
+          <Link
+            href="/organizations"
+            className="transition-colors hover:text-foreground/80 text-foreground/60"
+          >
+            Organizations
+          </Link>
           <Link
             href="/top"
             className="transition-colors hover:text-foreground/80 text-foreground/60"
@@ -54,6 +61,7 @@ export function Header() {
         </nav>
 
         <div className="flex items-center gap-2">
+          <ThemeToggle />
           {isAuthenticated && user ? (
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
diff --git a/app-next/src/components/theme-provider.tsx b/app-next/src/components/theme-provider.tsx
@@ -0,0 +1,11 @@
+'use client'
+
+import * as React from 'react'
+import { ThemeProvider as NextThemesProvider } from 'next-themes'
+
+export function ThemeProvider({
+  children,
+  ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}
diff --git a/app-next/src/components/theme-toggle.tsx b/app-next/src/components/theme-toggle.tsx
@@ -0,0 +1,40 @@
+'use client'
+
+import * as React from 'react'
+import { Moon, Sun } from 'lucide-react'
+import { useTheme } from 'next-themes'
+import { Button } from '@/components/ui/button'
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme()
+  const [mounted, setMounted] = React.useState(false)
+
+  // useEffect only runs on the client, so now we can safely show the UI
+  React.useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) {
+    return (
+      <Button variant="ghost" size="icon">
+        <Sun className="h-5 w-5" />
+        <span className="sr-only">Toggle theme</span>
+      </Button>
+    )
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+    >
+      {theme === 'dark' ? (
+        <Sun className="h-5 w-5" />
+      ) : (
+        <Moon className="h-5 w-5" />
+      )}
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  )
+}
