diff --git a/images/Logo.ico b/images/.nfs0000000000f53c8600000084 similarity index 100% rename from images/Logo.ico rename to images/.nfs0000000000f53c8600000084 diff --git a/images/iconeClaire.ico b/images/iconeClaire.ico new file mode 100644 index 0000000..87a6e54 Binary files /dev/null and b/images/iconeClaire.ico differ diff --git a/images/iconeSombre.ico b/images/iconeSombre.ico new file mode 100644 index 0000000..5710f06 Binary files /dev/null and b/images/iconeSombre.ico differ diff --git a/images/light.svg b/images/light.svg new file mode 100644 index 0000000..ad790ed --- /dev/null +++ b/images/light.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/index.html b/index.html index 4ec7b91..0b59d58 100644 --- a/index.html +++ b/index.html @@ -4,19 +4,20 @@ Wiki Fantasy - + +
-
+
coeur - dark + toggle theme quizz
user @@ -25,4 +26,4 @@

Wiki Fantasy

- \ No newline at end of file + diff --git a/pages/accueil.html b/pages/accueil.html index 252559f..3b55c8d 100644 --- a/pages/accueil.html +++ b/pages/accueil.html @@ -4,19 +4,20 @@ Wiki Fantasy - + +
-
+
coeur - dark + toggle theme quizz
user @@ -25,4 +26,4 @@

Wiki Fantasy

- \ No newline at end of file + diff --git a/script/theme-toggle.js b/script/theme-toggle.js new file mode 100644 index 0000000..a4cff2f --- /dev/null +++ b/script/theme-toggle.js @@ -0,0 +1,41 @@ +// Quand le document est prêt +document.addEventListener("DOMContentLoaded", function() { + const currentTheme = localStorage.getItem('theme') || 'dark'; // Par défaut, sombre + const themeIcon = document.getElementById('theme-icon'); + const favicon = document.getElementById('favicon'); // Sélectionne la favicon + + // 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 + } +}); + +// 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 (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 + } +} diff --git a/styles/style.css b/styles/style.css index 1e645fe..9396732 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,7 +1,8 @@ -*{ - margin: 0; - padding: 0; - box-sizing: border-box; +/* Styles généraux */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; } body{ @@ -9,43 +10,76 @@ body{ font-family: "Lemon", serif; } -.header{ - display: flex; - position: fixed; - background-color: #000000; - right: 0; - top: 0; - width: 100%; - text-align: center; - padding: 20px; +/* Header */ +.header { + display: flex; + position: fixed; + background-color: #000000; + right: 0; + top: 0; + width: 100%; + text-align: center; + padding: 20px; } -.nav{ - display: flex; - align-items: center; - vertical-align: center; - gap: 30px; - width: 40%; +.nav { + display: flex; + align-items: center; + vertical-align: center; + gap: 30px; + width: 40%; } -.nav img:hover{ - filter: invert(59%) sepia(96%) saturate(6733%) hue-rotate(275deg) brightness(112%) contrast(122%) ; +.logo { + display: flex; + align-items: center; + justify-content: center; + width: 20%; } +.user { + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; + vertical-align: center; + gap: 30px; + width: 40%; +} + +/* Mode sombre */ +body.dark-mode { + background-color: #120B1D; + color: #ffffff; +} + +body.dark-mode .header { + background-color: #000; +} + +body.dark-mode img { + filter: invert(0%); +} + +body.dark-mode .nav img:hover { + filter: invert(59%) sepia(96%) saturate(6733%) hue-rotate(275deg) brightness(112%) contrast(122%); +} + + +/* Mode clair */ +body.light-mode { + background-color: #ffffff; + color: #000000; +} + +body.light-mode .header { + background-color: #F7F7EB; +} -.logo{ - display: flex; - align-items: center; - justify-content: center; - width: 20%; +body.light-mode img { + filter: invert(100%); } -.user{ - display: flex; - flex-direction: row; - justify-content: flex-end; - align-items: center; - vertical-align: center; - gap: 30px; - width: 40%; +body.light-mode .nav img:hover { + filter: invert(22%) sepia(6%) saturate(2269%) hue-rotate(193deg) brightness(98%) contrast(106%); } \ No newline at end of file