Create ThemeSwitcher btn

src/components/ui/themeSwitcher/ThemeSwitcher.jsx

@@ -0,0 +1,19 @@
+import Button from "../button/button.jsx";
+import React from "react";
+
+export default function ThemeSwitcher() {
+
+    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 <Button variant={"default"} onClick={switchTheme}> Changer de thème </Button>
+}

src/pages/Profile/ProfilePage.jsx

@@ -5,6 +5,7 @@ import formatDate from "../../utils/date/formatDate.js";
 import Task from "../../components/Task/Task";
 import Button from "../../components/ui/button/button.jsx";
 import { useNavigate } from "react-router";
+import ThemeSwitcher from "../../components/ui/themeSwitcher/ThemeSwitcher.jsx";
 
 function ProfilePage() {
 
@@ -15,19 +16,6 @@ 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`}>
@@ -43,7 +31,7 @@ function ProfilePage() {
             <div className={styles.headerProfile}>
                 <h2> {user.name} {user.lastname} </h2>
                 <div className={styles.settingsBtns}>
-                    <Button variant={"default"} onClick={switchTheme}> Changer de thème </Button>
+                    <ThemeSwitcher />
                     <Button variant={"danger"} onClick={handleLogout}> Déconnexion </Button>
                 </div>
             </div>