Merge branch 'features/darkTheme' into 'dev'

Features/darktheme

See merge request sae-but2/2025-26/gestion-benevoles-association/Frontend!28

src/components/background/background.jsx

@@ -1,8 +1,10 @@
 import styles from "./background.module.css";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 
 const Background = ({ children, className }) => {
-  const circlesRef = useRef([]);
+
+    const circlesRef = useRef([]);
+    const [theme, setTheme] = useState("light");
 
   const getRandomTranslation = () => {
     const randomX = Math.floor(Math.random() * 100) - 30; 
@@ -20,8 +22,23 @@ const Background = ({ children, className }) => {
     });
   }, []);
 
-  return (
-    <div className={`${styles["background-container"]} ${className || ''}`}>
+    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)}
         className={`${styles["circle"]} ${styles["circle-1"]}`}

src/components/background/background.module.css

@@ -1,10 +1,9 @@
 /* BACKGROUND ////////////////////////////////////////////////////////*/
-.background-container {
+.backgroundContainer {
   z-index: 0;
   margin: 0;
   padding: 0;
   min-height: 100vh;
-  background: #00F0FF;
   overflow: hidden;
   position: relative;
   width: 100vw;
@@ -13,6 +12,14 @@
   align-items: center;
 }
 
+.backgroundLight {
+    background: #00F0FF;
+}
+
+.backgroundDark {
+    background: #001C83;
+}
+
 .circle {
   position: absolute;
   border-radius: 50%;
@@ -82,7 +89,6 @@
   .circle-1 {
   width: 300px;
   height: 300px;
-  background-color: #019AFF;
   top: -5%;
   left: -5%;
 }
@@ -90,7 +96,6 @@
 .circle-2 {
   width: 175px;
   height: 175px;
-  background-color: #91FCFF;
   top: 58%;
   left: 10%;
 }
@@ -98,7 +103,6 @@
 .circle-3 {
   width: 140px;
   height: 140px;
-  background-color: #91FCFF;
   top: 29%;
   right: 9%;
 }
@@ -106,7 +110,6 @@
 .circle-4 {
   width: 250px;
   height: 250px;
-  background-color: #019AFF;
   bottom: 0;
   right: 0;
 }
@@ -114,7 +117,6 @@
 .circle-5 {
   width: 240px;
   height: 240px;
-  background-color: #015AFF;
   top: 2%;
   right: 10%;
 }

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}>

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 {