Make the selected theme the default value

app/components/Card.tsx

@@ -9,7 +9,7 @@ export function Card({
 }) {
   return (
     <div
-      className={`flex z-10 flex-col bg-ctp-mantle/25 gap-5 p-8 border w-full rounded-md ${className}`}
+      className={`flex z-10 flex-col bg-ctp-mantle/50 gap-5 p-8 border w-full rounded-md ${className}`}
     >
       {children}
     </div>

app/root.tsx

@@ -33,7 +33,7 @@ export interface RootLoaderTypes {
   name: string;
   pfp: string;
   toast: string;
-  theme: "latte" | "macchiato" | "mocha" | "frappe" | undefined;
+  theme: "latte" | "macchiato" | "mocha" | "frappe" | "none";
 }
 
 export async function loader({ request }: LoaderFunctionArgs) {

app/routes/settings.tsx

@@ -8,12 +8,18 @@ import {
   redirect,
   unstable_parseMultipartFormData,
 } from "@remix-run/node";
-import { Form, Link, useActionData } from "@remix-run/react";
+import {
+  Form,
+  Link,
+  useActionData,
+  useRouteLoaderData,
+} from "@remix-run/react";
 import { Button } from "~/components/Button";
 import { Card } from "~/components/Card";
 import { FormInput, FormLabel } from "~/components/Form";
 import { Title, Text } from "~/components/Typography";
 import { editUser } from "~/models/user.server";
+import type { RootLoaderTypes } from "~/root";
 import { theme } from "~/utils/cookie.server";
 import { profilePictureUploadHandler } from "~/utils/file.server";
 import { commitSession, getSession } from "~/utils/session.server";
@@ -109,6 +115,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
 
 export default function Settings() {
   const data = useActionData<ActionFunction>();
+  const rootData = useRouteLoaderData<RootLoaderTypes>("root");
 
   return (
     <div className="flex flex-col gap-5">
@@ -251,7 +258,12 @@ export default function Settings() {
                   name="theme"
                 >
                   {themes.map((theme) => (
-                    <option key={theme} className="capitalize" value={theme}>
+                    <option
+                      key={theme}
+                      selected={rootData.theme === theme}
+                      className="capitalize"
+                      value={theme}
+                    >
                       {theme}
                     </option>
                   ))}