Theme changes

src/App.tsx

@@ -1,6 +1,7 @@
 import {
 	DEFAULT_THEME,
 	MantineProvider,
+	colorsTuple,
 	createTheme,
 	mergeMantineTheme,
 } from '@mantine/core';
@@ -13,7 +14,7 @@ import {
 	createBrowserRouter,
 	createRoutesFromElements,
 } from 'react-router-dom';
-import { Loading, MainLayout, ThemeProvider } from './components';
+import { Loading, MainLayout } from './components';
 import '@mantine/core/styles.css';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import './index.css';
@@ -32,11 +33,18 @@ function App() {
 		useCommonHooks();
 	const [loaded, setLoaded] = useState<boolean>(false);
 	const overrides = createTheme({
+		primaryColor: 'primary',
+		colors: {
+			primary: colorsTuple(theme.primaryColor),
+			accent: colorsTuple(theme.accentColor),
+			background: colorsTuple(theme.backgroundColor),
+			border: colorsTuple(theme.borderColor),
+			search: colorsTuple(theme.searchColor),
+		},
 		white: theme?.backgroundColor,
 		fontFamily: '-apple-system,Jost,BlinkMacSystemFont,Helvetica Neue,Roboto,sans-serif',
 	});
 	const mantineTheme = mergeMantineTheme(DEFAULT_THEME, overrides);
-
 	const router = createBrowserRouter(
 		createRoutesFromElements(
 			<Route>
@@ -104,12 +112,10 @@ function App() {
 		<>
 			{theme && (
 				<MantineProvider theme={mantineTheme}>
-					<ThemeProvider theme={theme}>
-						<ToastContainer />
-						<Loading loaded={loaded} />
-						<RouterProvider router={router} />
-						<ReactQueryDevtools initialIsOpen={false} />
-					</ThemeProvider>
+					<ToastContainer />
+					<Loading loaded={loaded} />
+					<RouterProvider router={router} />
+					<ReactQueryDevtools initialIsOpen={false} />
 				</MantineProvider>
 			)}
 		</>