feat: Tag/Nacht-Modus fuer gesamtes Pitch Deck

- CSS-Variablen-basiertes Theming (globals.css)
- .theme-light Klasse auf html-Element schaltet alles um
- Toggle-Button oben rechts (Sonne/Mond Icon)
- Light Mode: helle Hintergruende, dunkle Texte, gedaempfte Glass-Effekte
- Alle text-white/* Klassen werden per CSS Override umgemapped
- Partikel-Background auf 8% Opacity im Light Mode
- Kein text-shadow-glow im Light Mode

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
2026-03-27 08:08:16 +01:00
parent 16de384831
commit fa8010cf91
2 changed files with 142 additions and 9 deletions

View File

@@ -52,6 +52,19 @@ export default function PitchDeck({ lang, onToggleLanguage }: PitchDeckProps) {
const { data, loading, error } = usePitchData()
const nav = useSlideNavigation()
const [fabOpen, setFabOpen] = useState(false)
const [theme, setTheme] = useState<'dark' | 'light'>('dark')
const toggleTheme = useCallback(() => {
setTheme(prev => {
const next = prev === 'dark' ? 'light' : 'dark'
if (next === 'light') {
document.documentElement.classList.add('theme-light')
} else {
document.documentElement.classList.remove('theme-light')
}
return next
})
}, [])
const presenter = usePresenterMode({
goToSlide: nav.goToSlide,
@@ -172,10 +185,27 @@ export default function PitchDeck({ lang, onToggleLanguage }: PitchDeckProps) {
}
return (
<div className="h-screen relative overflow-hidden bg-gradient-to-br from-slate-950 via-[#0a0a1a] to-slate-950">
<div className={`h-screen relative overflow-hidden bg-gradient-to-br ${theme === 'light' ? 'from-[#eef0f5] via-[#f8f9fc] to-[#eef0f5]' : 'from-slate-950 via-[#0a0a1a] to-slate-950'}`}>
<ParticleBackground />
<ProgressBar current={nav.currentIndex} total={nav.totalSlides} />
{/* Theme Toggle */}
<button
onClick={toggleTheme}
className="fixed top-4 right-4 z-50 p-2 rounded-full bg-white/[0.08] border border-white/10 hover:bg-white/[0.15] transition-colors backdrop-blur-xl"
title={theme === 'dark' ? 'Tag-Modus' : 'Nacht-Modus'}
>
{theme === 'dark' ? (
<svg className="w-4 h-4 text-amber-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<circle cx="12" cy="12" r="5" /><path d="M12 1v2m0 18v2M4.22 4.22l1.42 1.42m12.72 12.72l1.42 1.42M1 12h2m18 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
</svg>
) : (
<svg className="w-4 h-4 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
</svg>
)}
</button>
<SlideContainer slideKey={nav.currentSlide} direction={nav.direction}>
{renderSlide()}
</SlideContainer>