marwinm/website
3
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: Änderungen commited

Browse Source
This commit is contained in:
Till Tomczak
2025-05-02 19:13:14 +02:00
parent a5396c0d6e
commit 304a399b85
3 changed files with 46 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
templates/base.html
View File

@@ -285,6 +285,7 @@
this.darkMode = !this.darkMode;
this.applyDarkMode();
// Server über Änderung informieren
fetch('/api/set_dark_mode', {
method: 'POST',
headers: {
@@ -295,11 +296,10 @@
.then(response => response.json())
.then(data => {
if (data.success) {
// Event auslösen für andere Komponenten
document.dispatchEvent(new CustomEvent('darkModeToggled', {
detail: { isDark: this.darkMode }
}));
} else {
console.error('Fehler beim Speichern der Dark Mode-Einstellung:', data.error);
}
})
.catch(error => {
@@ -365,13 +365,16 @@
<div class="flex items-center space-x-4">
<!-- Dark/Light Mode Schalter -->
<button
@click="darkMode = !darkMode; toggleDarkMode()"
@click="toggleDarkMode()"
class="theme-toggle relative w-12 h-6 rounded-full bg-gradient-to-r transition-all duration-300 flex items-center"
:class="darkMode ? 'from-purple-700 to-indigo-800' : 'from-purple-400 to-indigo-500'"
aria-label="Dark Mode umschalten"
>
<span class="absolute w-5 h-5 rounded-full bg-white shadow-md transition-transform duration-300"
:class="darkMode ? 'translate-x-7' : 'translate-x-1'"></span>
<span
class="absolute w-5 h-5 rounded-full bg-white shadow-md transform transition-transform duration-300"
:class="darkMode ? 'translate-x-7' : 'translate-x-1'"
></span>
<span class="sr-only">{{ darkMode ? 'Zum Light Mode wechseln' : 'Zum Dark Mode wechseln' }}</span>
</button>
<!-- Profil-Link oder Login -->
{% if current_user.is_authenticated %}
@@ -700,15 +703,34 @@
}
window.MindMap.toggleDarkMode = function() {
const isDark = document.body.classList.contains('dark');
applyDarkModeClasses(!isDark);
const isDark = document.documentElement.classList.contains('dark');
const newIsDark = !isDark;
// DOM aktualisieren
applyDarkModeClasses(newIsDark);
// Alpine.js Status aktualisieren (falls verfügbar)
const appEl = document.querySelector('body');
if (appEl && appEl.__x) {
appEl.__x.$data.darkMode = newIsDark;
}
// Server aktualisieren
fetch('/api/set_dark_mode', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ darkMode: !isDark })
}).catch(console.error);
body: JSON.stringify({ darkMode: newIsDark })
})
.then(response => response.json())
.then(data => {
if (data.success) {
// Event für andere Komponenten auslösen
document.dispatchEvent(new CustomEvent('darkModeToggled', {
detail: { isDark: newIsDark }
}));
}
})
.catch(console.error);
};
// Initialisierung beim Laden