More styling

src/App.tsx

@@ -20,6 +20,8 @@ import ThemeProvider from "./components/ThemeProvider";
 import "@mantine/core/styles.css"; //import Mantine V7 styles needed by MRT
 import "@mantine/dates/styles.css"; //if using mantine date picker features
 import "mantine-react-table/styles.css"; //import MRT styles
+import { appTheme } from "./contexts/theme";
+import { useAtom } from "jotai";
 
 function App() {
 	const { data, isFetched } = useQueryAPI({
@@ -31,46 +33,50 @@ function App() {
 		defaultValue: "blackboard",
 	});
 
-	const [currentTheme, setCurrentTheme] = useState<any>(undefined);
+	const [theme, setTheme] = useAtom(appTheme);
 
 	useEffect(() => {
 		if (data && themeName) {
 			const temp = data.find((t: any) => t.name === themeName);
-			setCurrentTheme(temp);
+			setTheme(temp);
 		}
 	}, [isFetched, themeName]);
 
 	const router = createBrowserRouter(
 		createRoutesFromElements(
 			<Route>
-				<Route path="/trigger" element={<Homepage theme={currentTheme} />} />
+				<Route path="/trigger" element={<Homepage theme={theme} />} />
 				<Route
 					path="/trigger/settings"
-					element={<Settings theme={currentTheme} />}
+					element={<Settings theme={theme} />}
 				/>
 			</Route>,
 		),
 	);
 
 	const overrides = createTheme({
-		white: currentTheme?.colorbackground,
+		white: theme?.colorbackground,
 		fontFamily:
 			"-apple-system,Jost,BlinkMacSystemFont,Helvetica Neue,Roboto,sans-serif",
 	});
 
 	const mantineTheme = mergeMantineTheme(DEFAULT_THEME, overrides);
-
+	
 	return (
-		<MantineProvider theme={mantineTheme}>
-			{currentTheme && (
-				<ThemeProvider theme={currentTheme}>
-					<ModalsProvider>
+		<>
+		{theme && (
+				<MantineProvider theme={mantineTheme}>
+				<ThemeProvider theme={theme}>
+					<ModalsProvider >
 						<RouterProvider router={router} />
 					</ModalsProvider>
 				</ThemeProvider>
+				</MantineProvider>
 			)}
-		</MantineProvider>
+		</>
+			
+		
 	);
 }
 
-export default App;
+export default App;