Added dark/light mode (next: custom themes)

frontend/views/MainLayout.tsx

@@ -1,8 +1,8 @@
 import {useRouteMetadata} from 'Frontend/util/routing.js';
 import {useEffect} from 'react';
-import {Navbar} from "@material-tailwind/react";
 import ProfileMenu from "Frontend/components/ProfileMenu";
 import {Outlet} from "react-router-dom";
+import {Card} from "Frontend/@/components/ui/card";
 
 export default function MainLayout() {
     const currentTitle = `Gameyfin - ${useRouteMetadata()?.title}` ?? 'Gameyfin';
@@ -12,7 +12,7 @@ export default function MainLayout() {
 
     return (
         <>
-            <Navbar className="sticky top-0 z-10 h-max max-w-full rounded-none px-4 py-2">
+            <Card className="sticky top-0 z-10 h-max max-w-full rounded-none px-4 py-2">
                 <div className="flex items-center justify-end text-blue-gray-900">
                     <img
                         className="absolute w-full content-center h-8"
@@ -21,7 +21,7 @@ export default function MainLayout() {
                     />
                     <ProfileMenu/>
                 </div>
-            </Navbar>
+            </Card>
 
             <Outlet/>
         </>