38 lines
1.4 KiB
PHP
38 lines
1.4 KiB
PHP
<script>
|
|
// Theme Toggle Funktionalität
|
|
const themeToggleBtn = document.getElementById('theme-toggle');
|
|
const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
|
|
const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
|
|
const themeToggleText = document.getElementById('theme-toggle-text');
|
|
const html = document.documentElement;
|
|
|
|
// Theme aus localStorage laden oder Standard verwenden
|
|
const savedTheme = localStorage.getItem('theme') || 'dark';
|
|
|
|
function updateThemeUI(theme) {
|
|
if (theme === 'dark') {
|
|
html.classList.add('dark');
|
|
themeToggleLightIcon.classList.remove('hidden');
|
|
themeToggleDarkIcon.classList.add('hidden');
|
|
themeToggleText.textContent = 'Hell';
|
|
} else {
|
|
html.classList.remove('dark');
|
|
themeToggleLightIcon.classList.add('hidden');
|
|
themeToggleDarkIcon.classList.remove('hidden');
|
|
themeToggleText.textContent = 'Dunkel';
|
|
}
|
|
}
|
|
|
|
// Initiales Theme setzen
|
|
updateThemeUI(savedTheme);
|
|
|
|
// Toggle Button Event
|
|
themeToggleBtn.addEventListener('click', () => {
|
|
const currentTheme = html.classList.contains('dark') ? 'dark' : 'light';
|
|
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
|
|
|
localStorage.setItem('theme', newTheme);
|
|
updateThemeUI(newTheme);
|
|
});
|
|
</script>
|
|
|