From 2b9788bdb050f42390889418e4f3b3cb66ab3009 Mon Sep 17 00:00:00 2001
From: Benjamin Admin <benjaminadmin@MacBook-Pro.local>
Date: Wed, 15 Apr 2026 23:58:48 +0200
Subject: [PATCH] feat(pitch-deck): add day/night mode toggle to sidebar

- Theme toggle button below language toggle
- Uses existing theme-light CSS class from globals.css
- Moon/Sun icons with Nacht/Tag labels (DE) or Dark/Light (EN)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 pitch-deck/components/NavigationFAB.tsx | 28 ++++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/pitch-deck/components/NavigationFAB.tsx b/pitch-deck/components/NavigationFAB.tsx
index 268bdb4..38357fd 100644
--- a/pitch-deck/components/NavigationFAB.tsx
+++ b/pitch-deck/components/NavigationFAB.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useCallback } from 'react'
 import { motion, AnimatePresence } from 'framer-motion'
-import { Menu, X, Maximize, Minimize, Bot } from 'lucide-react'
+import { Menu, X, Maximize, Minimize, Bot, Sun, Moon } from 'lucide-react'
 import { Language } from '@/lib/types'
 import { t } from '@/lib/i18n'
 
@@ -25,6 +25,15 @@ export default function NavigationFAB({
 }: NavigationFABProps) {
   const [isOpen, setIsOpen] = useState(false)
   const [isFullscreen, setIsFullscreen] = useState(false)
+  const [isLightMode, setIsLightMode] = useState(false)
+
+  const toggleTheme = useCallback(() => {
+    setIsLightMode(prev => {
+      const next = !prev
+      document.documentElement.classList.toggle('theme-light', next)
+      return next
+    })
+  }, [])
   const i = t(lang)
 
   const toggleFullscreen = useCallback(() => {
@@ -138,6 +147,23 @@ export default function NavigationFAB({
                 </div>
               </button>
 
+              {/* Theme Toggle */}
+              <button
+                onClick={toggleTheme}
+                className="w-full flex items-center justify-between px-3 py-2 rounded-lg
+                  bg-white/[0.05] hover:bg-white/[0.1] transition-colors text-sm"
+              >
+                <span className="text-white/50">{lang === 'de' ? 'Modus' : 'Mode'}</span>
+                <div className="flex items-center gap-1">
+                  <span className={`px-2 py-0.5 rounded text-xs font-medium flex items-center gap-1 ${!isLightMode ? 'bg-indigo-500 text-white' : 'text-white/40'}`}>
+                    <Moon className="w-3 h-3" /> {lang === 'de' ? 'Nacht' : 'Dark'}
+                  </span>
+                  <span className={`px-2 py-0.5 rounded text-xs font-medium flex items-center gap-1 ${isLightMode ? 'bg-amber-500 text-white' : 'text-white/40'}`}>
+                    <Sun className="w-3 h-3" /> {lang === 'de' ? 'Tag' : 'Light'}
+                  </span>
+                </div>
+              </button>
+
               {/* Fullscreen */}
               <button
                 onClick={toggleFullscreen}