Fix/light mode

.vscode/settings.json

@@ -5,5 +5,8 @@
 		"source.fixAll.biome": "explicit",
 		"source.organizeImports.biome": "explicit",
 		"source.removeUnusedImports": "explicit"
+	},
+	"[typescriptreact]": {
+		"editor.defaultFormatter": "vscode.typescript-language-features"
 	}
 }

biome.json

@@ -1,5 +1,5 @@
 {
-	"$schema": "https://biomejs.dev/schemas/2.3.11/schema.json",
+	"$schema": "https://biomejs.dev/schemas/2.3.13/schema.json",
 	"vcs": {
 		"enabled": true,
 		"clientKind": "git",

src/app/context/theme-provider.tsx

@@ -1,14 +1,31 @@
 "use client";
 
 import CssBaseline from "@mui/material/CssBaseline";
-import { ThemeProvider } from "@mui/material/styles";
-import type { ReactNode } from "react";
+import { ThemeProvider, useColorScheme } from "@mui/material/styles";
+import { type ReactNode, useEffect } from "react";
 import { theme } from "@/app/theme";
 
+function ThemeSynchronizer() {
+	const { setMode } = useColorScheme();
+
+	useEffect(() => {
+		const storedMode = localStorage.getItem("mui-mode");
+		if (!storedMode) {
+			const systemPrefersDark = window.matchMedia(
+				"(prefers-color-scheme: dark)",
+			).matches;
+			setMode(systemPrefersDark ? "dark" : "light");
+		}
+	}, [setMode]);
+
+	return null;
+}
+
 const MuiProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
 	return (
 		<ThemeProvider theme={theme} defaultMode="system">
 			<CssBaseline />
+			<ThemeSynchronizer />
 			{children}
 		</ThemeProvider>
 	);

src/app/globals.css

@@ -2,6 +2,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
 
 /* Light Mode */
+:root[data-mui-color-scheme="light"],
 .light-mode {
 	--bg-color: #f5f5f7;
 	--text-color: #1d1d1f;
@@ -13,6 +14,7 @@
 }
 
 /* Dark Mode */
+:root[data-mui-color-scheme="dark"],
 .dark-mode {
 	--bg-color: #0d0d0d;
 	--text-color: #f5f5f7;

src/app/layout.tsx

@@ -19,6 +19,27 @@ export const metadata: Metadata = {
 	title: "AI Metrics Dashboard - LibreChat Analytics",
 	description:
 		"Dashboard for monitoring and analyzing LibreChat AI usage metrics, token consumption, and agent statistics.",
+	icons: {
+		icon: [
+			{
+				url: "/favicon-32x32.png",
+				sizes: "32x32",
+				type: "image/png",
+			},
+			{
+				url: "/favicon-16x16.png",
+				sizes: "16x16",
+				type: "image/png",
+			},
+		],
+		apple: [
+			{
+				url: "/apple-touch-icon-180x180.png",
+				sizes: "180x180",
+				type: "image/png",
+			},
+		],
+	},
 };
 
 export default function RootLayout({

src/app/login/page.tsx

@@ -14,6 +14,7 @@ import {
 } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import { type FormEvent, useCallback, useState } from "react";
+import DarkLightSwitch from "@/components/dashboard/dark-light-switch";
 import { API_BASE, getAbsolutePath } from "@/lib/utils/api-base";
 
 export default function LoginPage() {
@@ -200,6 +201,9 @@ export default function LoginPage() {
 					</a>
 				</Typography>
 			</Paper>
+			<Box sx={{ position: "absolute", bottom: 16, right: 16 }}>
+				<DarkLightSwitch />
+			</Box>
 		</Box>
 	);
 }