parent
f0c0fc7ac7
commit
bf3cebb5c8
@ -0,0 +1,51 @@
|
|||||||
|
// 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.");
|
||||||
|
}
|
||||||
|
}
|
@ -1,14 +1,14 @@
|
|||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="nav">
|
<div class="nav">
|
||||||
<a href="{{ racine }}/favorite"><img src="images/coeur.svg" alt="coeur" width="67px" height="67px" onmousedown="return false"></a>
|
<a href="{{ racine }}/favorite"><img src="{{ racine }}/images/coeur.svg" alt="coeur" width="67px" height="67px" onmousedown="return false"></a>
|
||||||
<img id="theme-icon" src="images/dark.svg" alt="toggle theme" width="72px" height="37px" onmousedown="return false" onclick="toggleTheme()">
|
<img id="theme-icon" src="{{ racine }}/images/dark.svg" alt="toggle theme" width="72px" height="37px" onmousedown="return false" onclick="toggleTheme()">
|
||||||
<a href="{{ racine }}/quiz"><img src="images/quizz.svg" alt="quizz" width="51px" height="82px" onmousedown="return false"></a>
|
<a href="{{ racine }}/quiz"><img src="{{ racine }}/images/quizz.svg" alt="quizz" width="51px" height="82px" onmousedown="return false"></a>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="logo">
|
<div class="logo">
|
||||||
<a href="{{ racine }}/"><img src="images/WIKIFANTASY.png" alt="Logo" width="227px" height="106px" onmousedown="return false"></a>
|
<a href="{{ racine }}/"><img src="{{ racine }}/images/WIKIFANTASY.png" alt="Logo" width="227px" height="106px" onmousedown="return false"></a>
|
||||||
</div>
|
</div>
|
||||||
<div class="user">
|
<div class="user">
|
||||||
<a href="{{ racine }}/login"><img src="images/user_dark.png" alt="user" width="70px" height="70px" onmousedown="return false"></a>
|
<a href="{{ racine }}/login"><img src="{{ racine }}/images/user_dark.png" alt="user" width="70px" height="70px" onmousedown="return false"></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
Loading…
Reference in new issue