From 28173f6e44d369faa3644c5eb9894eda1a6e28bd Mon Sep 17 00:00:00 2001
From: Florian Trayon <26360935+FlorianLeChat@users.noreply.github.com>
Date: Sat, 23 Nov 2024 21:07:40 +0100
Subject: [PATCH] Fixed dark theme for server-side cookie consent using user
 preferences

---
 .eslintrc.json          | 2 +-
 app/[locale]/layout.tsx | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index fab0282..80af882 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -47,7 +47,7 @@
 
 		"jsx-a11y/html-has-lang": "off", // Layout avec Google Fonts
 
-		"tailwindcss/no-custom-classname": ["warn", { "whitelist": ["toaster"] }], // https://sonner.emilkowal.ski/ + https://ui.shadcn.com/docs/components/sonner
+		"tailwindcss/no-custom-classname": ["warn", { "whitelist": ["toaster", "cc--darkmode"] }], // https://sonner.emilkowal.ski/ + https://ui.shadcn.com/docs/components/sonner
 
 		"@typescript-eslint/no-shadow": "error",
 
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
index 0604f27..b67d160 100644
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -240,6 +240,7 @@ export default async function Layout( {
 	const theme = session?.user.preferences?.theme ?? "light";
 	const color = session?.user.preferences?.color ?? "blue";
 	const factory = session?.user.preferences?.default ?? true;
+	const isDarkMode = theme === "dark";
 
 	// Affichage du rendu HTML de la page.
 	return (
@@ -253,7 +254,7 @@ export default async function Layout( {
 					"--roboto-font": roboto.style.fontFamily
 				} as CSSProperties
 			}
-			className={`${ font } ${ color } ${ factory ? theme : "light" } antialiased`}
+			className={`${ font } ${ color } ${ factory ? theme : "light" } antialiased ${ isDarkMode ? "cc--darkmode" : "" }`}
 			suppressHydrationWarning
 		>
 			{/* En-tête de la page */}
@@ -270,6 +271,10 @@ export default async function Layout( {
 								element.classList.remove("light", "dark");
 								element.classList.add(target);
 								element.style.colorScheme = target;
+
+								if (target === "dark") {
+									element.classList.add("cc--darkmode");
+								}
 							`
 						}}
 					/>