📝 Commit Details:
This commit is contained in:
194
backend/static/js/dark-mode-fix.js
Normal file
194
backend/static/js/dark-mode-fix.js
Normal file
@@ -0,0 +1,194 @@
|
||||
/**
|
||||
* Dark Mode Toggle Fix - Premium Edition
|
||||
* Diese Datei stellt sicher, dass der neue Premium Dark Mode Toggle Button korrekt funktioniert
|
||||
*/
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Dark Mode Toggle Button (Premium Design)
|
||||
const darkModeToggle = document.getElementById('darkModeToggle');
|
||||
const html = document.documentElement;
|
||||
|
||||
// Local Storage Key
|
||||
const STORAGE_KEY = 'myp-dark-mode';
|
||||
|
||||
/**
|
||||
* Aktuellen Dark Mode Status aus Local Storage oder Systemeinstellung abrufen
|
||||
*/
|
||||
function isDarkMode() {
|
||||
const savedMode = localStorage.getItem(STORAGE_KEY);
|
||||
if (savedMode !== null) {
|
||||
return savedMode === 'true';
|
||||
}
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
}
|
||||
|
||||
/**
|
||||
* Icons im Premium Toggle-Button aktualisieren
|
||||
*/
|
||||
function updateIcons(isDark) {
|
||||
if (!darkModeToggle) return;
|
||||
|
||||
// Finde die Premium-Icons
|
||||
const sunIcon = darkModeToggle.querySelector('.sun-icon');
|
||||
const moonIcon = darkModeToggle.querySelector('.moon-icon');
|
||||
|
||||
if (!sunIcon || !moonIcon) {
|
||||
console.warn('Premium Dark Mode Icons nicht gefunden');
|
||||
return;
|
||||
}
|
||||
|
||||
// Animation für Übergänge
|
||||
if (isDark) {
|
||||
// Dark Mode aktiviert - zeige Mond
|
||||
sunIcon.style.opacity = '0';
|
||||
sunIcon.style.transform = 'scale(0.75) rotate(90deg)';
|
||||
moonIcon.style.opacity = '1';
|
||||
moonIcon.style.transform = 'scale(1) rotate(0deg)';
|
||||
|
||||
// CSS-Klassen für Dark Mode
|
||||
sunIcon.classList.add('opacity-0', 'dark:opacity-0', 'scale-75', 'dark:scale-75', 'rotate-90', 'dark:rotate-90');
|
||||
sunIcon.classList.remove('opacity-100', 'scale-100', 'rotate-0');
|
||||
moonIcon.classList.add('opacity-100', 'dark:opacity-100', 'scale-100', 'dark:scale-100', 'rotate-0', 'dark:rotate-0');
|
||||
moonIcon.classList.remove('opacity-0', 'scale-75', 'rotate-90');
|
||||
} else {
|
||||
// Light Mode aktiviert - zeige Sonne
|
||||
sunIcon.style.opacity = '1';
|
||||
sunIcon.style.transform = 'scale(1) rotate(0deg)';
|
||||
moonIcon.style.opacity = '0';
|
||||
moonIcon.style.transform = 'scale(0.75) rotate(-90deg)';
|
||||
|
||||
// CSS-Klassen für Light Mode
|
||||
sunIcon.classList.add('opacity-100', 'scale-100', 'rotate-0');
|
||||
sunIcon.classList.remove('opacity-0', 'dark:opacity-0', 'scale-75', 'dark:scale-75', 'rotate-90', 'dark:rotate-90');
|
||||
moonIcon.classList.add('opacity-0', 'dark:opacity-100', 'scale-75', 'dark:scale-100', 'rotate-90', 'dark:rotate-0');
|
||||
moonIcon.classList.remove('opacity-100', 'scale-100', 'rotate-0');
|
||||
}
|
||||
|
||||
// Icon-Animationen hinzufügen
|
||||
sunIcon.classList.toggle('icon-enter', !isDark);
|
||||
moonIcon.classList.toggle('icon-enter', isDark);
|
||||
}
|
||||
|
||||
/**
|
||||
* Premium Dark Mode aktivieren/deaktivieren
|
||||
*/
|
||||
function setDarkMode(enable) {
|
||||
console.log(`🎨 Setze Premium Dark Mode auf: ${enable ? 'Aktiviert' : 'Deaktiviert'}`);
|
||||
|
||||
if (enable) {
|
||||
html.classList.add('dark');
|
||||
html.setAttribute('data-theme', 'dark');
|
||||
html.style.colorScheme = 'dark';
|
||||
|
||||
if (darkModeToggle) {
|
||||
darkModeToggle.setAttribute('aria-pressed', 'true');
|
||||
darkModeToggle.setAttribute('title', 'Light Mode aktivieren');
|
||||
// Premium Button-Icons aktualisieren
|
||||
updateIcons(true);
|
||||
}
|
||||
} else {
|
||||
html.classList.remove('dark');
|
||||
html.setAttribute('data-theme', 'light');
|
||||
html.style.colorScheme = 'light';
|
||||
|
||||
if (darkModeToggle) {
|
||||
darkModeToggle.setAttribute('aria-pressed', 'false');
|
||||
darkModeToggle.setAttribute('title', 'Dark Mode aktivieren');
|
||||
// Premium Button-Icons aktualisieren
|
||||
updateIcons(false);
|
||||
}
|
||||
}
|
||||
|
||||
// Einstellung im Local Storage speichern
|
||||
localStorage.setItem(STORAGE_KEY, enable.toString());
|
||||
|
||||
// ThemeColor Meta-Tag aktualisieren
|
||||
const metaThemeColor = document.getElementById('metaThemeColor');
|
||||
if (metaThemeColor) {
|
||||
metaThemeColor.setAttribute('content', enable ? '#000000' : '#ffffff');
|
||||
}
|
||||
|
||||
// Event für andere Komponenten auslösen
|
||||
window.dispatchEvent(new CustomEvent('darkModeChanged', {
|
||||
detail: { isDark: enable }
|
||||
}));
|
||||
|
||||
// Premium-Feedback
|
||||
console.log(`${enable ? '🌙' : '☀️'} Premium Design umgeschaltet auf: ${enable ? 'Dark Mode' : 'Light Mode'}`);
|
||||
}
|
||||
|
||||
// Toggle Dark Mode Funktion
|
||||
function toggleDarkMode() {
|
||||
const currentMode = isDarkMode();
|
||||
setDarkMode(!currentMode);
|
||||
|
||||
// Premium-Animation beim Klick
|
||||
if (darkModeToggle) {
|
||||
const container = darkModeToggle.querySelector('div');
|
||||
if (container) {
|
||||
container.style.transform = 'scale(0.95)';
|
||||
setTimeout(() => {
|
||||
container.style.transform = '';
|
||||
}, 150);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Event Listener für Premium Toggle Button
|
||||
if (darkModeToggle) {
|
||||
console.log('🎨 Premium Dark Mode Toggle Button gefunden - initialisiere...');
|
||||
|
||||
// Entferne vorherige Event-Listener, um Duplikate zu vermeiden
|
||||
const newDarkModeToggle = darkModeToggle.cloneNode(true);
|
||||
darkModeToggle.parentNode.replaceChild(newDarkModeToggle, darkModeToggle);
|
||||
|
||||
// Neuen Event-Listener hinzufügen
|
||||
newDarkModeToggle.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation(); // Verhindere Bubbling
|
||||
toggleDarkMode();
|
||||
});
|
||||
|
||||
// Aktualisiere die Variable auf das neue Element
|
||||
const updatedToggle = document.getElementById('darkModeToggle');
|
||||
|
||||
// Initialen Status setzen
|
||||
const isDark = isDarkMode();
|
||||
setDarkMode(isDark);
|
||||
|
||||
console.log('✨ Premium Dark Mode Toggle Button erfolgreich initialisiert');
|
||||
} else {
|
||||
console.error('❌ Premium Dark Mode Toggle Button konnte nicht gefunden werden!');
|
||||
}
|
||||
|
||||
// Tastaturkürzel: Strg+Shift+D für Dark Mode Toggle
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.ctrlKey && e.shiftKey && e.key === 'D') {
|
||||
toggleDarkMode();
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
// Alternative Tastaturkürzel: Alt+T für Theme Toggle
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.altKey && e.key === 't') {
|
||||
toggleDarkMode();
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
// Direkte Verfügbarkeit der Funktionen im globalen Bereich
|
||||
window.toggleDarkMode = toggleDarkMode;
|
||||
window.isDarkMode = isDarkMode;
|
||||
window.setDarkMode = setDarkMode;
|
||||
|
||||
// Premium Features
|
||||
window.premiumDarkMode = {
|
||||
toggle: toggleDarkMode,
|
||||
isDark: isDarkMode,
|
||||
setMode: setDarkMode,
|
||||
version: '3.0.0-premium'
|
||||
};
|
||||
|
||||
console.log('🎨 Premium Dark Mode System geladen - Version 3.0.0');
|
||||
});
|
Reference in New Issue
Block a user