embed color based on if the lookup was successful

src/app/(pages)/player/[[...id]]/page.tsx

@@ -7,9 +7,10 @@ import { LookupPlayer } from "@/app/components/player/lookup-player";
 import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from "@/app/components/ui/context-menu";
 import { Separator } from "@/app/components/ui/separator";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/app/components/ui/tooltip";
+import { Colors } from "@/common/colors";
 import { generateEmbed } from "@/common/embed";
 import { CachedPlayer, McUtilsAPIError, SkinPart, getPlayer } from "mcutils-library";
-import { Metadata } from "next";
+import { Metadata, Viewport } from "next";
 import Image from "next/image";
 import Link from "next/link";
 import { ReactElement } from "react";
@@ -21,6 +22,25 @@ type Params = {
   };
 };
 
+export async function generateViewport({ params: { id } }: Params): Promise<Viewport> {
+  try {
+    if (!id || id.length === 0) {
+      return {
+        themeColor: Colors.red,
+      };
+    }
+    await getPlayer(id); // Ensure the player is valid.
+    return {
+      themeColor: Colors.green,
+    };
+  } catch (err) {
+    // An error occurred
+    return {
+      themeColor: Colors.red,
+    };
+  }
+}
+
 export async function generateMetadata({ params: { id } }: Params): Promise<Metadata> {
   try {
     // No id provided