fix: invert logos in /sponsors when dark mode

2 files changed, 8 insertions, 1 deletions

diff --git a/apps/web/src/app/sponsors/page.tsx b/apps/web/src/app/sponsors/page.tsx
index 5d8b4e6d..a1a57fce 100644
--- a/apps/web/src/app/sponsors/page.tsx
+++ b/apps/web/src/app/sponsors/page.tsx
@@ -6,6 +6,7 @@ import { Card, CardContent } from "@/components/ui/card";
 import { SPONSORS, type Sponsor } from "@/constants/site-constants";
 import { HugeiconsIcon } from "@hugeicons/react";
 import { LinkSquare02Icon } from "@hugeicons/core-free-icons";
+import { cn } from "@/utils/ui";
 
 export const metadata: Metadata = {
 	title: "Sponsors - OpenCut",
@@ -61,7 +62,10 @@ function SponsorCard({ sponsor }: { sponsor: Sponsor }) {
 						alt={`${sponsor.name} logo`}
 						width={50}
 						height={50}
-						className="object-contain"
+						className={cn(
+							"object-contain",
+							sponsor.invertOnDark && "invert-0 dark:invert",
+						)}
 					/>
 					<div className="flex flex-col gap-2">
 						<div className="flex items-center gap-2">
diff --git a/apps/web/src/constants/site-constants.ts b/apps/web/src/constants/site-constants.ts
index 10981727..070a4a6f 100644
--- a/apps/web/src/constants/site-constants.ts
+++ b/apps/web/src/constants/site-constants.ts
@@ -48,6 +48,7 @@ export type Sponsor = {
 	url: string;
 	logo: string;
 	description: string;
+	invertOnDark?: boolean;
 };
 
 export const SPONSORS: Sponsor[] = [
@@ -56,11 +57,13 @@ export const SPONSORS: Sponsor[] = [
 		url: "https://fal.ai?utm_source=opencut",
 		logo: "/logos/others/fal.svg",
 		description: "Generative image, video, and audio models all in one place.",
+		invertOnDark: true,
 	},
 	{
 		name: "Vercel",
 		url: "https://vercel.com?utm_source=opencut",
 		logo: "/logos/others/vercel.svg",
 		description: "Platform where we deploy and host OpenCut.",
+		invertOnDark: true,
 	},
 ];