Fix: Dark Mode Button funktionsfähig - Repositioniert neben Logo, Debugging verbessert, umfassende Farbschema für alle Komponenten

2026-05-06 15:18:34 +00:00 · 2026-05-06 15:18:34 +00:00 · 240ee64653
commit 240ee64653
parent 5636f1da93
11 changed files with 176 additions and 82 deletions
--- a/css/style.css
+++ b/css/style.css
@ -52,10 +52,7 @@ body::before {

 /* Dark Mode Toggle Button */
 .dark-mode-toggle {
-  position: absolute;
-  bottom: -60px;
-  left: 50%;
-  transform: translateX(-50%);
+  position: relative;
  width: 55px;
  height: 55px;
  border-radius: 50%;
@ -72,16 +69,17 @@ body::before {
  padding: 0;
  outline: none;
  pointer-events: auto;
-  z-index: 1001;
+  z-index: 100;
+  margin-top: -40px;
 }

 .dark-mode-toggle:hover {
-  transform: translateX(-50%) scale(1.2) rotate(20deg);
+  transform: scale(1.2) rotate(20deg);
  box-shadow: 0 8px 30px rgba(255, 20, 147, 0.6), inset 0 0 15px rgba(255, 105, 180, 0.3);
 }

 .dark-mode-toggle:active {
-  transform: translateX(-50%) scale(0.9);
+  transform: scale(0.9);
 }

 /* Dark Mode Styles */
@ -90,9 +88,35 @@ body.dark {
  color: #e2e8f0;
 }

+/* Dark Mode - Text & Headings */
+body.dark h1, 
+body.dark h2, 
+body.dark h3, 
+body.dark h4, 
+body.dark h5, 
+body.dark h6 {
+  color: #60a5fa;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+body.dark p {
+  color: #cbd5e1;
+}
+
+body.dark a {
+  color: #93c5fd;
+  transition: all 0.2s ease;
+}
+
+body.dark a:hover {
+  color: #60a5fa;
+}
+
+/* Dark Mode - Header */
 body.dark header {
-  background-color: #0f172a;
+  background-color: rgba(15, 23, 42, 0.95);
  border-bottom-color: #334155;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
 }

 body.dark header h1,
@ -100,6 +124,7 @@ body.dark header h2 {
  color: #60a5fa;
 }

+/* Dark Mode - Navigation */
 body.dark nav {
  background-color: rgba(15, 23, 42, 0.95);
  border-color: #334155;
@ -107,6 +132,7 @@ body.dark nav {

 body.dark nav a {
  color: #93c5fd;
+  transition: color 0.2s ease;
 }

 body.dark nav a:hover,
@ -114,14 +140,16 @@ body.dark nav a.active {
  color: #60a5fa;
 }

+/* Dark Mode - Main Content */
 body.dark main {
-  background-color: rgba(15, 23, 42, 0.5);
+  background-color: transparent;
 }

 body.dark section {
-  background: rgba(30, 41, 59, 0.85);
+  background: rgba(30, 41, 59, 0.7);
  border-color: #334155;
  color: #e2e8f0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
 }

 body.dark section h2,
@ -129,36 +157,49 @@ body.dark section h3 {
  color: #60a5fa;
 }

+/* Dark Mode - Cards & Components */
 body.dark .card {
-  background: rgba(30, 41, 59, 0.85);
+  background: rgba(30, 41, 59, 0.8);
  border-color: #334155;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+  transition: all 0.2s ease;
 }

 body.dark .card:hover {
-  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
+  background: rgba(30, 41, 59, 0.95);
+  box-shadow: 0 8px 12px rgba(59, 130, 246, 0.2);
+  border-color: #60a5fa;
 }

 body.dark .card h3 {
  color: #60a5fa;
 }

+body.dark .card p {
+  color: #cbd5e1;
+}
+
+/* Dark Mode - Buttons */
 body.dark button {
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
-  color: white;
+  color: #ffffff;
  border-color: #1e40af;
+  transition: all 0.2s ease;
 }

 body.dark button:hover {
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
 }

+/* Dark Mode - Form Elements */
 body.dark input,
 body.dark textarea,
 body.dark select {
-  background-color: rgba(51, 65, 85, 0.5);
+  background-color: rgba(51, 65, 85, 0.6);
  border-color: #475569;
  color: #e2e8f0;
+  transition: all 0.2s ease;
 }

 body.dark input::placeholder,
@ -170,9 +211,12 @@ body.dark input:focus,
 body.dark textarea:focus,
 body.dark select:focus {
  border-color: #60a5fa;
+  background-color: rgba(51, 65, 85, 0.8);
  box-shadow: 0 0 10px rgba(96, 165, 250, 0.3);
+  outline: none;
 }

+/* Dark Mode - Progress Bars */
 body.dark .progress-bar {
  background: rgba(96, 165, 250, 0.2);
  border-color: #3b82f6;
@ -180,8 +224,10 @@ body.dark .progress-bar {

 body.dark .progress-fill {
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
+  box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
 }

+/* Dark Mode - Tables */
 body.dark table {
  background-color: rgba(30, 41, 59, 0.8);
  border-color: #334155;
@ -192,22 +238,58 @@ body.dark table thead {
  color: #60a5fa;
 }

-body.dark table tbody tr:hover {
-  background-color: rgba(59, 130, 246, 0.1);
+body.dark table tbody tr {
+  border-color: #334155;
 }

+body.dark table tbody tr:hover {
+  background-color: rgba(59, 130, 246, 0.15);
+}
+
+body.dark table td,
+body.dark table th {
+  color: #cbd5e1;
+  border-color: #334155;
+}
+
+/* Dark Mode - Badges & Lists */
+body.dark .badge,
+body.dark .tag {
+  background-color: rgba(59, 130, 246, 0.2);
+  color: #60a5fa;
+  border-color: #3b82f6;
+}
+
+body.dark li {
+  color: #cbd5e1;
+}
+
+/* Dark Mode - Footer */
 body.dark footer {
-  background-color: #0f172a;
+  background-color: rgba(15, 23, 42, 0.95);
  border-top-color: #334155;
  color: #94a3b8;
+  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
 }

 body.dark footer a {
-  color: #60a5fa;
+  color: #93c5fd;
+  transition: color 0.2s ease;
 }

 body.dark footer a:hover {
-  color: #93c5fd;
+  color: #60a5fa;
+}
+
+/* Dark Mode - Hero Section */
+body.dark .hero {
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(30, 41, 59, 0.5) 100%);
+  color: #e2e8f0;
+}
+
+body.dark .hero h1 {
+  color: #60a5fa;
+  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
 }

 /* Dark Mode Toggle Button in Dark Mode */
@ -218,6 +300,7 @@ body.dark .dark-mode-toggle {
 }

 body.dark .dark-mode-toggle:hover {
+  background: #60a5fa;
  box-shadow: 0 8px 30px rgba(59, 130, 246, 0.6), inset 0 0 15px rgba(96, 165, 250, 0.3);
 }

@ -313,8 +396,6 @@ header {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
-  position: relative;
-  padding-bottom: 20px;
 }

 .logo img {
--- a/eis_projekt.html
+++ b/eis_projekt.html
@ -17,11 +17,11 @@
          <span class="institution">David & Karo</span>
          <span class="project">EIS Projekt</span>
        </div>
-        <!-- Dark Mode Toggle Button -->
-        <button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
-          <span class="dark-mode-icon">🌙</span>
-        </button>
      </div>
+      <!-- Dark Mode Toggle Button -->
+      <button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
+        <span class="dark-mode-icon">🌙</span>
+      </button>
      <nav>
        <a href="index.html">Start</a>
        <a href="ueber_uns.html">Über uns</a>
--- a/galerie.html
+++ b/galerie.html
@ -17,11 +17,11 @@
          <span class="institution">David & Karo</span>
          <span class="project">EIS Projekt</span>
        </div>
-        <!-- Dark Mode Toggle Button -->
-        <button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
-          <span class="dark-mode-icon">🌙</span>
-        </button>
      </div>
+      <!-- Dark Mode Toggle Button -->
+      <button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
+        <span class="dark-mode-icon">🌙</span>
+      </button>
      <nav>
        <a href="index.html">Start</a>
        <a href="ueber_uns.html">Über uns</a>
--- a/impressum.html
+++ b/impressum.html
@ -17,11 +17,11 @@
          <span class="institution">David & Karo</span>
          <span class="project">EIS Projekt</span>
        </div>
-        <!-- Dark Mode Toggle Button -->
-        <button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
-          <span class="dark-mode-icon">🌙</span>
-        </button>
      </div>
+      <!-- Dark Mode Toggle Button -->
+      <button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
+        <span class="dark-mode-icon">🌙</span>
+      </button>
      <nav>
        <a href="index.html">Start</a>
        <a href="ueber_uns.html">Über uns</a>
--- a/index.html
+++ b/index.html
@ -17,11 +17,11 @@
          <span class="institution">David & Karo</span>
          <span class="project">EIS Projekt</span>
        </div>
-        <!-- Dark Mode Toggle Button -->
-        <button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
-          <span class="dark-mode-icon">🌙</span>
-        </button>
      </div>
+      <!-- Dark Mode Toggle Button -->
+      <button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
+        <span class="dark-mode-icon">🌙</span>
+      </button>
      <nav>
        <a href="index.html" class="active">Start</a>
        <a href="ueber_uns.html">Über uns</a>
--- a/js/script.js
+++ b/js/script.js
@ -2,35 +2,48 @@
 // Dark Mode Toggle
 // ===========================

-document.addEventListener('DOMContentLoaded', function() {
+function initDarkMode() {
  const darkModeToggle = document.getElementById('dark-mode-toggle');
  
-  if (darkModeToggle) {
-    const icon = darkModeToggle.querySelector('.dark-mode-icon');
-    
-    // Restore dark mode preference from localStorage
-    const isDarkMode = localStorage.getItem('darkMode') === 'true';
-    if (isDarkMode) {
-      document.body.classList.add('dark');
-      icon.textContent = '☀️';
-    } else {
-      icon.textContent = '🌙';
-    }
-    
-    // Toggle dark mode on button click
-    darkModeToggle.addEventListener('click', function(e) {
-      e.preventDefault();
-      e.stopPropagation();
-      document.body.classList.toggle('dark');
-      const isDark = document.body.classList.contains('dark');
-      localStorage.setItem('darkMode', isDark ? 'true' : 'false');
-      icon.textContent = isDark ? '☀️' : '🌙';
-    });
-    
-    console.log('✅ Dark Mode Toggle initialisiert');
-  } else {
+  if (!darkModeToggle) {
    console.warn('⚠️ Dark Mode Toggle Button nicht gefunden');
+    return;
  }
+  
+  const icon = darkModeToggle.querySelector('.dark-mode-icon');
+  if (!icon) {
+    console.warn('⚠️ Dark Mode Icon nicht gefunden');
+    return;
+  }
+  
+  // Restore dark mode preference from localStorage
+  const isDarkMode = localStorage.getItem('darkMode') === 'true';
+  if (isDarkMode) {
+    document.body.classList.add('dark');
+    icon.textContent = '☀️';
+  } else {
+    icon.textContent = '🌙';
+  }
+  
+  // Toggle dark mode on button click
+  darkModeToggle.addEventListener('click', function(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    console.log('🌙 Dark Mode Toggle geklickt');
+    
+    document.body.classList.toggle('dark');
+    const isDark = document.body.classList.contains('dark');
+    localStorage.setItem('darkMode', isDark ? 'true' : 'false');
+    icon.textContent = isDark ? '☀️' : '🌙';
+    
+    console.log('💾 Dark Mode', isDark ? 'aktiviert' : 'deaktiviert');
+  });
+  
+  console.log('✅ Dark Mode Toggle erfolgreich initialisiert');
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+  initDarkMode();

  // ===========================
  // Active Navigation Highlighting
--- a/kontakt.html
+++ b/kontakt.html
@ -17,11 +17,11 @@
          <span class="institution">David & Karo</span>
          <span class="project">EIS Projekt</span>
        </div>
-        <!-- Dark Mode Toggle Button -->
-        <button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
-          <span class="dark-mode-icon">🌙</span>
-        </button>
      </div>
+      <!-- Dark Mode Toggle Button -->
+      <button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
+        <span class="dark-mode-icon">🌙</span>
+      </button>
      <nav>
        <a href="index.html">Start</a>
        <a href="ueber_uns.html">Über uns</a>
--- a/notenrechner.html
+++ b/notenrechner.html
@ -17,11 +17,11 @@
          <span class="institution">David & Karo</span>
          <span class="project">EIS Projekt</span>
        </div>
-        <!-- Dark Mode Toggle Button -->
-        <button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
-          <span class="dark-mode-icon">🌙</span>
-        </button>
      </div>
+      <!-- Dark Mode Toggle Button -->
+      <button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
+        <span class="dark-mode-icon">🌙</span>
+      </button>
      <nav>
        <a href="index.html">Start</a>
        <a href="ueber_uns.html">Über uns</a>
--- a/team.html
+++ b/team.html
@ -17,11 +17,11 @@
          <span class="institution">David & Karo</span>
          <span class="project">EIS Projekt</span>
        </div>
-        <!-- Dark Mode Toggle Button -->
-        <button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
-          <span class="dark-mode-icon">🌙</span>
-        </button>
      </div>
+      <!-- Dark Mode Toggle Button -->
+      <button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
+        <span class="dark-mode-icon">🌙</span>
+      </button>
      <nav>
        <a href="index.html">Start</a>
        <a href="ueber_uns.html">Über uns</a>
--- a/textanalyse.html
+++ b/textanalyse.html
@ -17,11 +17,11 @@
          <span class="institution">David & Karo</span>
          <span class="project">EIS Projekt</span>
        </div>
-        <!-- Dark Mode Toggle Button -->
-        <button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
-          <span class="dark-mode-icon">🌙</span>
-        </button>
      </div>
+      <!-- Dark Mode Toggle Button -->
+      <button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
+        <span class="dark-mode-icon">🌙</span>
+      </button>
      <nav>
        <a href="index.html">Start</a>
        <a href="ueber_uns.html">Über uns</a>
--- a/ueber_uns.html
+++ b/ueber_uns.html
@ -17,11 +17,11 @@
          <span class="institution">David & Karo</span>
          <span class="project">EIS Projekt</span>
        </div>
-        <!-- Dark Mode Toggle Button -->
-        <button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
-          <span class="dark-mode-icon">🌙</span>
-        </button>
      </div>
+      <!-- Dark Mode Toggle Button -->
+      <button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
+        <span class="dark-mode-icon">🌙</span>
+      </button>
      <nav>
        <a href="index.html">Start</a>
        <a href="ueber_uns.html" class="active">Über uns</a>