From 24b63d4e9ba09e1335aac7453cbb59222e87e75d Mon Sep 17 00:00:00 2001
From: Jalil Arfaoui <jalil@arfaoui.net>
Date: Tue, 17 Feb 2026 01:08:43 +0100
Subject: [PATCH] =?UTF-8?q?Correction=20dark=20mode=20:=20unification=20su?=
 =?UTF-8?q?r=20la=20cl=C3=A9=20localStorage=20'theme'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Le script anti-flicker lisait 'dark_mode' alors que le toggle (DarkModeToggle.astro) écrivait dans 'theme', rendant la persistance du dark mode inopérante. Suppression du code dark mode mort dans main.js (showDay/showNight, listener #darkToggle, window.darkMode) qui référençait des éléments HTML supprimés du header.
---
 src/assets/js/main.js  | 89 ------------------------------------------
 src/layouts/main.astro |  5 +--
 2 files changed, 1 insertion(+), 93 deletions(-)

diff --git a/src/assets/js/main.js b/src/assets/js/main.js
index 03eaaf2..7b0b75c 100644
--- a/src/assets/js/main.js
+++ b/src/assets/js/main.js
@@ -1,7 +1,3 @@
-// Add your javascript here
-
-window.darkMode = false;
-
 const stickyClasses = ["fixed", "h-14"];
 const unstickyClasses = ["absolute", "h-20"];
 const stickyClassesContainer = [
@@ -17,32 +13,12 @@ let headerElement = null;
 document.addEventListener("DOMContentLoaded", () => {
 	headerElement = document.getElementById("header");
 
-	if (
-		localStorage.getItem("dark_mode") &&
-		localStorage.getItem("dark_mode") === "true"
-	) {
-		window.darkMode = true;
-		showNight();
-	} else {
-		showDay();
-	}
 	stickyHeaderFuncionality();
 	applyMenuItemClasses();
 	evaluateHeaderPosition();
 	mobileMenuFunctionality();
 });
 
-// window.toggleDarkMode = function(){
-//     document.documentElement.classList.toggle('dark');
-//     if(document.documentElement.classList.contains('dark')){
-//         localStorage.setItem('dark_mode', true);
-//         window.darkMode = true;
-//     } else {
-//         window.darkMode = false;
-//         localStorage.setItem('dark_mode', false);
-//     }
-// }
-
 window.stickyHeaderFuncionality = () => {
 	window.addEventListener("scroll", () => {
 		evaluateHeaderPosition();
@@ -69,70 +45,6 @@ window.evaluateHeaderPosition = () => {
 	}
 };
 
-document.getElementById("darkToggle").addEventListener("click", () => {
-	document.documentElement.classList.add("duration-300");
-
-	if (document.documentElement.classList.contains("dark")) {
-		localStorage.removeItem("dark_mode");
-		showDay(true);
-	} else {
-		localStorage.setItem("dark_mode", true);
-		showNight(true);
-	}
-});
-
-function showDay(animate) {
-	document.getElementById("sun").classList.remove("setting");
-	document.getElementById("moon").classList.remove("rising");
-
-	let timeout = 0;
-
-	if (animate) {
-		timeout = 500;
-
-		document.getElementById("moon").classList.add("setting");
-	}
-
-	setTimeout(() => {
-		document.getElementById("dayText").classList.remove("hidden");
-		document.getElementById("nightText").classList.add("hidden");
-
-		document.getElementById("moon").classList.add("hidden");
-		document.getElementById("sun").classList.remove("hidden");
-
-		if (animate) {
-			document.documentElement.classList.remove("dark");
-			document.getElementById("sun").classList.add("rising");
-		}
-	}, timeout);
-}
-
-function showNight(animate) {
-	document.getElementById("moon").classList.remove("setting");
-	document.getElementById("sun").classList.remove("rising");
-
-	let timeout = 0;
-
-	if (animate) {
-		timeout = 500;
-
-		document.getElementById("sun").classList.add("setting");
-	}
-
-	setTimeout(() => {
-		document.getElementById("nightText").classList.remove("hidden");
-		document.getElementById("dayText").classList.add("hidden");
-
-		document.getElementById("sun").classList.add("hidden");
-		document.getElementById("moon").classList.remove("hidden");
-
-		if (animate) {
-			document.documentElement.classList.add("dark");
-			document.getElementById("moon").classList.add("rising");
-		}
-	}, timeout);
-}
-
 window.applyMenuItemClasses = () => {
 	const menuItems = document.querySelectorAll("#menu a");
 	for (let i = 0; i < menuItems.length; i++) {
@@ -140,7 +52,6 @@ window.applyMenuItemClasses = () => {
 			menuItems[i].classList.add("text-neutral-900", "dark:text-white");
 		}
 	}
-	//:class="{ 'text-neutral-900 dark:text-white': window.location.pathname == '{menu.url}', 'text-neutral-700 dark:text-neutral-400': window.location.pathname != '{menu.url}' }"
 };
 
 function mobileMenuFunctionality() {
diff --git a/src/layouts/main.astro b/src/layouts/main.astro
index 7c9ee3b..e61bef1 100644
--- a/src/layouts/main.astro
+++ b/src/layouts/main.astro
@@ -15,10 +15,7 @@ const { title } = Astro.props;
     <!-- Used to add dark mode right away, adding here prevents any flicker -->
     <script is:inline>
       if (typeof Storage !== 'undefined') {
-        if (
-          localStorage.getItem('dark_mode') &&
-          localStorage.getItem('dark_mode') == 'true'
-        ) {
+        if (localStorage.getItem('theme') === 'dark') {
           document.documentElement.classList.add('dark')
         }
       }