From 95bc368ebb28318ef3baf91ace1bc7e28a74fd2c Mon Sep 17 00:00:00 2001
From: Matthias Puchstein <matthias@puchstein.bayern>
Date: Sun, 13 Jul 2025 02:41:21 +0200
Subject: [PATCH] added dark theme support for logo text in `Overview` and
 `ChipOverview`, included new `logotext_dark.svg`, and implemented a theme
 observer; updated `ChipCard` navigation logic for correct routing

Signed-off-by: Matthias Puchstein <matthias@puchstein.bayern>
---
 src/assets/logotext_dark.svg | 21 ++++++++++++++++
 src/components/ChipCard.tsx  |  2 +-
 src/pages/ChipOverview.tsx   | 35 ++++++++++++++++++++++++++-
 src/pages/Overview.tsx       | 46 ++++++++++++++++++++++++++++++++----
 4 files changed, 97 insertions(+), 7 deletions(-)
 create mode 100644 src/assets/logotext_dark.svg

diff --git a/src/assets/logotext_dark.svg b/src/assets/logotext_dark.svg
new file mode 100644
index 0000000..61204fe
--- /dev/null
+++ b/src/assets/logotext_dark.svg
@@ -0,0 +1,21 @@
+<svg width="400" height="120" viewBox="0 0 400 120" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <linearGradient id="moonGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0" stop-color="#a64dff"/>
+            <stop offset="100" stop-color="#6a0dad"/>
+        </linearGradient>
+        <mask id="moonMask">
+            <circle cx="60" cy="60" r="50" fill="white"/>
+            <circle cx="75" cy="40" r="45" fill="black"/>
+        </mask>
+        <style type="text/css">
+            @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&amp;display=swap');
+        </style>
+    </defs>
+    <circle cx="60" cy="60" r="60" fill="url(#moonGradient)" mask="url(#moonMask)"/>
+    <text x="250" y="60%" dominant-baseline="middle" text-anchor="middle"
+          font-family="'Raleway', sans-serif" font-size="70" fill="black" letter-spacing="2"
+          style="text-shadow: 0 0 5px rgba(0,0,0,0.3);">
+        REMind
+    </text>
+</svg>
diff --git a/src/components/ChipCard.tsx b/src/components/ChipCard.tsx
index 01c4cff..acac260 100644
--- a/src/components/ChipCard.tsx
+++ b/src/components/ChipCard.tsx
@@ -3,7 +3,7 @@ import {NavLink} from 'react-router-dom';
 
 export const ChipCard: React.FC = () => {
     return (
-        <NavLink to="/"
+        <NavLink to="/chip"
                  className="block transition-all duration-300 hover:transform hover:scale-[1.02] hover:translate-y-[-2px] animate-fadeIn rounded-lg mb-4 floating">
             <div
                 className="p-4 backdrop-blur-sm rounded-lg"
diff --git a/src/pages/ChipOverview.tsx b/src/pages/ChipOverview.tsx
index fc57f8f..480e8da 100644
--- a/src/pages/ChipOverview.tsx
+++ b/src/pages/ChipOverview.tsx
@@ -15,9 +15,38 @@ import {
     FaUsers,
 } from 'react-icons/fa';
 import {HiSparkles} from 'react-icons/hi';
+import {useEffect, useState} from 'react';
 import logotext from "../assets/logotext.svg";
+import logotext_dark from "../assets/logotext_dark.svg";
 
 export default function ChipOverview() {
+    const [isDarkTheme, setIsDarkTheme] = useState(false);
+
+    useEffect(() => {
+        // Initialize theme state
+        const updateThemeState = () => {
+            const theme = document.documentElement.getAttribute('data-theme');
+            setIsDarkTheme(theme === 'dark');
+        };
+
+        // Set initial state
+        updateThemeState();
+
+        // Create observer to watch for theme changes
+        const observer = new MutationObserver(mutations => {
+            mutations.forEach(mutation => {
+                if (mutation.attributeName === 'data-theme') {
+                    updateThemeState();
+                }
+            });
+        });
+
+        // Start observing
+        observer.observe(document.documentElement, {attributes: true});
+
+        // Cleanup
+        return () => observer.disconnect();
+    }, []);
     return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
         {/* Floating Background Elements */}
         <div className="absolute inset-0 pointer-events-none">
@@ -36,7 +65,11 @@ export default function ChipOverview() {
         <div className="text-center mb-12 sm:mb-16 relative z-10">
             <div className="animate-pulse flex flex-col items-center mb-8 sm:mb-12">
                 <div className="flex items-center justify-around">
-                    <img src={logotext} alt="REMind Logo and Text" className="h-32 sm:h-40 md:h-48 mb-4"/>
+                    {isDarkTheme ? (
+                        <img src={logotext} alt="REMind Logo and Text" className="h-32 sm:h-40 md:h-48 mb-4"/>
+                    ) : (
+                        <img src={logotext_dark} alt="REMind Logo and Text" className="h-32 sm:h-40 md:h-48 mb-4"/>
+                    )}
                 </div>
                 <p className="text-lg sm:text-xl dreamy-text">Bahnbrechende Traumtechnologie</p>
             </div>
diff --git a/src/pages/Overview.tsx b/src/pages/Overview.tsx
index 27ff4d9..783764a 100644
--- a/src/pages/Overview.tsx
+++ b/src/pages/Overview.tsx
@@ -15,10 +15,39 @@ import {
     FaVrCardboard,
 } from 'react-icons/fa';
 import {HiSparkles} from 'react-icons/hi';
-import logotext from "../assets/logotext.svg";
 import {NavLink} from 'react-router-dom';
+import {useEffect, useState} from 'react';
+import logotext from '../assets/logotext.svg'
+import logotext_dark from '../assets/logotext_dark.svg'
 
 export default function Overview() {
+    const [isDarkTheme, setIsDarkTheme] = useState(false);
+
+    useEffect(() => {
+        // Initialize theme state
+        const updateThemeState = () => {
+            const theme = document.documentElement.getAttribute('data-theme');
+            setIsDarkTheme(theme === 'dark');
+        };
+
+        // Set initial state
+        updateThemeState();
+
+        // Create observer to watch for theme changes
+        const observer = new MutationObserver(mutations => {
+            mutations.forEach(mutation => {
+                if (mutation.attributeName === 'data-theme') {
+                    updateThemeState();
+                }
+            });
+        });
+
+        // Start observing
+        observer.observe(document.documentElement, {attributes: true});
+
+        // Cleanup
+        return () => observer.disconnect();
+    }, []);
     return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
         {/* Floating Background Elements */}
         <div className="absolute inset-0 pointer-events-none">
@@ -37,7 +66,11 @@ export default function Overview() {
         <div className="text-center mb-12 sm:mb-16 relative z-10">
             <div className="animate-pulse flex flex-col items-center mb-8 sm:mb-12">
                 <div className="flex items-center justify-around">
-                    <img src={logotext} alt="REMind Logo and Text" className="h-32 sm:h-40 md:h-48 mb-4"/>
+                    {isDarkTheme ? (
+                        <img src={logotext} alt="REMind Logo and Text" className="h-32 sm:h-40 md:h-48 mb-4"/>
+                    ) : (
+                        <img src={logotext_dark} alt="REMind Logo and Text" className="h-32 sm:h-40 md:h-48 mb-4"/>
+                    )}
                 </div>
                 <p className="text-lg sm:text-xl dreamy-text">Träume analysieren, Gesellschaft verstehen</p>
             </div>
@@ -55,7 +88,8 @@ export default function Overview() {
                 </p>
             </div>
         </div>
-        {/* Main Features Grid - Dreamy Cards */}
+        {/* Main Features Grid - Dreamy Cards */
+        }
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
             {/* KI-Traumdeutung */}
             <div
@@ -166,7 +200,8 @@ export default function Overview() {
             </div>
         </div>
 
-        {/* Dreamy Workflow Section */}
+        {/* Dreamy Workflow Section */
+        }
         <div
             className="dream-container floating mb-16 backdrop-blur-lg bg-gradient-to-br from-pink-500/30 to-red-400/30 dark:from-pink-800/30 dark:to-red-900/30 rounded-xl sm:rounded-2xl md:rounded-3xl p-6 sm:p-8 md:p-12"
             style={{animationDelay: '3.2s'}}>
@@ -218,7 +253,8 @@ export default function Overview() {
             </div>
         </div>
 
-        {/* Dreamy CTA Section */}
+        {/* Dreamy CTA Section */
+        }
         <div className="relative mt-12 sm:mt-16">
             <div
                 className="dreamy-card rounded-xl sm:rounded-2xl p-6 sm:p-8 md:p-12 text-center floating bg-gradient-to-br from-pink-600 via-violet-600 to-purple-600 border-none overflow-hidden"