From 7f8160596c8309c2562731c0e1b51f0334df2d2a Mon Sep 17 00:00:00 2001
From: MBO-Tech-IT <jonny@mbo-tech-it.de>
Date: Sun, 26 Apr 2026 16:42:25 +0200
Subject: [PATCH] feat: add ThemeToggle to Header, apply light mode classes

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/Header.tsx | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/components/Header.tsx b/components/Header.tsx
index 54371eb..e962fa3 100644
--- a/components/Header.tsx
+++ b/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>
       )}