feat: add theme switching

src/assets/js/main.js

@@ -1,3 +1,74 @@
+// Theme Management
+(function() {
+    const themeToggle = document.getElementById('theme-toggle');
+
+    // Fonction pour obtenir le thème actuel
+    function getCurrentTheme() {
+        return document.documentElement.classList.contains('light-theme') ? 'light' : 'dark';
+    }
+
+    // Fonction pour changer de thème
+    function toggleTheme() {
+        const currentTheme = getCurrentTheme();
+        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+
+        if (newTheme === 'light') {
+            document.documentElement.classList.add('light-theme');
+        } else {
+            document.documentElement.classList.remove('light-theme');
+        }
+
+        // Sauvegarder la préférence
+        localStorage.setItem('oki-theme', newTheme);
+
+        // Mettre à jour le menu mobile si ouvert
+        const navLinks = document.querySelector('.nav-links');
+        if (navLinks && navLinks.style.display === 'flex') {
+            const background = newTheme === 'light' ? 'rgba(255, 248, 231, 0.98)' : 'rgba(0, 0, 0, 0.98)';
+            navLinks.style.background = background;
+        }
+
+        // Mettre à jour les styles de la nav en fonction du scroll actuel
+        const nav = document.querySelector('nav');
+        const currentScroll = window.pageYOffset;
+        const isLightTheme = newTheme === 'light';
+
+        if (currentScroll > 100) {
+            if (isLightTheme) {
+                nav.style.background = 'rgba(255, 248, 231, 0.98)';
+                nav.style.boxShadow = '0 2px 20px rgba(184, 122, 0, 0.3)';
+            } else {
+                nav.style.background = 'rgba(0, 0, 0, 0.98)';
+                nav.style.boxShadow = '0 2px 20px rgba(232, 166, 37, 0.3)';
+            }
+        } else {
+            if (isLightTheme) {
+                nav.style.background = 'rgba(255, 248, 231, 0.95)';
+                nav.style.boxShadow = '';
+            } else {
+                nav.style.background = 'rgba(0, 0, 0, 0.95)';
+                nav.style.boxShadow = '';
+            }
+        }
+    }
+
+    // Écouter le changement de thème système
+    const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    darkModeMediaQuery.addEventListener('change', (e) => {
+        // Ne changer automatiquement que si l'utilisateur n'a pas de préférence stockée
+        if (!localStorage.getItem('oki-theme')) {
+            if (e.matches) {
+                document.documentElement.classList.remove('light-theme');
+            } else {
+                document.documentElement.classList.add('light-theme');
+            }
+        }
+    });
+
+    // Ajouter l'événement au bouton
+    themeToggle?.addEventListener('click', toggleTheme);
+})();
+
 // Smooth scrolling
 document.querySelectorAll('a[href^="#"]').forEach(anchor => {
     anchor.addEventListener('click', function (e) {
@@ -20,12 +91,16 @@ let menuOpen = false;
 menuToggle?.addEventListener('click', () => {
     menuOpen = !menuOpen;
     if (menuOpen) {
+        // Déterminer le fond selon le thème actuel
+        const isLightTheme = document.documentElement.classList.contains('light-theme');
+        const background = isLightTheme ? 'rgba(255, 248, 231, 0.98)' : 'rgba(0, 0, 0, 0.98)';
+
         navLinks.style.display = 'flex';
         navLinks.style.position = 'absolute';
         navLinks.style.top = '100%';
         navLinks.style.left = '0';
         navLinks.style.right = '0';
-        navLinks.style.background = 'rgba(0, 0, 0, 0.98)';
+        navLinks.style.background = background;
         navLinks.style.flexDirection = 'column';
         navLinks.style.padding = '1rem';
         navLinks.style.borderTop = '2px solid #E8A625';
@@ -82,13 +157,24 @@ const nav = document.querySelector('nav');
 
 window.addEventListener('scroll', () => {
     const currentScroll = window.pageYOffset;
+    const isLightTheme = document.documentElement.classList.contains('light-theme');
 
     if (currentScroll > 100) {
-        nav.style.background = 'rgba(0, 0, 0, 0.98)';
-        nav.style.boxShadow = '0 2px 20px rgba(232, 166, 37, 0.3)';
+        if (isLightTheme) {
+            nav.style.background = 'rgba(255, 248, 231, 0.98)';
+            nav.style.boxShadow = '0 2px 20px rgba(184, 122, 0, 0.3)';
+        } else {
+            nav.style.background = 'rgba(0, 0, 0, 0.98)';
+            nav.style.boxShadow = '0 2px 20px rgba(232, 166, 37, 0.3)';
+        }
     } else {
-        nav.style.background = 'rgba(0, 0, 0, 0.95)';
-        nav.style.boxShadow = '';
+        if (isLightTheme) {
+            nav.style.background = 'rgba(255, 248, 231, 0.95)';
+            nav.style.boxShadow = '';
+        } else {
+            nav.style.background = 'rgba(0, 0, 0, 0.95)';
+            nav.style.boxShadow = '';
+        }
     }
 
     // Hide/show navbar on scroll