thème sombre

public/asset/script/script.js

@@ -1,11 +1,26 @@
 document.addEventListener("DOMContentLoaded", () => {
     const menuToggle = document.getElementById("menu-toggle");
     const navbar = document.getElementById("navbar");
+    const themeToggle = document.getElementById("theme-toggle");
+    const body = document.body;
 
-    // Ouvre et ferme le menu burger
+    // Menu burger
     menuToggle.addEventListener("click", () => {
         navbar.classList.toggle("active");
         const isExpanded = navbar.classList.contains("active");
         menuToggle.setAttribute("aria-expanded", isExpanded.toString());
     });
+
+    // Appliquer le thème sauvegardé
+    const savedTheme = localStorage.getItem("theme") || "light";
+    body.classList.add(`${savedTheme}-theme`);
+    themeToggle.checked = savedTheme === "dark";
+
+    // Toggle de thème
+    themeToggle.addEventListener("change", () => {
+        const isDark = themeToggle.checked;
+        body.classList.toggle("dark-theme", isDark);
+        body.classList.toggle("light-theme", !isDark);
+        localStorage.setItem("theme", isDark ? "dark" : "light");
+    });
 });

public/asset/style/style.css

@@ -7,10 +7,37 @@
     box-sizing: border-box;
 }
 
+:root {
+    --bg-color: #f9fafb;
+    --text-color: #333;
+    --header-bg: #2c3e50;
+    --link-color: #ecf0f1;
+    --link-hover: #1abc9c;
+    --footer-bg: #2c3e50;
+}
+
+body.light-theme {
+    --bg-color: #f9fafb;
+    --text-color: #333;
+    --header-bg: #2c3e50;
+    --link-color: #ecf0f1;
+    --link-hover: #1abc9c;
+    --footer-bg: #2c3e50;
+}
+
+body.dark-theme {
+    --bg-color: #1e1e1e;
+    --text-color: #f5f5f5;
+    --header-bg: #121212;
+    --link-color: #ddd;
+    --link-hover: #1abc9c;
+    --footer-bg: #121212;
+}
+
 body {
     font-family: 'Poppins', sans-serif;
-    background-color: #f9fafb;
-    color: #333;
+    background-color: var(--bg-color);
+    color: var(--text-color);
     display: flex;
     flex-direction: column;
     min-height: 100vh;
@@ -19,8 +46,8 @@ body {
 
 /* Header */
 header {
-    background-color: #2c3e50;
-    color: #fff;
+    background-color: var(--header-bg);
+    color: var(--link-color);
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -37,16 +64,6 @@ header {
     font-weight: 600;
 }
 
-/* Menu burger */
-#menu-toggle {
-    display: none;
-    font-size: 2rem;
-    background: none;
-    border: none;
-    color: #fff;
-    cursor: pointer;
-}
-
 /* Navbar */
 #navbar {
     display: flex;
@@ -60,22 +77,32 @@ header {
 }
 
 #navbar a {
-    color: #ecf0f1;
+    color: var(--link-color);
     text-decoration: none;
     font-weight: 500;
     transition: color 0.3s;
 }
 
 #navbar a:hover {
-    color: #1abc9c;
+    color: var(--link-hover);
 }
 
 #navbar ul li a.active {
-    border-bottom: 2px solid #1abc9c;
+    border-bottom: 2px solid var(--link-hover);
 }
 
-/* Section principale */
-section {
+/* Menu burger */
+#menu-toggle {
+    display: none;
+    font-size: 2rem;
+    background: none;
+    border: none;
+    color: var(--link-color);
+    cursor: pointer;
+}
+
+/* Main section */
+main {
     padding: 3rem 2rem;
     text-align: center;
     flex-grow: 1;
@@ -85,12 +112,66 @@ section {
 footer {
     text-align: center;
     padding: 1.5rem 2rem;
-    background-color: #2c3e50;
-    color: #fff;
+    background-color: var(--footer-bg);
+    color: var(--link-color);
     font-size: 0.9rem;
     margin-top: auto;
 }
 
+/* Theme switcher */
+.theme-switch-wrapper {
+    display: flex;
+    align-items: center;
+}
+
+.theme-switch {
+    position: relative;
+    display: inline-block;
+    width: 50px;
+    height: 26px;
+    margin-left: 1rem;
+}
+
+.theme-switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background-color: #ccc;
+    transition: 0.4s;
+    border-radius: 34px;
+}
+
+.slider:before {
+    position: absolute;
+    content: "☀️";
+    height: 20px;
+    width: 20px;
+    left: 3px;
+    bottom: 3px;
+    background-color: white;
+    transition: 0.4s;
+    border-radius: 50%;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+input:checked + .slider {
+    background-color: #1abc9c;
+}
+
+input:checked + .slider:before {
+    transform: translateX(24px);
+    content: "🌙";
+}
+
 /* Responsive */
 @media (max-width: 980px) {
     #menu-toggle {
@@ -102,7 +183,7 @@ footer {
         position: absolute;
         top: 70px;
         right: 20px;
-        background-color: #34495e;
+        background-color: var(--header-bg);
         padding: 1.5rem;
         flex-direction: column;
         border-radius: 8px;

template/about/index.html

@@ -11,6 +11,12 @@
             <li><a href="http://localhost/portfolio/experience/">Expériences</a></li>
             <li><a href="http://localhost/portfolio/tech">Veilles technologiques</a></li>
             <li><a href="http://localhost/portfolio/contact/">Contacts</a></li>
+            <li class="theme-switch-wrapper">
+                <label class="theme-switch">
+                    <input type="checkbox" id="theme-toggle">
+                    <span class="slider"></span>
+                </label>
+            </li>
         </ul>
     </nav>
 </header>

template/base.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Mon Portfolio</title>
-    <link rel="stylesheet" href="http://localhost/portfolio/public/asset/style/style.css">
+    <link rel="stylesheet" href="http://localhost/portfolio/public/asset/style/style.css?v={{ time() }}">
 </head>
 <body>
 

template/contact/index.html

@@ -11,6 +11,12 @@
             <li><a href="http://localhost/portfolio/experience/">Expériences</a></li>
             <li><a href="http://localhost/portfolio/tech">Veilles technologiques</a></li>
             <li><a href="http://localhost/portfolio/contact/" class="active">Contacts</a></li>
+            <li class="theme-switch-wrapper">
+                <label class="theme-switch">
+                    <input type="checkbox" id="theme-toggle">
+                    <span class="slider"></span>
+                </label>
+            </li>
         </ul>
     </nav>
 </header>

template/experience/index.html

@@ -11,6 +11,12 @@
             <li><a href="http://localhost/portfolio/experience/" class="active">Expériences</a></li>
             <li><a href="http://localhost/portfolio/tech">Veilles technologiques</a></li>
             <li><a href="http://localhost/portfolio/contact/">Contacts</a></li>
+            <li class="theme-switch-wrapper">
+                <label class="theme-switch">
+                    <input type="checkbox" id="theme-toggle">
+                    <span class="slider"></span>
+                </label>
+            </li>
         </ul>
     </nav>
 </header>

template/home/index.html

@@ -11,6 +11,12 @@
             <li><a href="http://localhost/portfolio/experience/">Expériences</a></li>
             <li><a href="http://localhost/portfolio/tech/">Veilles technologiques</a></li>
             <li><a href="http://localhost/portfolio/contact/">Contacts</a></li>
+            <li class="theme-switch-wrapper">
+                <label class="theme-switch">
+                    <input type="checkbox" id="theme-toggle">
+                    <span class="slider"></span>
+                </label>
+            </li>
         </ul>
     </nav>
 </header>

template/project/index.html

@@ -11,6 +11,12 @@
             <li><a href="http://localhost/portfolio/experience/">Expériences</a></li>
             <li><a href="http://localhost/portfolio/tech/">Veilles technologiques</a></li>
             <li><a href="http://localhost/portfolio/contact/">Contacts</a></li>
+            <li class="theme-switch-wrapper">
+                <label class="theme-switch">
+                    <input type="checkbox" id="theme-toggle">
+                    <span class="slider"></span>
+                </label>
+            </li>
         </ul>
     </nav>
 </header>

template/tech/index.html

@@ -11,6 +11,12 @@
             <li><a href="http://localhost/portfolio/experience/">Expériences</a></li>
             <li><a href="http://localhost/portfolio/tech" class="active">Veilles technologiques</a></li>
             <li><a href="http://localhost/portfolio/contact/">Contacts</a></li>
+            <li class="theme-switch-wrapper">
+                <label class="theme-switch">
+                    <input type="checkbox" id="theme-toggle">
+                    <span class="slider"></span>
+                </label>
+            </li>
         </ul>
     </nav>
 </header>