From 81170fbd3de9c3f2f3848f2b7dbad4cee0537436 Mon Sep 17 00:00:00 2001
From: Till Tomczak <till.tmk@gmail.com>
Date: Fri, 2 May 2025 18:02:00 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style:=20update=20base=20styles?=
 =?UTF-8?q?=20and=20background=20for=20improved=20UI=20consistency?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 static/css/base-styles.css          | 20 ++++++++++----
 static/neural-network-background.js | 43 ++++++++++++++++++++++-------
 templates/base.html                 | 27 ++++++++++++++++--
 3 files changed, 71 insertions(+), 19 deletions(-)

diff --git a/static/css/base-styles.css b/static/css/base-styles.css
index 82bd9fb..40bb4da 100644
--- a/static/css/base-styles.css
+++ b/static/css/base-styles.css
@@ -545,27 +545,35 @@ body:not(.dark) .card:hover {
     transform: translateY(-2px);
 }
 
-/* Light Mode Buttons */
+/* Light Mode Buttons mit verbesserter Lesbarkeit */
 body:not(.dark) .btn-primary {
-    background-color: var(--light-primary);
+    background: linear-gradient(135deg, var(--light-primary), var(--light-primary-hover));
     color: white;
     border: none;
     transition: all 0.2s ease;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+    font-weight: 500;
+    letter-spacing: 0.01em;
 }
 
 body:not(.dark) .btn-primary:hover {
-    background-color: var(--light-primary-hover);
-    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
+    background: linear-gradient(135deg, var(--light-primary-hover), var(--light-primary));
+    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 }
 
 body:not(.dark) .btn-secondary {
-    background-color: #f3f4f6;
+    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
     color: var(--light-text);
     border: 1px solid #e5e7eb;
+    font-weight: 500;
+    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
 }
 
 body:not(.dark) .btn-secondary:hover {
-    background-color: #e5e7eb;
+    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
+    border-color: #d1d5db;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 }
 
 body:not(.dark) .btn-outline {
diff --git a/static/neural-network-background.js b/static/neural-network-background.js
index 07a3638..01e7b09 100644
--- a/static/neural-network-background.js
+++ b/static/neural-network-background.js
@@ -41,14 +41,28 @@ class NeuralNetworkBackground {
     this.animationFrameId = null;
     this.isDestroying = false;
     
-    // Farben - Lila Farbpalette
+    // Farben für Dark/Light Mode
     this.colors = {
-      background: '#040215',
-      nodeColor: '#6a5498',
-      nodePulse: '#9c7fe0',
-      connectionColor: '#4a3870',
-      flowColor: '#b47fea'
+      dark: {
+        background: '#040215',
+        nodeColor: '#6a5498',
+        nodePulse: '#9c7fe0',
+        connectionColor: '#4a3870',
+        flowColor: '#b47fea'
+      },
+      light: {
+        background: '#f8f9fc',
+        nodeColor: '#8c6db5',
+        nodePulse: '#b094dd',
+        connectionColor: '#9882bd',
+        flowColor: '#7d5bb5'
+      }
     };
+
+    // Aktuelle Farbpalette basierend auf Theme
+    this.currentColors = document.documentElement.classList.contains('dark')
+      ? this.colors.dark
+      : this.colors.light;
     
     // Konfiguration
     this.config = {
@@ -266,7 +280,11 @@ class NeuralNetworkBackground {
   }
   
   render(now) {
-    const colors = this.colors;
+    // Aktualisiere Farben basierend auf aktuellem Theme
+    this.currentColors = document.documentElement.classList.contains('dark')
+      ? this.colors.dark
+      : this.colors.light;
+    const colors = this.currentColors;
     const width = this.canvas.width / (window.devicePixelRatio || 1);
     const height = this.canvas.height / (window.devicePixelRatio || 1);
     
@@ -386,7 +404,12 @@ class NeuralNetworkBackground {
 document.addEventListener('DOMContentLoaded', () => {
   window.neuralBackground = new NeuralNetworkBackground();
   
-  // Sicherstellen, dass die Seite immer im Dark Mode ist
-  document.documentElement.classList.add('dark');
-  document.body.classList.add('dark');
+  // Theme-Wechsel-Event-Listener
+  document.addEventListener('theme-changed', () => {
+    if (window.neuralBackground) {
+      window.neuralBackground.currentColors = document.documentElement.classList.contains('dark')
+        ? window.neuralBackground.colors.dark
+        : window.neuralBackground.colors.light;
+    }
+  });
 }); 
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index f56a4c3..0ebfb63 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -129,13 +129,15 @@
     <style>
         /* Light‑Mode */
         :root {
-          --bg-primary:#f4f6fa;
-          --bg-secondary:#e9ecf3;
+          --bg-primary:#f8fafc;
+          --bg-secondary:#f1f5f9;
           --text-primary:#232837;
           --text-secondary:#475569;
           --accent-primary:#7c3aed;
           --accent-secondary:#8b5cf6;
           --glow-effect:0 0 8px rgba(139,92,246,.08);
+          background-image: linear-gradient(to bottom right, rgba(248, 250, 252, 0.8), rgba(241, 245, 249, 0.8));
+          background-attachment: fixed;
         }
         /* Dark‑Mode */
         .dark {
@@ -149,7 +151,8 @@
         }
   
         body {
-          @apply min-h-screen bg-[color:var(--bg-primary)] text-[color:var(--text-primary)] transition-colors duration-300;
+          @apply min-h-screen bg-[color:var(--bg-primary)] text-[color:var(--text-primary)];
+          transition: background-color 0.5s ease-in-out, color 0.3s ease-in-out, background-image 0.5s ease-in-out;
         }
   
         /* Utilities */
@@ -320,6 +323,24 @@
 
                 <!-- Rechte Seite -->
                 <div class="flex items-center space-x-4">
+                    <!-- Dark/Light Mode Schalter -->
+                    <button
+                        @click="toggleDarkMode()"
+                        class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-300 focus:outline-none"
+                        :class="darkMode ? 'bg-purple-600' : 'bg-gray-200'"
+                    >
+                        <span class="sr-only">Dark Mode umschalten</span>
+                        <!-- Schieberegler -->
+                        <span
+                            class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-300"
+                            :class="darkMode ? 'translate-x-6' : 'translate-x-1'"
+                        ></span>
+                        <!-- Icons -->
+                        <i class="fas fa-sun absolute left-1 text-yellow-400 transition-opacity duration-300"
+                           :class="darkMode ? 'opacity-0' : 'opacity-100'"></i>
+                        <i class="fas fa-moon absolute right-1 text-gray-100 transition-opacity duration-300"
+                           :class="darkMode ? 'opacity-100' : 'opacity-0'"></i>
+                    </button>
                     <!-- Profil-Link oder Login -->
                     {% if current_user.is_authenticated %}
                     <div class="relative" x-data="{ open: false }">