theme settings

src/app/App.tsx

@@ -1,6 +1,9 @@
 import { routeTree } from "@/routeTree.gen";
 import { RouterProvider, createRouter } from "@tanstack/react-router";
 
+import { theme } from "./theme";
+import { ThemeProvider } from "@mui/material";
+
 import "./globals.css";
 import "@fontsource/roboto/300.css";
 import "@fontsource/roboto/400.css";
@@ -16,5 +19,9 @@ declare module "@tanstack/react-router" {
 }
 
 export default function App() {
-  return <RouterProvider router={router} />;
+  return (
+    <ThemeProvider theme={theme}>
+      <RouterProvider router={router} />
+    </ThemeProvider>
+  );
 }

src/app/globals.css

@@ -1,3 +1,12 @@
 @tailwind base;
 @tailwind utilities;
 @tailwind components;
+
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+.no-scrollbar {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}

src/app/theme.ts

@@ -0,0 +1,9 @@
+import { createTheme } from "@mui/material/styles";
+
+export const theme = createTheme({
+  palette: {
+    primary: {
+      main: "#676CF6",
+    },
+  },
+});