Dark Mode: Floating Toggle Button mit localStorage Persistierung und umfassenden Dark Styles auf allen 9 Seiten

2026-05-06 15:08:28 +00:00 · 2026-05-06 15:08:28 +00:00 · 715e61b4d9
commit 715e61b4d9
parent fab4cc3fa5
11 changed files with 244 additions and 3 deletions
--- a/css/style.css
+++ b/css/style.css
@ -46,6 +46,177 @@ body::before {
  100% { transform: translateX(0px); }
 }

+/* ===========================
+   Dark Mode Styles
+   =========================== */
+
+/* Dark Mode Toggle Button */
+.dark-mode-toggle {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 9999;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background: rgba(255, 20, 147, 0.9);
+  color: white;
+  border: 2px solid #ff69b4;
+  font-size: 1.5rem;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  box-shadow: 0 4px 15px rgba(255, 20, 147, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dark-mode-toggle:hover {
+  transform: scale(1.15) rotate(20deg);
+  box-shadow: 0 8px 25px rgba(255, 20, 147, 0.5);
+}
+
+.dark-mode-toggle:active {
+  transform: scale(0.95);
+}
+
+/* Dark Mode Styles */
+body.dark {
+  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f1929 100%);
+  color: #e2e8f0;
+}
+
+body.dark header {
+  background-color: #0f172a;
+  border-bottom-color: #334155;
+}
+
+body.dark header h1,
+body.dark header h2 {
+  color: #60a5fa;
+}
+
+body.dark nav {
+  background-color: rgba(15, 23, 42, 0.95);
+  border-color: #334155;
+}
+
+body.dark nav a {
+  color: #93c5fd;
+}
+
+body.dark nav a:hover,
+body.dark nav a.active {
+  color: #60a5fa;
+}
+
+body.dark main {
+  background-color: rgba(15, 23, 42, 0.5);
+}
+
+body.dark section {
+  background: rgba(30, 41, 59, 0.85);
+  border-color: #334155;
+  color: #e2e8f0;
+}
+
+body.dark section h2,
+body.dark section h3 {
+  color: #60a5fa;
+}
+
+body.dark .card {
+  background: rgba(30, 41, 59, 0.85);
+  border-color: #334155;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+}
+
+body.dark .card:hover {
+  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
+}
+
+body.dark .card h3 {
+  color: #60a5fa;
+}
+
+body.dark button {
+  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
+  color: white;
+  border-color: #1e40af;
+}
+
+body.dark button:hover {
+  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
+}
+
+body.dark input,
+body.dark textarea,
+body.dark select {
+  background-color: rgba(51, 65, 85, 0.5);
+  border-color: #475569;
+  color: #e2e8f0;
+}
+
+body.dark input::placeholder,
+body.dark textarea::placeholder {
+  color: #94a3b8;
+}
+
+body.dark input:focus,
+body.dark textarea:focus,
+body.dark select:focus {
+  border-color: #60a5fa;
+  box-shadow: 0 0 10px rgba(96, 165, 250, 0.3);
+}
+
+body.dark .progress-bar {
+  background: rgba(96, 165, 250, 0.2);
+  border-color: #3b82f6;
+}
+
+body.dark .progress-fill {
+  background: linear-gradient(90deg, #3b82f6, #60a5fa);
+}
+
+body.dark table {
+  background-color: rgba(30, 41, 59, 0.8);
+  border-color: #334155;
+}
+
+body.dark table thead {
+  background-color: rgba(15, 23, 42, 0.9);
+  color: #60a5fa;
+}
+
+body.dark table tbody tr:hover {
+  background-color: rgba(59, 130, 246, 0.1);
+}
+
+body.dark footer {
+  background-color: #0f172a;
+  border-top-color: #334155;
+  color: #94a3b8;
+}
+
+body.dark footer a {
+  color: #60a5fa;
+}
+
+body.dark footer a:hover {
+  color: #93c5fd;
+}
+
+/* Dark Mode Toggle Button in Dark Mode */
+body.dark .dark-mode-toggle {
+  background: rgba(59, 130, 246, 0.9);
+  border-color: #3b82f6;
+  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
+}
+
+body.dark .dark-mode-toggle:hover {
+  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.5);
+}
+
 /* ===========================
   Typography
   =========================== */
--- a/eis_projekt.html
+++ b/eis_projekt.html
@ -9,6 +9,11 @@
  <link rel="icon" href="img/logo.png" type="image/png">
 </head>
 <body>
+  <!-- Dark Mode Toggle Button -->
+  <button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
+    <span class="dark-mode-icon">🌙</span>
+  </button>
+
  <header>
    <div class="header-container">
      <div class="logo">
--- a/galerie.html
+++ b/galerie.html
@ -3,12 +3,17 @@
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="Galerie - David & Karo Projekt">
-  <title>Galerie – EIS Projekt</title>
+  <meta name="description" content="Galerie - David & Karo - EIS Projekt">
+  <title>Galerie – David & Karo</title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="icon" href="img/logo.png" type="image/png">
 </head>
 <body>
+  <!-- Dark Mode Toggle Button -->
+  <button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
+    <span class="dark-mode-icon">🌙</span>
+  </button>
+
  <header>
    <div class="header-container">
      <div class="logo">
--- a/impressum.html
+++ b/impressum.html
@ -9,6 +9,11 @@
  <link rel="icon" href="img/logo.png" type="image/png">
 </head>
 <body>
+  <!-- Dark Mode Toggle Button -->
+  <button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
+    <span class="dark-mode-icon">🌙</span>
+  </button>
+
  <header>
    <div class="header-container">
      <div class="logo">
--- a/index.html
+++ b/index.html
@ -9,6 +9,11 @@
  <link rel="icon" href="img/logo.png" type="image/png">
 </head>
 <body>
+  <!-- Dark Mode Toggle Button -->
+  <button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
+    <span class="dark-mode-icon">🌙</span>
+  </button>
+
  <header>
    <div class="header-container">
      <div class="logo">
--- a/js/script.js
+++ b/js/script.js
@ -1,8 +1,33 @@
 // ===========================
-// Active Navigation Highlighting
+// Dark Mode Toggle
 // ===========================

 document.addEventListener('DOMContentLoaded', function() {
+  const darkModeToggle = document.getElementById('dark-mode-toggle');
+  
+  if (darkModeToggle) {
+    const icon = darkModeToggle.querySelector('.dark-mode-icon');
+    
+    // Restore dark mode preference from localStorage
+    if (localStorage.getItem('darkMode') === 'true') {
+      document.body.classList.add('dark');
+      icon.textContent = '☀️';
+    } else {
+      icon.textContent = '🌙';
+    }
+    
+    // Toggle dark mode on button click
+    darkModeToggle.addEventListener('click', () => {
+      document.body.classList.toggle('dark');
+      const isDark = document.body.classList.contains('dark');
+      localStorage.setItem('darkMode', isDark);
+      icon.textContent = isDark ? '☀️' : '🌙';
+    });
+  }
+
+  // ===========================
+  // Active Navigation Highlighting
+  // ===========================
  // Highlight active navigation link
  const currentLocation = location.pathname.split('/').pop() || 'index.html';
  const navLinks = document.querySelectorAll('nav a');
--- a/kontakt.html
+++ b/kontakt.html
@ -9,6 +9,11 @@
  <link rel="icon" href="img/logo.png" type="image/png">
 </head>
 <body>
+  <!-- Dark Mode Toggle Button -->
+  <button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
+    <span class="dark-mode-icon">🌙</span>
+  </button>
+
  <header>
    <div class="header-container">
      <div class="logo">
--- a/notenrechner.html
+++ b/notenrechner.html
@ -9,6 +9,11 @@
  <link rel="icon" href="img/logo.png" type="image/png">
 </head>
 <body>
+  <!-- Dark Mode Toggle Button -->
+  <button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
+    <span class="dark-mode-icon">🌙</span>
+  </button>
+
  <header>
    <div class="header-container">
      <div class="logo">
--- a/team.html
+++ b/team.html
@ -9,6 +9,11 @@
  <link rel="icon" href="img/logo.png" type="image/png">
 </head>
 <body>
+  <!-- Dark Mode Toggle Button -->
+  <button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
+    <span class="dark-mode-icon">🌙</span>
+  </button>
+
  <header>
    <div class="header-container">
      <div class="logo">
--- a/textanalyse.html
+++ b/textanalyse.html
@ -9,6 +9,11 @@
  <link rel="icon" href="img/logo.png" type="image/png">
 </head>
 <body>
+  <!-- Dark Mode Toggle Button -->
+  <button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
+    <span class="dark-mode-icon">🌙</span>
+  </button>
+
  <header>
    <div class="header-container">
      <div class="logo">
--- a/ueber_uns.html
+++ b/ueber_uns.html
@ -9,6 +9,11 @@
  <link rel="icon" href="img/logo.png" type="image/png">
 </head>
 <body>
+  <!-- Dark Mode Toggle Button -->
+  <button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
+    <span class="dark-mode-icon">🌙</span>
+  </button>
+
  <header>
    <div class="header-container">
      <div class="logo">