feat: Implement theme toggling and enhance dashboard component theming

This commit introduces a theme toggle functionality in the application header
and improves the visual consistency of dashboard components across different
color schemes.

- Added light/dark mode toggle to  using Mantine's .
- Ensured all  components in  have visible borders in both light and dark modes by adding the  prop.
- Made  colors in  theme-aware, dynamically adjusting their background color based on the active color scheme.

Additionally, this commit includes a large refactoring operation, moving various
component files from  to  and updating
their references.

src/frontend.tsx

@@ -15,7 +15,7 @@ import { createRoot } from "react-dom/client";
 import { routeTree } from "./routeTree.gen";
 import "./index.css";
 import { IS_DEV, VITE_PUBLIC_URL } from "./utils/env";
-import { ThemeProvider } from "next-themes";
+
 
 // Create a new router instance
 export const router = createRouter({
@@ -81,7 +81,7 @@ const theme = createTheme({
 			"#FBBF3B",
 			"#E1AC23",
 			"#C2981D",
-			"#A38418",
+			"#A32020",
 			"#856F12",
 			"#675A0D",
 		],
@@ -101,6 +101,8 @@ const theme = createTheme({
 	primaryColor: "darmasaba-blue",
 });
 
+
+
 const InspectorWrapper = IS_DEV
 	? Inspector
 	: ({ children }: { children: React.ReactNode }) => <>{children}</>;
@@ -124,13 +126,11 @@ const app = (
 			});
 		}}
 	>
-		<ThemeProvider attribute="class" defaultTheme="system">
-			<MantineProvider theme={theme} defaultColorScheme="auto">
-				<ModalsProvider>
-					<RouterProvider router={router} />
-				</ModalsProvider>
-			</MantineProvider>
-		</ThemeProvider>
+		<MantineProvider theme={theme} defaultColorScheme="auto">
+			<ModalsProvider>
+				<RouterProvider router={router} />
+			</ModalsProvider>
+		</MantineProvider>
 	</InspectorWrapper>
 );