65 lines
2.2 KiB
JavaScript
65 lines
2.2 KiB
JavaScript
// Theme handling
|
|
function initTheme() {
|
|
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
const savedTheme = localStorage.getItem('theme');
|
|
|
|
if (savedTheme) {
|
|
document.documentElement.setAttribute('data-theme', savedTheme);
|
|
updateThemeIcon(savedTheme);
|
|
} else if (prefersDark) {
|
|
document.documentElement.setAttribute('data-theme', 'dark');
|
|
updateThemeIcon('dark');
|
|
}
|
|
}
|
|
|
|
function toggleTheme() {
|
|
const currentTheme = document.documentElement.getAttribute('data-theme');
|
|
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
|
|
|
document.documentElement.setAttribute('data-theme', newTheme);
|
|
localStorage.setItem('theme', newTheme);
|
|
updateThemeIcon(newTheme);
|
|
}
|
|
|
|
function updateThemeIcon(theme) {
|
|
const themeIcon = document.querySelector('.theme-toggle i');
|
|
if (themeIcon) {
|
|
themeIcon.className = theme === 'dark'
|
|
? 'fas fa-sun'
|
|
: 'fas fa-moon';
|
|
}
|
|
}
|
|
|
|
// Mobile menu handling
|
|
function toggleMobileMenu() {
|
|
const navMenu = document.querySelector('.nav-menu');
|
|
navMenu.classList.toggle('active');
|
|
|
|
const menuIcon = document.querySelector('.mobile-menu-toggle i');
|
|
menuIcon.className = navMenu.classList.contains('active')
|
|
? 'fas fa-times'
|
|
: 'fas fa-bars';
|
|
}
|
|
|
|
// Initialize on load
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
initTheme();
|
|
|
|
// Add click handlers
|
|
document.querySelector('.theme-toggle')?.addEventListener('click', toggleTheme);
|
|
document.querySelector('.mobile-menu-toggle')?.addEventListener('click', toggleMobileMenu);
|
|
|
|
// Close mobile menu when clicking outside
|
|
document.addEventListener('click', (e) => {
|
|
const navMenu = document.querySelector('.nav-menu');
|
|
const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
|
|
|
|
if (navMenu?.classList.contains('active') &&
|
|
!e.target.closest('.nav-menu') &&
|
|
!e.target.closest('.mobile-menu-toggle')) {
|
|
navMenu.classList.remove('active');
|
|
mobileMenuToggle.querySelector('i').className = 'fas fa-bars';
|
|
}
|
|
});
|
|
});
|