diff --git a/frontend/public/favicon-dark.ico b/frontend/public/favicon-dark.ico
new file mode 100644
index 0000000..7373334
Binary files /dev/null and b/frontend/public/favicon-dark.ico differ
diff --git a/frontend/public/favicon-light.ico b/frontend/public/favicon-light.ico
new file mode 100644
index 0000000..f9e7f76
Binary files /dev/null and b/frontend/public/favicon-light.ico differ
diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico
new file mode 100644
index 0000000..7373334
Binary files /dev/null and b/frontend/public/favicon.ico differ
diff --git a/frontend/src/app/layout.js b/frontend/src/app/layout.js
index d364ba9..fa3c1f9 100644
--- a/frontend/src/app/layout.js
+++ b/frontend/src/app/layout.js
@@ -1,8 +1,7 @@
import { Inter } from "next/font/google";
import "./ui/globals.css";
-
-import { motion } from "framer-motion";
import UpdateNotifier from "./ui/snackBar";
+import Providers from "./providers";
const inter = Inter({ subsets: ["latin"] });
@@ -15,8 +14,10 @@ export default function RootLayout({ children }) {
return (
-
- {children}
+
+
+ {children}
+
);
diff --git a/frontend/src/app/providers.jsx b/frontend/src/app/providers.jsx
new file mode 100644
index 0000000..0eb52ef
--- /dev/null
+++ b/frontend/src/app/providers.jsx
@@ -0,0 +1,39 @@
+"use client";
+
+import { createTheme, ThemeProvider, CssBaseline } from "@mui/material";
+import { useState, useEffect } from "react";
+import { useMediaQuery } from "@mui/material";
+import Head from "next/head";
+
+export default function Providers({ children }) {
+ const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+ const [mode, setMode] = useState(prefersDarkMode ? "dark" : "light");
+
+ useEffect(() => {
+ setMode(prefersDarkMode ? "dark" : "light");
+ }, [prefersDarkMode]);
+
+ const theme = createTheme({ palette: { mode } });
+
+ return (
+
+
+
+ {children}
+
+ );
+}
+
+function FaviconUpdater({ mode }) {
+ useEffect(() => {
+ const favicon =
+ mode === "dark" ? "/favicon-dark.ico" : "/favicon-light.ico";
+ document.querySelector("link[rel='icon']")?.setAttribute("href", favicon);
+ }, [mode]);
+
+ return (
+
+
+
+ );
+}