feat: add ThemeToggle to Header, apply light mode classes

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

app/globals.css

@@ -22,12 +22,17 @@ html {
 }
 
 body {
-  background-color: #18212f;
+  background-color: #f0f4f8;
-  color: #f1f5f9;
+  color: #1a202c;
   font-family: 'Inter', system-ui, sans-serif;
   -webkit-font-smoothing: antialiased;
 }
 
+.dark body {
+  background-color: #18212f;
+  color: #f1f5f9;
+}
+
 @layer components {
   /* Primary button – orange, darkens on hover */
   .btn-primary {
@@ -42,10 +47,12 @@ body {
   /* Secondary button – outlined, fills subtly on hover */
   .btn-secondary {
     @apply inline-flex items-center justify-center rounded-xl
-           border border-gray-600 text-slate-300 font-semibold
+           border border-slate-300 text-slate-700 font-semibold
            transition-all duration-200
-           hover:bg-white/5 hover:border-gray-400 hover:text-white
+           hover:bg-slate-100 hover:border-slate-400 hover:text-slate-900
-           active:scale-[0.98];
+           active:scale-[0.98]
+           dark:border-gray-600 dark:text-slate-300
+           dark:hover:bg-white/5 dark:hover:border-gray-400 dark:hover:text-white;
   }
 
   /* Small nav button */
@@ -68,7 +75,7 @@ body {
 
   /* Dot matrix – default background pattern */
   .bg-grid {
-    background-image: radial-gradient(rgba(249, 115, 22, 0.15) 1px, transparent 1px);
+    background-image: radial-gradient(rgba(249, 115, 22, 0.06) 1px, transparent 1px);
     background-size: 28px 28px;
   }
 
@@ -95,6 +102,11 @@ body {
   }
 }
 
+/* Dark-mode bg-grid override — must live outside @layer so it wins over the base rule */
+.dark .bg-grid {
+  background-image: radial-gradient(rgba(249, 115, 22, 0.15) 1px, transparent 1px);
+}
+
 /* Tagline ticker animation */
 @keyframes ticker-scroll {
   0% { transform: translateX(0); }
@@ -112,23 +124,23 @@ body {
 .legal-content h2 {
   font-size: 1.25rem;
   font-weight: 700;
-  color: #f1f5f9;
+  color: #1a202c;
   margin-bottom: 0.75rem;
   margin-top: 2rem;
   padding-bottom: 0.5rem;
-  border-bottom: 1px solid #2d3748;
+  border-bottom: 1px solid #cbd5e0;
 }
 .legal-content h3 {
   font-size: 0.95rem;
   font-weight: 600;
-  color: #fb923c;
+  color: #ea6c00;
   margin-top: 1.25rem;
   margin-bottom: 0.4rem;
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
 .legal-content p {
-  color: #94a3b8;
+  color: #4a5568;
   line-height: 1.8;
   margin-bottom: 0.75rem;
   font-size: 0.925rem;
@@ -139,7 +151,7 @@ body {
   margin: 0.75rem 0 1rem 0;
 }
 .legal-content ul li {
-  color: #94a3b8;
+  color: #4a5568;
   font-size: 0.925rem;
   line-height: 1.75;
   padding-left: 1.25rem;
@@ -157,19 +169,19 @@ body {
   background: #f97316;
 }
 .legal-content a {
-  color: #60a5fa;
+  color: #2563eb;
   text-decoration: underline;
   text-underline-offset: 3px;
 }
 .legal-content a:hover {
-  color: #fb923c;
+  color: #f97316;
 }
 .legal-content strong {
-  color: #e2e8f0;
+  color: #1a202c;
   font-weight: 600;
 }
 .legal-content .note {
-  background: #1e2a3d;
+  background: #e8eef4;
   border-left: 3px solid #f97316;
   padding: 0.75rem 1rem;
   border-radius: 0 0.5rem 0.5rem 0;
@@ -180,17 +192,52 @@ body {
   font-size: 0.875rem !important;
 }
 
+/* Legal pages – dark mode overrides */
+.dark .legal-content h2 {
+  color: #f1f5f9;
+  border-bottom-color: #2d3748;
+}
+.dark .legal-content h3 {
+  color: #fb923c;
+}
+.dark .legal-content p,
+.dark .legal-content ul li {
+  color: #94a3b8;
+}
+.dark .legal-content a {
+  color: #60a5fa;
+}
+.dark .legal-content a:hover {
+  color: #fb923c;
+}
+.dark .legal-content strong {
+  color: #e2e8f0;
+}
+.dark .legal-content .note {
+  background: #1e2a3d;
+}
+
 /* Scrollbar */
 ::-webkit-scrollbar {
   width: 6px;
 }
 ::-webkit-scrollbar-track {
-  background: #18212f;
+  background: #e8eef4;
 }
 ::-webkit-scrollbar-thumb {
-  background: #2d3748;
+  background: #94a3b8;
   border-radius: 3px;
 }
 ::-webkit-scrollbar-thumb:hover {
   background: #f97316;
 }
+
+.dark ::-webkit-scrollbar-track {
+  background: #18212f;
+}
+.dark ::-webkit-scrollbar-thumb {
+  background: #2d3748;
+}
+.dark ::-webkit-scrollbar-thumb:hover {
+  background: #f97316;
+}

app/layout.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import "./globals.css";
+import Providers from "@/components/Providers";
 
 export const metadata: Metadata = {
   title: "MBO-Tech-IT | Docker, Kubernetes & Cloud-Infrastruktur",
@@ -24,8 +25,10 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="de" className="scroll-smooth">
+    <html lang="de" className="scroll-smooth" suppressHydrationWarning>
-      <body>{children}</body>
+      <body>
+        <Providers>{children}</Providers>
+      </body>
     </html>
   );
 }

app/page.tsx

@@ -12,7 +12,7 @@ import Footer from "@/components/Footer";
 
 export default function Home() {
   return (
-    <main className="min-h-screen bg-[#18212f]">
+    <main className="min-h-screen bg-[#f0f4f8] dark:bg-[#18212f]">
       <Header />
       <Hero />
       <TaglineBanner />

components/Header.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect } from "react";
 import Link from "next/link";
 import Logo from "./Logo";
+import ThemeToggle from "./ThemeToggle";
 
 const navLinks = [
   { label: "Services", href: "/#services" },
@@ -27,7 +28,7 @@ export default function Header() {
     <header
       className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
         scrolled
-          ? "bg-[#111925]/95 backdrop-blur-md border-b border-gray-800"
+          ? "bg-white/95 dark:bg-[#111925]/95 backdrop-blur-md border-b border-slate-200 dark:border-gray-800"
           : "bg-transparent"
       }`}
     >
@@ -37,7 +38,7 @@ export default function Header() {
           <Link href="/" className="flex items-center gap-3 group">
             <Logo className="h-8 w-auto" />
             <div className="flex flex-col leading-tight">
-              <span className="font-black text-white text-base tracking-wider uppercase">
+              <span className="font-black text-slate-900 dark:text-white text-base tracking-wider uppercase">
                 MBO-<span className="text-gradient">TECH-IT</span>
               </span>
               <span className="text-[9px] font-semibold tracking-[0.2em] text-orange-400/70 uppercase hidden sm:block">
@@ -52,7 +53,7 @@ export default function Header() {
               <Link
                 key={link.href}
                 href={link.href}
-                className="text-slate-400 hover:text-blue-400 transition-colors text-sm font-medium"
+                className="text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors text-sm font-medium"
               >
                 {link.label}
               </Link>
@@ -63,11 +64,12 @@ export default function Header() {
             >
               Jetzt anfragen
             </Link>
+            <ThemeToggle />
           </nav>
 
           {/* Mobile Menu Button */}
           <button
-            className="md:hidden text-slate-400 hover:text-white transition-colors"
+            className="md:hidden text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors"
             onClick={() => setMenuOpen(!menuOpen)}
             aria-label="Menu"
           >
@@ -84,13 +86,13 @@ export default function Header() {
 
       {/* Mobile Menu */}
       {menuOpen && (
-        <div className="md:hidden bg-[#111925]/98 backdrop-blur-md border-t border-gray-800">
+        <div className="md:hidden bg-white/98 dark:bg-[#111925]/98 backdrop-blur-md border-t border-slate-200 dark:border-gray-800">
           <nav className="px-4 py-4 flex flex-col gap-4">
             {navLinks.map((link) => (
               <Link
                 key={link.href}
                 href={link.href}
-                className="text-slate-400 hover:text-blue-400 transition-colors text-sm font-medium py-1"
+                className="text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors text-sm font-medium py-1"
                 onClick={() => setMenuOpen(false)}
               >
                 {link.label}
@@ -103,6 +105,9 @@ export default function Header() {
             >
               Jetzt anfragen
             </Link>
+            <div className="flex justify-end pt-1">
+              <ThemeToggle />
+            </div>
           </nav>
         </div>
       )}

components/Providers.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { ThemeProvider } from "next-themes";
+
+export default function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
+      {children}
+    </ThemeProvider>
+  );
+}

components/ThemeToggle.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+
+export default function ThemeToggle() {
+  const { resolvedTheme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) return null;
+
+  const isDark = resolvedTheme === "dark";
+
+  return (
+    <button
+      onClick={() => setTheme(isDark ? "light" : "dark")}
+      title={isDark ? "Light Mode" : "Dark Mode"}
+      aria-label={isDark ? "Zu Hell-Modus wechseln" : "Zu Dunkel-Modus wechseln"}
+      className={
+        isDark
+          ? "rounded-md p-2 bg-[#1f2937] border border-[#374151] text-slate-400 hover:text-orange-400 transition-colors"
+          : "rounded-md p-2 bg-[#e2e8f0] border border-[#cbd5e0] text-slate-600 hover:text-orange-500 transition-colors"
+      }
+    >
+      {isDark ? (
+        // Sun icon — click to go light
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="18"
+          height="18"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden="true"
+        >
+          <circle cx="12" cy="12" r="5" />
+          <line x1="12" y1="1" x2="12" y2="3" />
+          <line x1="12" y1="21" x2="12" y2="23" />
+          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+          <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+          <line x1="1" y1="12" x2="3" y2="12" />
+          <line x1="21" y1="12" x2="23" y2="12" />
+          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+          <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+        </svg>
+      ) : (
+        // Moon icon — click to go dark
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="18"
+          height="18"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden="true"
+        >
+          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+        </svg>
+      )}
+    </button>
+  );
+}

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "next": "^15.2.0",
+        "next-themes": "^0.4.6",
         "nodemailer": "^8.0.6",
         "react": "^19.0.0",
         "react-dom": "^19.0.0"
@@ -1372,6 +1373,16 @@
         }
       }
     },
+    "node_modules/next-themes": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
+      "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "next": "^15.2.0",
+    "next-themes": "^0.4.6",
     "nodemailer": "^8.0.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

tailwind.config.ts

@@ -1,6 +1,7 @@
 import type { Config } from "tailwindcss";
 
 const config: Config = {
+  darkMode: "class",
   content: [
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",