99 lines
3.4 KiB
JavaScript
99 lines
3.4 KiB
JavaScript
// Mobile menu toggle
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
console.log("DOM loaded - initializing dark mode");
|
|
|
|
const menuButton = document.querySelector('[aria-controls="mobile-menu"]');
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
const menuIcons = menuButton.querySelectorAll('svg');
|
|
|
|
if (menuButton && mobileMenu) {
|
|
menuButton.addEventListener('click', function() {
|
|
const expanded = menuButton.getAttribute('aria-expanded') === 'true';
|
|
|
|
// Toggle aria-expanded
|
|
menuButton.setAttribute('aria-expanded', !expanded);
|
|
|
|
// Toggle menu visibility
|
|
mobileMenu.classList.toggle('hidden');
|
|
|
|
// Toggle icons
|
|
menuIcons.forEach(icon => {
|
|
icon.classList.toggle('hidden');
|
|
});
|
|
});
|
|
}
|
|
|
|
// Theme toggle functionality
|
|
const themeToggleBtn = document.getElementById('theme-toggle');
|
|
const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
|
|
const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
|
|
const mobileThemeToggleBtn = document.getElementById('mobile-theme-toggle');
|
|
|
|
// Check if dark mode is already enabled
|
|
const isDarkMode = localStorage.getItem('color-theme') === 'dark' ||
|
|
(!localStorage.getItem('color-theme') && window.matchMedia('(prefers-color-scheme: dark)').matches);
|
|
|
|
console.log("Initial dark mode state:", isDarkMode);
|
|
|
|
// Set initial theme
|
|
if (isDarkMode) {
|
|
document.documentElement.classList.add('dark');
|
|
if (themeToggleLightIcon && themeToggleDarkIcon) {
|
|
themeToggleLightIcon.classList.remove('hidden');
|
|
themeToggleDarkIcon.classList.add('hidden');
|
|
}
|
|
} else {
|
|
document.documentElement.classList.remove('dark');
|
|
if (themeToggleLightIcon && themeToggleDarkIcon) {
|
|
themeToggleLightIcon.classList.add('hidden');
|
|
themeToggleDarkIcon.classList.remove('hidden');
|
|
}
|
|
}
|
|
|
|
// Toggle theme function
|
|
function toggleTheme() {
|
|
console.log("Toggle theme clicked");
|
|
|
|
// Add transition class
|
|
document.documentElement.classList.add('transition');
|
|
|
|
// Toggle theme
|
|
const isDark = document.documentElement.classList.contains('dark');
|
|
console.log("Current dark mode:", isDark);
|
|
|
|
if (isDark) {
|
|
document.documentElement.classList.remove('dark');
|
|
localStorage.setItem('color-theme', 'light');
|
|
if (themeToggleLightIcon && themeToggleDarkIcon) {
|
|
themeToggleLightIcon.classList.add('hidden');
|
|
themeToggleDarkIcon.classList.remove('hidden');
|
|
}
|
|
console.log("Switched to light mode");
|
|
} else {
|
|
document.documentElement.classList.add('dark');
|
|
localStorage.setItem('color-theme', 'dark');
|
|
if (themeToggleLightIcon && themeToggleDarkIcon) {
|
|
themeToggleLightIcon.classList.remove('hidden');
|
|
themeToggleDarkIcon.classList.add('hidden');
|
|
}
|
|
console.log("Switched to dark mode");
|
|
}
|
|
|
|
// Remove transition class after transition completes
|
|
setTimeout(() => {
|
|
document.documentElement.classList.remove('transition');
|
|
}, 300);
|
|
}
|
|
|
|
// Add event listeners to toggle buttons
|
|
if (themeToggleBtn) {
|
|
console.log("Adding event listener to theme toggle button");
|
|
themeToggleBtn.addEventListener('click', toggleTheme);
|
|
}
|
|
|
|
if (mobileThemeToggleBtn) {
|
|
console.log("Adding event listener to mobile theme toggle button");
|
|
mobileThemeToggleBtn.addEventListener('click', toggleTheme);
|
|
}
|
|
});
|