feat: add dark mode and switch button

js/main.js

@@ -42,26 +42,78 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     }
     
-    // Gestion du mode sombre
-    const darkModeToggle = document.querySelector('.dark-mode-toggle');
-    const body = document.body;
+    // Gestion du theme (mode clair/sombre)
+    const themeToggle = document.querySelector('#theme-toggle');
+    const html = document.documentElement;
     
-    if (darkModeToggle) {
-        darkModeToggle.addEventListener('click', function() {
-            body.classList.toggle('dark-mode');
-            
-            // Changer l'icône
-            const icon = darkModeToggle.querySelector('i');
-            if (body.classList.contains('dark-mode')) {
-                icon.classList.remove('fa-moon');
-                icon.classList.add('fa-sun');
-            } else {
+    // Charger le thème sauvegardé ou détecter la préférence système
+    function initTheme() {
+        const savedTheme = localStorage.getItem('theme');
+        const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        
+        let currentTheme = savedTheme;
+        if (!savedTheme) {
+            currentTheme = systemPrefersDark ? 'dark' : 'light';
+        }
+        
+        applyTheme(currentTheme);
+        updateThemeIcon(currentTheme);
+    }
+    
+    // Appliquer le thème
+    function applyTheme(theme) {
+        if (theme === 'dark') {
+            html.setAttribute('data-theme', 'dark');
+        } else {
+            html.removeAttribute('data-theme');
+        }
+    }
+    
+    // Mettre à jour l'icône du bouton
+    function updateThemeIcon(theme) {
+        if (themeToggle) {
+            const icon = themeToggle.querySelector('i');
+            if (theme === 'dark') {
                 icon.classList.remove('fa-sun');
                 icon.classList.add('fa-moon');
+                themeToggle.setAttribute('aria-label', 'Basculer vers le mode clair');
+                themeToggle.setAttribute('title', 'Mode clair');
+            } else {
+                icon.classList.remove('fa-moon');
+                icon.classList.add('fa-sun');
+                themeToggle.setAttribute('aria-label', 'Basculer vers le mode sombre');
+                themeToggle.setAttribute('title', 'Mode sombre');
             }
-        });
+        }
     }
     
+    // Basculer le thème
+    function toggleTheme() {
+        const currentTheme = html.getAttribute('data-theme');
+        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+        
+        applyTheme(newTheme);
+        updateThemeIcon(newTheme);
+        localStorage.setItem('theme', newTheme);
+    }
+    
+    // Event listener pour le bouton
+    if (themeToggle) {
+        themeToggle.addEventListener('click', toggleTheme);
+    }
+    
+    // Écouter les changements de préférence système
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
+        if (!localStorage.getItem('theme')) {
+            const newTheme = e.matches ? 'dark' : 'light';
+            applyTheme(newTheme);
+            updateThemeIcon(newTheme);
+        }
+    });
+    
+    // Initialiser le thème
+    initTheme();
+    
     // Gestion des carousels
     const carousels = document.querySelectorAll('.carousel');