From fa8010cf913bd017827dddf51a3be9290a172955 Mon Sep 17 00:00:00 2001 From: Benjamin Admin Date: Fri, 27 Mar 2026 08:08:16 +0100 Subject: [PATCH] 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) --- pitch-deck/app/globals.css | 119 ++++++++++++++++++++++++++-- pitch-deck/components/PitchDeck.tsx | 32 +++++++- 2 files changed, 142 insertions(+), 9 deletions(-) diff --git a/pitch-deck/app/globals.css b/pitch-deck/app/globals.css index 95ef764..8efb704 100644 --- a/pitch-deck/app/globals.css +++ b/pitch-deck/app/globals.css @@ -4,18 +4,117 @@ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap'); +/* === Dark Mode (default) === */ :root { --bg-primary: #0a0a1a; + --bg-secondary: #111128; --bg-card: rgba(255, 255, 255, 0.08); --bg-card-hover: rgba(255, 255, 255, 0.12); --border-subtle: rgba(255, 255, 255, 0.1); --text-primary: #ffffff; --text-secondary: rgba(255, 255, 255, 0.6); + --text-muted: rgba(255, 255, 255, 0.4); + --text-faint: rgba(255, 255, 255, 0.15); --accent-indigo: #6366f1; --accent-purple: #a78bfa; --accent-blue: #60a5fa; + --glass-bg: rgba(255, 255, 255, 0.08); + --glass-border: rgba(255, 255, 255, 0.1); + --glass-hover: rgba(255, 255, 255, 0.12); + --gradient-from: #0f172a; + --gradient-via: #0a0a1a; + --gradient-to: #0f172a; + --scrollbar-thumb: rgba(255, 255, 255, 0.2); + --scrollbar-hover: rgba(255, 255, 255, 0.3); + --selection-bg: rgba(99, 102, 241, 0.3); + --selection-color: white; + --red-text: #f87171; + --green-text: #34d399; + --table-row-hover: rgba(255, 255, 255, 0.02); + --table-sum-bg: rgba(255, 255, 255, 0.03); + --sticky-bg: rgba(15, 15, 30, 0.9); } +/* === Light Mode === */ +.theme-light { + --bg-primary: #f8f9fc; + --bg-secondary: #eef0f5; + --bg-card: rgba(0, 0, 0, 0.04); + --bg-card-hover: rgba(0, 0, 0, 0.07); + --border-subtle: rgba(0, 0, 0, 0.1); + --text-primary: #1a1a2e; + --text-secondary: rgba(26, 26, 46, 0.7); + --text-muted: rgba(26, 26, 46, 0.5); + --text-faint: rgba(26, 26, 46, 0.15); + --accent-indigo: #4f46e5; + --accent-purple: #7c3aed; + --accent-blue: #3b82f6; + --glass-bg: rgba(255, 255, 255, 0.7); + --glass-border: rgba(0, 0, 0, 0.08); + --glass-hover: rgba(255, 255, 255, 0.85); + --gradient-from: #eef0f5; + --gradient-via: #f8f9fc; + --gradient-to: #eef0f5; + --scrollbar-thumb: rgba(0, 0, 0, 0.15); + --scrollbar-hover: rgba(0, 0, 0, 0.25); + --selection-bg: rgba(79, 70, 229, 0.2); + --selection-color: #1a1a2e; + --red-text: #dc2626; + --green-text: #059669; + --table-row-hover: rgba(0, 0, 0, 0.02); + --table-sum-bg: rgba(0, 0, 0, 0.03); + --sticky-bg: rgba(248, 249, 252, 0.95); +} + +/* === Light mode overrides for Tailwind white/ opacity classes === */ +.theme-light .text-white { color: var(--text-primary); } +.theme-light .text-white\/80 { color: rgba(26, 26, 46, 0.85); } +.theme-light .text-white\/70 { color: rgba(26, 26, 46, 0.75); } +.theme-light .text-white\/60 { color: rgba(26, 26, 46, 0.65); } +.theme-light .text-white\/50 { color: rgba(26, 26, 46, 0.55); } +.theme-light .text-white\/40 { color: rgba(26, 26, 46, 0.45); } +.theme-light .text-white\/30 { color: rgba(26, 26, 46, 0.35); } +.theme-light .text-white\/20 { color: rgba(26, 26, 46, 0.25); } +.theme-light .text-white\/15 { color: rgba(26, 26, 46, 0.18); } + +.theme-light .bg-white\/\[0\.08\], +.theme-light .bg-white\/\[0\.06\], +.theme-light .bg-white\/\[0\.05\], +.theme-light .bg-white\/\[0\.04\], +.theme-light .bg-white\/\[0\.03\] { background-color: var(--glass-bg); } + +.theme-light .border-white\/10, +.theme-light .border-white\/\[0\.03\] { border-color: var(--glass-border); } + +.theme-light .bg-slate-900\/90, +.theme-light .bg-slate-900\/80 { background-color: var(--sticky-bg); } + +.theme-light .bg-gradient-to-br { background: linear-gradient(135deg, var(--gradient-from), var(--gradient-via), var(--gradient-to)); } + +.theme-light .hover\:bg-white\/\[0\.02\]:hover, +.theme-light .hover\:bg-white\/\[0\.04\]:hover { background-color: var(--table-row-hover); } + +/* Glass cards in light mode */ +.theme-light .backdrop-blur-xl { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } + +/* Indigo/purple tints in light mode — slightly more opaque */ +.theme-light .bg-indigo-500\/20 { background-color: rgba(79, 70, 229, 0.1); } +.theme-light .bg-indigo-500\/15 { background-color: rgba(79, 70, 229, 0.08); } +.theme-light .bg-indigo-500\/10 { background-color: rgba(79, 70, 229, 0.06); } +.theme-light .bg-emerald-500\/20 { background-color: rgba(5, 150, 105, 0.1); } +.theme-light .bg-emerald-500\/10 { background-color: rgba(5, 150, 105, 0.06); } +.theme-light .bg-purple-500\/20 { background-color: rgba(124, 58, 237, 0.1); } +.theme-light .bg-blue-500\/15 { background-color: rgba(59, 130, 246, 0.08); } + +.theme-light .border-indigo-500\/30 { border-color: rgba(79, 70, 229, 0.2); } +.theme-light .border-emerald-500\/30 { border-color: rgba(5, 150, 105, 0.2); } + +.theme-light .text-red-400, +.theme-light .text-red-400\/70 { color: var(--red-text); } + +/* Hide particle background in light mode */ +.theme-light canvas { opacity: 0.08 !important; } + * { margin: 0; padding: 0; @@ -31,8 +130,8 @@ html, body { } ::selection { - background: rgba(99, 102, 241, 0.3); - color: white; + background: var(--selection-bg); + color: var(--selection-color); } ::-webkit-scrollbar { @@ -44,28 +143,28 @@ html, body { } ::-webkit-scrollbar-thumb { - background: rgba(255, 255, 255, 0.2); + background: var(--scrollbar-thumb); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { - background: rgba(255, 255, 255, 0.3); + background: var(--scrollbar-hover); } @layer utilities { .glass { - background: var(--bg-card); + background: var(--glass-bg); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); - border: 1px solid var(--border-subtle); + border: 1px solid var(--glass-border); } .glass-hover:hover { - background: var(--bg-card-hover); + background: var(--glass-hover); } .gradient-text { - background: linear-gradient(135deg, #6366f1, #a78bfa, #60a5fa); + background: linear-gradient(135deg, var(--accent-indigo), var(--accent-purple), var(--accent-blue)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; @@ -75,3 +174,7 @@ html, body { text-shadow: 0 0 40px rgba(99, 102, 241, 0.3); } } + +.theme-light .text-shadow-glow { + text-shadow: none; +} diff --git a/pitch-deck/components/PitchDeck.tsx b/pitch-deck/components/PitchDeck.tsx index f70230d..446ae5b 100644 --- a/pitch-deck/components/PitchDeck.tsx +++ b/pitch-deck/components/PitchDeck.tsx @@ -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 ( -
+
+ {/* Theme Toggle */} + + {renderSlide()}