davidkertzscher/eis-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix: Dark Mode komplett überarbeitet - type=button hinzugefügt, IIFE für sofortige Restoration, vereinfachter Event Handler

Browse source
This commit is contained in:
David Kertzscher 2026-05-06 15:22:25 +00:00
parent 240ee64653
commit b3df185c4b
11 changed files with 108 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
css/style.css
View file

@ -83,68 +83,92 @@ body::before {
}
/* Dark Mode Styles */
html.dark,
html.dark ,
body.dark {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f1929 100%);
color: #e2e8f0;
}
/* Dark Mode - Text & Headings */
body.dark h1,
html.dark h1,
html.dark ,
body.dark h1,
html.dark h2,
html.dark ,
body.dark h2,
html.dark h3,
html.dark ,
body.dark h3,
html.dark h4,
html.dark ,
body.dark h4,
html.dark ,
body.dark h5,
html.dark ,
body.dark h6 {
color: #60a5fa;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
html.dark ,
body.dark p {
color: #cbd5e1;
}
html.dark ,
body.dark a {
color: #93c5fd;
transition: all 0.2s ease;
}
html.dark ,
body.dark a:hover {
color: #60a5fa;
}
/* Dark Mode - Header */
html.dark ,
body.dark header {
background-color: rgba(15, 23, 42, 0.95);
border-bottom-color: #334155;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
html.dark ,
body.dark header h1,
html.dark ,
body.dark header h2 {
color: #60a5fa;
}
/* Dark Mode - Navigation */
html.dark ,
body.dark nav {
background-color: rgba(15, 23, 42, 0.95);
border-color: #334155;
}
html.dark ,
body.dark nav a {
color: #93c5fd;
transition: color 0.2s ease;
}
html.dark ,
body.dark nav a:hover,
html.dark ,
body.dark nav a.active {
color: #60a5fa;
}
/* Dark Mode - Main Content */
html.dark ,
body.dark main {
background-color: transparent;
}
html.dark ,
body.dark section {
background: rgba(30, 41, 59, 0.7);
border-color: #334155;
@ -152,12 +176,15 @@ body.dark section {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
html.dark ,
body.dark section h2,
html.dark ,
body.dark section h3 {
color: #60a5fa;
}
/* Dark Mode - Cards & Components */
html.dark ,
body.dark .card {
background: rgba(30, 41, 59, 0.8);
border-color: #334155;
@ -165,21 +192,25 @@ body.dark .card {
transition: all 0.2s ease;
}
html.dark ,
body.dark .card:hover {
background: rgba(30, 41, 59, 0.95);
box-shadow: 0 8px 12px rgba(59, 130, 246, 0.2);
border-color: #60a5fa;
}
html.dark ,
body.dark .card h3 {
color: #60a5fa;
}
html.dark ,
body.dark .card p {
color: #cbd5e1;
}
/* Dark Mode - Buttons */
html.dark ,
body.dark button {
background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
color: #ffffff;
@ -187,14 +218,18 @@ body.dark button {
transition: all 0.2s ease;
}
html.dark ,
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 */
html.dark ,
body.dark input,
html.dark ,
body.dark textarea,
html.dark ,
body.dark select {
background-color: rgba(51, 65, 85, 0.6);
border-color: #475569;
@ -202,13 +237,18 @@ body.dark select {
transition: all 0.2s ease;
}
html.dark ,
body.dark input::placeholder,
html.dark ,
body.dark textarea::placeholder {
color: #94a3b8;
}
html.dark ,
body.dark input:focus,
html.dark ,
body.dark textarea:focus,
html.dark ,
body.dark select:focus {
border-color: #60a5fa;
background-color: rgba(51, 65, 85, 0.8);
@ -217,54 +257,66 @@ body.dark select:focus {
}
/* Dark Mode - Progress Bars */
html.dark ,
body.dark .progress-bar {
background: rgba(96, 165, 250, 0.2);
border-color: #3b82f6;
}
html.dark ,
body.dark .progress-fill {
background: linear-gradient(90deg, #3b82f6, #60a5fa);
box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}
/* Dark Mode - Tables */
html.dark ,
body.dark table {
background-color: rgba(30, 41, 59, 0.8);
border-color: #334155;
}
html.dark ,
body.dark table thead {
background-color: rgba(15, 23, 42, 0.9);
color: #60a5fa;
}
html.dark ,
body.dark table tbody tr {
border-color: #334155;
}
html.dark ,
body.dark table tbody tr:hover {
background-color: rgba(59, 130, 246, 0.15);
}
html.dark ,
body.dark table td,
html.dark ,
body.dark table th {
color: #cbd5e1;
border-color: #334155;
}
/* Dark Mode - Badges & Lists */
html.dark ,
body.dark .badge,
html.dark ,
body.dark .tag {
background-color: rgba(59, 130, 246, 0.2);
color: #60a5fa;
border-color: #3b82f6;
}
html.dark ,
body.dark li {
color: #cbd5e1;
}
/* Dark Mode - Footer */
html.dark ,
body.dark footer {
background-color: rgba(15, 23, 42, 0.95);
border-top-color: #334155;
@ -272,33 +324,39 @@ body.dark footer {
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
}
html.dark ,
body.dark footer a {
color: #93c5fd;
transition: color 0.2s ease;
}
html.dark ,
body.dark footer a:hover {
color: #60a5fa;
}
/* Dark Mode - Hero Section */
html.dark ,
body.dark .hero {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(30, 41, 59, 0.5) 100%);
color: #e2e8f0;
}
html.dark ,
body.dark .hero h1 {
color: #60a5fa;
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}
/* Dark Mode Toggle Button in Dark Mode */
html.dark ,
body.dark .dark-mode-toggle {
background: #3b82f6;
border-color: #60a5fa;
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4), inset 0 0 10px rgba(96, 165, 250, 0.2);
}
html.dark ,
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);

2
eis_projekt.html
View file

@ -19,7 +19,7 @@
</div>
</div>
<!-- Dark Mode Toggle Button -->
<button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
<button id="dark-mode-toggle" type="button" class="dark-mode-toggle" title="Dark Mode aktivieren">
<span class="dark-mode-icon">🌙</span>
</button>
<nav>

2
galerie.html
View file

@ -19,7 +19,7 @@
</div>
</div>
<!-- Dark Mode Toggle Button -->
<button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
<button id="dark-mode-toggle" type="button" class="dark-mode-toggle" title="Dark Mode aktivieren">
<span class="dark-mode-icon">🌙</span>
</button>
<nav>

2
impressum.html
View file

@ -19,7 +19,7 @@
</div>
</div>
<!-- Dark Mode Toggle Button -->
<button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
<button id="dark-mode-toggle" type="button" class="dark-mode-toggle" title="Dark Mode aktivieren">
<span class="dark-mode-icon">🌙</span>
</button>
<nav>

2
index.html
View file

@ -19,7 +19,7 @@
</div>
</div>
<!-- Dark Mode Toggle Button -->
<button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
<button id="dark-mode-toggle" type="button" class="dark-mode-toggle" title="Dark Mode aktivieren">
<span class="dark-mode-icon">🌙</span>
</button>
<nav>

78
js/script.js
View file

@ -2,48 +2,50 @@
// Dark Mode Toggle
// ===========================
function initDarkMode() {
// Sofort beim Laden: Dark Mode Preference wiederherstellen
(function() {
if (localStorage.getItem('darkMode') === 'true') {
document.documentElement.classList.add('dark');
document.body.classList.add('dark');
}
})();
// Nach DOM Load: Event Listener attachen
document.addEventListener('DOMContentLoaded', function() {
const darkModeToggle = document.getElementById('dark-mode-toggle');
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 = '☀️';
if (darkModeToggle) {
const icon = darkModeToggle.querySelector('.dark-mode-icon');
// Icon auf aktuellen Status setzen
const isDarkMode = localStorage.getItem('darkMode') === 'true';
icon.textContent = isDarkMode ? '☀️' : '🌙';
// Click-Handler
darkModeToggle.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
console.log('🔘 Dark Mode Button geklickt');
// Toggle Dark Mode
const isDark = document.body.classList.toggle('dark');
document.documentElement.classList.toggle('dark');
// Speichern in localStorage
const darkModeState = document.body.classList.contains('dark');
localStorage.setItem('darkMode', darkModeState ? 'true' : 'false');
// Icon aktualisieren
icon.textContent = darkModeState ? '☀️' : '🌙';
console.log('✅ Dark Mode:', darkModeState ? 'EIN' : 'AUS', '| Gespeichert:', localStorage.getItem('darkMode'));
});
console.log('✅ Dark Mode Toggle erfolgreich initialisiert');
} else {
icon.textContent = '🌙';
console.error('❌ Dark Mode Toggle Button NICHT GEFUNDEN!');
}
// 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

2
kontakt.html
View file

@ -19,7 +19,7 @@
</div>
</div>
<!-- Dark Mode Toggle Button -->
<button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
<button id="dark-mode-toggle" type="button" class="dark-mode-toggle" title="Dark Mode aktivieren">
<span class="dark-mode-icon">🌙</span>
</button>
<nav>

2
notenrechner.html
View file

@ -19,7 +19,7 @@
</div>
</div>
<!-- Dark Mode Toggle Button -->
<button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
<button id="dark-mode-toggle" type="button" class="dark-mode-toggle" title="Dark Mode aktivieren">
<span class="dark-mode-icon">🌙</span>
</button>
<nav>

2
team.html
View file

@ -19,7 +19,7 @@
</div>
</div>
<!-- Dark Mode Toggle Button -->
<button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
<button id="dark-mode-toggle" type="button" class="dark-mode-toggle" title="Dark Mode aktivieren">
<span class="dark-mode-icon">🌙</span>
</button>
<nav>

2
textanalyse.html
View file

@ -19,7 +19,7 @@
</div>
</div>
<!-- Dark Mode Toggle Button -->
<button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
<button id="dark-mode-toggle" type="button" class="dark-mode-toggle" title="Dark Mode aktivieren">
<span class="dark-mode-icon">🌙</span>
</button>
<nav>

2
ueber_uns.html
View file

@ -19,7 +19,7 @@
</div>
</div>
<!-- Dark Mode Toggle Button -->
<button id="dark-mode-toggle" class="dark-mode-toggle" title="Dark Mode aktivieren">
<button id="dark-mode-toggle" type="button" class="dark-mode-toggle" title="Dark Mode aktivieren">
<span class="dark-mode-icon">🌙</span>
</button>
<nav>