65 lines
2.1 KiB
JavaScript
65 lines
2.1 KiB
JavaScript
function toggleTheme() {
|
|
const html = document.documentElement;
|
|
const currentTheme = html.getAttribute('data-theme');
|
|
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
|
|
const sunIcon = document.querySelector('.sun-icon');
|
|
const moonIcon = document.querySelector('.moon-icon');
|
|
|
|
html.setAttribute('data-theme', newTheme);
|
|
localStorage.setItem('theme', newTheme);
|
|
|
|
// Toggle icon visibility
|
|
if (newTheme === 'dark') {
|
|
sunIcon.style.display = 'none';
|
|
moonIcon.style.display = 'block';
|
|
} else {
|
|
sunIcon.style.display = 'block';
|
|
moonIcon.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
// Initialize theme and icon on load
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const savedTheme = localStorage.getItem('theme') || 'light';
|
|
const sunIcon = document.querySelector('.sun-icon');
|
|
const moonIcon = document.querySelector('.moon-icon');
|
|
|
|
document.documentElement.setAttribute('data-theme', savedTheme);
|
|
|
|
if (savedTheme === 'dark') {
|
|
sunIcon.style.display = 'none';
|
|
moonIcon.style.display = 'block';
|
|
} else {
|
|
sunIcon.style.display = 'block';
|
|
moonIcon.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
|
|
const mobileMenuClose = document.querySelector('.mobile-menu-close');
|
|
const mobileMenu = document.querySelector('.mobile-menu');
|
|
|
|
function closeMenu() {
|
|
mobileMenu.classList.remove('active');
|
|
document.body.style.overflow = '';
|
|
}
|
|
|
|
function openMenu() {
|
|
mobileMenu.classList.add('active');
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
|
|
mobileMenuToggle.addEventListener('click', openMenu);
|
|
mobileMenuClose.addEventListener('click', closeMenu);
|
|
|
|
// Fermer le menu en cliquant en dehors
|
|
document.addEventListener('click', function(e) {
|
|
if (mobileMenu.classList.contains('active') &&
|
|
!mobileMenu.contains(e.target) &&
|
|
!mobileMenuToggle.contains(e.target)) {
|
|
closeMenu();
|
|
}
|
|
});
|
|
});
|