Styled Homepage

src/App.tsx

@@ -1,43 +1,65 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import './App.css'
 import Homepage from './pages/homepage/Homepage'
-import { MantineProvider } from '@mantine/core'
+import { MantineProvider, DEFAULT_THEME, createTheme, mergeMantineTheme } from '@mantine/core'
 import {
 	Route,
 	createBrowserRouter,
 	createRoutesFromElements,
 	RouterProvider,
-	Navigate,
 } from "react-router-dom";
 import Settings from './pages/settings/Settings';
+import { ModalsProvider } from '@mantine/modals';
+import { useLocalStorage } from '@mantine/hooks';
+import { useEffect, useState } from 'react';
+import { useQueryAPI } from './hooks/useAPI';
+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
 
 function App() {
-  const queryClient = new QueryClient({
-    defaultOptions: {
-      queries: {
-        gcTime: 1000 * 60 * 60 * 24, // 24 hours
-        staleTime: 1000 * 60 * 1, // 1 min
-      },
-    },
+  
+  const { data, isFetched } = useQueryAPI({
+		endpoint: "api/themes",
+	});
+
+  const [themeName, setThemeName] = useLocalStorage<any>({
+		key: 'theme',
+		defaultValue: 'blackboard',
+	});
+
+  const [currentTheme, setCurrentTheme] = useState<any>({});
+
+  const overrides = createTheme({
+    white:currentTheme.colorbackground,
+    fontFamily: '-apple-system,Jost,BlinkMacSystemFont,Helvetica Neue,Roboto,sans-serif',
   });
 
+  const mantineTheme = mergeMantineTheme(DEFAULT_THEME, overrides);
+
+  useEffect(() => {
+    if(data && themeName) {
+      let temp = data.find((t: any) => t.name === themeName)
+      setCurrentTheme(temp);
+    }
+  }, [isFetched, themeName])
+
   const router = createBrowserRouter(
 		createRoutesFromElements(
 			<Route>
-				<Route path="/trigger" element={<Homepage />}></Route>
-				<Route path="/trigger/settings" element={<Settings />}></Route>
+				<Route path="/trigger" element={<Homepage theme={currentTheme} />} />
+				<Route path="/trigger/settings" element={<Settings theme={currentTheme}/>} />
 			</Route>,
 		),
 	);
 
   return (
-    <QueryClientProvider client={queryClient}>
-      <MantineProvider theme={{
-        fontFamily: '-apple-system,Jost,BlinkMacSystemFont,Helvetica Neue,Roboto,sans-serif',
-      }}>
-        <RouterProvider router={router} />
+      <MantineProvider theme={mantineTheme}>
+        <ThemeProvider theme={currentTheme}>
+          <ModalsProvider>
+              <RouterProvider router={router} />
+          </ModalsProvider>
+        </ThemeProvider>
       </MantineProvider>
-    </QueryClientProvider>
   )
 }