/* === DARK MODE ===
Reihenfolge: ausdrueckliche Auswahl des Nutzers > Systemeinstellung. */
(function() {
const saved = localStorage.getItem('theme');
// Der Inline-Schnipsel im hat das Theme bereits gesetzt – diese
// Entscheidung wird hier nicht überschrieben.
const current = document.documentElement.getAttribute('data-theme');
const system = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
document.documentElement.setAttribute('data-theme', saved || current || system);
// Solange nichts ausgewaehlt wurde, folgt die Oberflaeche dem System.
if (!saved && window.matchMedia) {
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
if (localStorage.getItem('theme')) return;
document.documentElement.setAttribute('data-theme', e.matches ? 'dark' : 'light');
if (typeof updateDarkModeBtn === 'function') updateDarkModeBtn();
});
}
})();
function toggleDarkMode() {
const html = document.documentElement;
const current = html.getAttribute('data-theme') || 'light';
const next = current === 'dark' ? 'light' : 'dark';
html.setAttribute('data-theme', next);
localStorage.setItem('theme', next);
updateDarkModeBtn();
}
function updateDarkModeBtn() {
const btn = document.getElementById('darkModeBtn');
if (!btn) return;
const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
const icon = btn.querySelector('i');
if (icon) {
icon.className = isDark ? 'fas fa-sun' : 'fas fa-moon';
} else {
btn.textContent = isDark ? '☀' : '☾';
}
btn.title = isDark ? 'Light Mode' : 'Dark Mode';
}
document.addEventListener('DOMContentLoaded', updateDarkModeBtn);
/* === TOAST NOTIFICATIONS === */
(function() {
let container = null;
function getContainer() {
if (!container) {
container = document.getElementById('toast-container');
if (!container) {
container = document.createElement('div');
container.id = 'toast-container';
document.body.appendChild(container);
}
}
return container;
}
const icons = {
success: '✓',
error: '✕',
info: 'i',
warning: '!'
};
window.showToast = function(type, title, message, duration) {
duration = duration || 4000;
const c = getContainer();
const el = document.createElement('div');
el.className = 'toast ' + type;
el.innerHTML = `
${icons[type] || 'ℹ'}
${title}
${message ? `
${message}
` : ''}
`;
c.appendChild(el);
requestAnimationFrame(() => {
requestAnimationFrame(() => el.classList.add('show'));
});
setTimeout(() => {
el.classList.remove('show');
setTimeout(() => el.remove(), 350);
}, duration);
return el;
};
})();
/* === MOBILE SIDEBAR === */
function toggleMobileSidebar() {
const sidebar = document.querySelector('.sidebar');
const overlay = document.querySelector('.sidebar-overlay');
if (!sidebar) return;
sidebar.classList.toggle('mobile-open');
if (overlay) overlay.classList.toggle('active');
}
function closeMobileSidebar() {
const sidebar = document.querySelector('.sidebar');
const overlay = document.querySelector('.sidebar-overlay');
if (sidebar) sidebar.classList.remove('mobile-open');
if (overlay) overlay.classList.remove('active');
}
document.addEventListener('DOMContentLoaded', function() {
const overlay = document.querySelector('.sidebar-overlay');
if (overlay) overlay.addEventListener('click', closeMobileSidebar);
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') closeMobileSidebar();
});
});
/* === LANGUAGE SWITCHER === */
function switchLanguage(lang) {
fetch('?set_lang=' + lang, { method: 'GET' }).then(() => location.reload());
}
/* === CLIPBOARD === */
function copyToClipboard(text, successMsg) {
navigator.clipboard.writeText(text).then(() => {
showToast('success', successMsg || 'Kopiert!', '');
}).catch(() => {
const ta = document.createElement('textarea');
ta.value = text;
document.body.appendChild(ta);
ta.select();
document.execCommand('copy');
document.body.removeChild(ta);
showToast('success', successMsg || 'Kopiert!', '');
});
}