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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user