You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
WF-Website/public/script/theme-toggle.js

52 lines
2.5 KiB

// Quand le document est prêt
document.addEventListener("DOMContentLoaded", function() {
const themeIcon = document.getElementById('theme-icon');
const favicon = document.getElementById('favicon'); // Sélectionne la favicon
// Vérifie si les éléments existent bien avant d'y accéder
if (themeIcon && favicon) {
const currentTheme = localStorage.getItem('theme') || 'dark'; // Par défaut, sombre
// Applique le bon thème au chargement de la page
if (currentTheme === 'light') {
document.body.classList.remove('dark-mode');
document.body.classList.add('light-mode');
themeIcon.src = '../../images/light.svg'; // Affiche l'icône pour basculer vers le mode sombre
favicon.href = '../../images/iconeClaire.ico'; // Favicon pour le mode clair
} else {
document.body.classList.add('dark-mode');
themeIcon.src = '../../images/dark.svg'; // Affiche l'icône pour basculer vers le mode clair
favicon.href = '../../images/iconeSombre.ico'; // Favicon pour le mode sombre
}
} else {
console.error("Élément(s) manquant(s) : icône du thème ou favicon.");
}
});
// Fonction pour basculer entre les thèmes
function toggleTheme() {
const body = document.body;
const themeIcon = document.getElementById('theme-icon');
const favicon = document.getElementById('favicon'); // Sélectionne la favicon
if (themeIcon && favicon) {
if (body.classList.contains('dark-mode')) {
// Si on est en mode sombre, on passe en mode clair
body.classList.remove('dark-mode');
body.classList.add('light-mode');
themeIcon.src = '../../images/light.svg'; // Change vers le logo sombre
favicon.href = '../../images/iconeClaire.ico'; // Favicon pour le mode clair
localStorage.setItem('theme', 'light'); // Enregistre le thème clair dans localStorage
} else {
// Sinon, on repasse en mode sombre
body.classList.remove('light-mode');
body.classList.add('dark-mode');
themeIcon.src = '../../images/dark.svg'; // Change vers le logo clair
favicon.href = '../../images/iconeSombre.ico'; // Favicon pour le mode sombre
localStorage.setItem('theme', 'dark'); // Enregistre le thème sombre dans localStorage
}
} else {
console.error("Impossible de trouver l'icône ou le favicon.");
}
}