init

frontend/src/components/themeController/index.tsx

@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+
+export default function ThemeController() {
+    const [theme, setTheme] = useState(localStorage.getItem("theme") ?? "light");
+    const handleToggle = (e: any) => {
+        if (e.target.checked) {
+            setTheme("cupcake");
+        } else {
+            setTheme("night");
+        }
+    };
+
+    useEffect(() => {
+        localStorage.setItem('theme', theme!)
+        const localTheme = localStorage.getItem('theme')
+        document.querySelector('html')?.setAttribute('data-theme', localTheme!)
+    }, [theme]);
+
+
+    return (
+        <label className="toggle text-base-content">
+            <input type="checkbox" onChange={handleToggle} className="theme-controller" />
+
+            <svg aria-label="moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g strokeLinejoin="round" strokeLinecap="round" strokeWidth="2" fill="none" stroke="currentColor"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path></g></svg>
+            <svg aria-label="sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g strokeLinejoin="round" strokeLinecap="round" strokeWidth="2" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></g></svg>
+
+        </label>
+    )
+}