From 2888fd9318474a0375c582bd2dc795d3f0a01c3d Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Fri, 23 May 2025 17:15:54 -0500
Subject: [PATCH] Clarify photo matte color config

---
 src/admin/AdminAppConfigurationClient.tsx | 11 +++++++++++
 src/app/config.ts                         |  3 +++
 2 files changed, 14 insertions(+)

diff --git a/src/admin/AdminAppConfigurationClient.tsx b/src/admin/AdminAppConfigurationClient.tsx
index 79480850..ffccd45a 100644
--- a/src/admin/AdminAppConfigurationClient.tsx
+++ b/src/admin/AdminAppConfigurationClient.tsx
@@ -74,6 +74,7 @@ export default function AdminAppConfigurationClient({
   hasDefaultTheme,
   defaultTheme,
   arePhotosMatted,
+  arePhotoMatteColorsConfigured,
   matteColor,
   matteColorDark,
   // Display
@@ -521,6 +522,16 @@ export default function AdminAppConfigurationClient({
             of each photo, and display a surrounding border:
             <div className="pt-1 flex flex-col gap-1">
               <EnvVar variable="NEXT_PUBLIC_MATTE_PHOTOS" />
+            </div>
+          </ChecklistRow>
+          <ChecklistRow
+            title="Custom photo matting colors"
+            status={arePhotoMatteColorsConfigured}
+            optional
+          >
+            Set environment variable hex values (e.g., #cccccc)
+            to override matte colors:
+            <div className="pt-1 flex flex-col gap-1">
               <EnvVar
                 variable="NEXT_PUBLIC_MATTE_COLOR"
                 accessory={matteColor && <span
diff --git a/src/app/config.ts b/src/app/config.ts
index 13837b2a..c3a3e0ab 100644
--- a/src/app/config.ts
+++ b/src/app/config.ts
@@ -381,6 +381,9 @@ export const APP_CONFIGURATION = {
   hasDefaultTheme: Boolean(process.env.NEXT_PUBLIC_DEFAULT_THEME),
   defaultTheme: DEFAULT_THEME,
   arePhotosMatted: MATTE_PHOTOS,
+  arePhotoMatteColorsConfigured:
+    Boolean(MATTE_COLOR) ||
+    Boolean(MATTE_COLOR_DARK),
   matteColor: MATTE_COLOR,
   matteColorDark: MATTE_COLOR_DARK,
   // Display