From b0de796c457694656bd31d82d67fde4746d487dc Mon Sep 17 00:00:00 2001
From: T'JAMPENS QUENTIN p2406187 <pyramond69@gmail.com>
Date: Sun, 7 Dec 2025 01:54:32 +0100
Subject: [PATCH] Switch theme btn

---
 src/components/background/background.jsx | 20 ++++++++++++++++----
 src/pages/Profile/ProfilePage.jsx        | 18 +++++++++++++++++-
 src/pages/Profile/ProfilePage.module.css |  8 +++++++-
 3 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/src/components/background/background.jsx b/src/components/background/background.jsx
index 05ba976..96df4b6 100644
--- a/src/components/background/background.jsx
+++ b/src/components/background/background.jsx
@@ -13,9 +13,6 @@ const Background = ({ children, className }) => {
   };
 
   useEffect(() => {
-
-    setTheme(localStorage.getItem("theme") ? localStorage.getItem("theme") : "light");
-
     circlesRef.current.forEach((circle) => {
       if (circle) {
         const { x, y } = getRandomTranslation();
@@ -25,7 +22,22 @@ const Background = ({ children, className }) => {
     });
   }, []);
 
-  return (
+    useEffect(() => {
+        const updateTheme = () => {
+            setTheme(localStorage.getItem("theme") || "light");
+        };
+
+        updateTheme(); // Initial load
+
+        window.addEventListener("theme-changed", updateTheme);
+
+        return () => {
+            window.removeEventListener("theme-changed", updateTheme);
+        };
+    }, []);
+
+
+    return (
     <div className={`${styles.backgroundContainer} ${className || ''} ${theme === "light" ? styles.backgroundLight : styles.backgroundDark}`}>
       <div
         ref={(el) => (circlesRef.current[0] = el)}
diff --git a/src/pages/Profile/ProfilePage.jsx b/src/pages/Profile/ProfilePage.jsx
index 033ea4b..5eeb17e 100644
--- a/src/pages/Profile/ProfilePage.jsx
+++ b/src/pages/Profile/ProfilePage.jsx
@@ -15,6 +15,19 @@ function ProfilePage() {
         logout();
     }
 
+    const switchTheme = () => {
+
+        const currentTheme = localStorage.getItem("theme");
+        let newTheme = currentTheme === "light" ? "dark" : "light";
+
+        if(currentTheme === null) newTheme = "dark";
+
+        localStorage.setItem("theme", newTheme);
+
+        window.dispatchEvent(new Event("theme-changed"));
+    };
+
+
   return (
     <div className={styles.container}>
       <div className={`${styles.profileboard} glassCard`}>
@@ -29,7 +42,10 @@ function ProfilePage() {
           <div className={styles.description}>
             <div className={styles.headerProfile}>
                 <h2> {user.name} {user.lastname} </h2>
-                <Button variant={"danger"} onClick={handleLogout}> Déconnexion </Button>
+                <div className={styles.settingsBtns}>
+                    <Button variant={"default"} onClick={switchTheme}> Changer de thème </Button>
+                    <Button variant={"danger"} onClick={handleLogout}> Déconnexion </Button>
+                </div>
             </div>
             <div className={styles.topDescription}>
               <div className={styles.infoBlock}>
diff --git a/src/pages/Profile/ProfilePage.module.css b/src/pages/Profile/ProfilePage.module.css
index 438156d..6f61f45 100644
--- a/src/pages/Profile/ProfilePage.module.css
+++ b/src/pages/Profile/ProfilePage.module.css
@@ -70,7 +70,13 @@
 }
 .profilePicture{
     width:90%;
-  }
+}
+
+.settingsBtns {
+    display: flex;
+    gap: 5px;
+    justify-content: right;
+}
 
 @media screen and (min-width: 768px) {
   .contentWrapper {