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

Fix: Dark Mode Button - Verbesserter z-index, pointer-events, hover Effects und robusteres JavaScript mit Debugging

Browse source
This commit is contained in:
David Kertzscher 2026-05-06 15:11:11 +00:00
parent 715e61b4d9
commit 8ed5500b07
2 changed files with 28 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
css/style.css
View file

@ -55,29 +55,32 @@ body::before {
position: fixed;
top: 20px;
right: 20px;
z-index: 9999;
width: 50px;
height: 50px;
z-index: 10000;
width: 55px;
height: 55px;
border-radius: 50%;
background: rgba(255, 20, 147, 0.9);
background: #ff1493;
color: white;
border: 2px solid #ff69b4;
font-size: 1.5rem;
border: 3px solid #ff69b4;
font-size: 1.8rem;
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);
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(255, 20, 147, 0.4), inset 0 0 10px rgba(255, 105, 180, 0.2);
display: flex;
align-items: center;
justify-content: center;
padding: 0;
outline: none;
pointer-events: auto;
}
.dark-mode-toggle:hover {
transform: scale(1.15) rotate(20deg);
box-shadow: 0 8px 25px rgba(255, 20, 147, 0.5);
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: scale(0.95);
transform: scale(0.9);
}
/* Dark Mode Styles */
@ -208,13 +211,13 @@ body.dark footer a:hover {
/* 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);
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);
}
body.dark .dark-mode-toggle:hover {
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.5);
box-shadow: 0 8px 30px rgba(59, 130, 246, 0.6), inset 0 0 15px rgba(96, 165, 250, 0.3);
}
/* ===========================

13
js/script.js
View file

@ -9,7 +9,8 @@ document.addEventListener('DOMContentLoaded', function() {
const icon = darkModeToggle.querySelector('.dark-mode-icon');
// Restore dark mode preference from localStorage
if (localStorage.getItem('darkMode') === 'true') {
const isDarkMode = localStorage.getItem('darkMode') === 'true';
if (isDarkMode) {
document.body.classList.add('dark');
icon.textContent = '☀️';
} else {
@ -17,12 +18,18 @@ document.addEventListener('DOMContentLoaded', function() {
}
// Toggle dark mode on button click
darkModeToggle.addEventListener('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);
localStorage.setItem('darkMode', isDark ? 'true' : 'false');
icon.textContent = isDark ? '☀️' : '🌙';
});
console.log('✅ Dark Mode Toggle initialisiert');
} else {
console.warn('⚠️ Dark Mode Toggle Button nicht gefunden');
}
// ===========================