From 813658a3d4deb02499c8ee46000f61c8d201d753 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sat, 29 Mar 2025 13:00:24 -0500
Subject: [PATCH] Offer matte background color configuration

---
 app/layout.tsx                            |  2 ++
 src/admin/AdminAppConfigurationClient.tsx | 24 ++++++++++++++++++++---
 src/app/ThemeColors.tsx                   | 14 +++++++++++++
 src/app/config.ts                         |  6 ++++++
 src/components/EnvVar.tsx                 |  3 +++
 src/photo/PhotoLarge.tsx                  | 14 +++++++++++--
 6 files changed, 58 insertions(+), 5 deletions(-)
 create mode 100644 src/app/ThemeColors.tsx

diff --git a/app/layout.tsx b/app/layout.tsx
index 7a6bf424..6f933459 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -23,6 +23,7 @@ import ShareModals from '@/share/ShareModals';
 import AdminUploadPanel from '@/admin/upload/AdminUploadPanel';
 import { revalidatePath } from 'next/cache';
 import RecipeModal from '@/recipe/RecipeModal';
+import ThemeColors from '@/app/ThemeColors';
 
 import '../tailwind.css';
 
@@ -79,6 +80,7 @@ export default function RootLayout({
         '3xl:flex flex-col items-center',
       )}>
         <AppStateProvider>
+          <ThemeColors />
           <ThemeProvider attribute="class" defaultTheme={DEFAULT_THEME}>
             <SwrConfigClient>
               <div className={clsx(
diff --git a/src/admin/AdminAppConfigurationClient.tsx b/src/admin/AdminAppConfigurationClient.tsx
index 1c16dc40..f994a7f8 100644
--- a/src/admin/AdminAppConfigurationClient.tsx
+++ b/src/admin/AdminAppConfigurationClient.tsx
@@ -71,6 +71,8 @@ export default function AdminAppConfigurationClient({
   hasDefaultTheme,
   defaultTheme,
   arePhotosMatted,
+  matteColor,
+  matteColorDark,
   // Display
   categoryVisibility,
   hasCategoryVisibility,
@@ -114,8 +116,8 @@ export default function AdminAppConfigurationClient({
 }) {
   const renderEnvVars = (variables: string[]) =>
     <div className="pt-1 flex flex-col gap-1">
-      {variables.map(envVar =>
-        <EnvVar key={envVar} variable={envVar} />)}
+      {variables.map(variable =>
+        <EnvVar key={variable} variable={variable} />)}
     </div>;
 
   const renderSubStatus = (
@@ -478,7 +480,23 @@ export default function AdminAppConfigurationClient({
             Set environment variable to {'"1"'} to constrain the size
             {' '}
             of each photo, and display a surrounding border:
-            {renderEnvVars(['NEXT_PUBLIC_MATTE_PHOTOS'])}
+            <div className="pt-1 flex flex-col gap-1">
+              <EnvVar variable="NEXT_PUBLIC_MATTE_PHOTOS" />
+              <EnvVar
+                variable="NEXT_PUBLIC_MATTE_COLOR"
+                accessory={matteColor && <span
+                  className="size-4 border-medium rounded-sm ml-1"
+                  style={{ backgroundColor: matteColor }}
+                />}
+              />
+              <EnvVar
+                variable="NEXT_PUBLIC_MATTE_COLOR_DARK"
+                accessory={matteColorDark && <span
+                  className="size-4 border-medium rounded-sm ml-1"
+                  style={{ backgroundColor: matteColorDark }}
+                />}
+              />
+            </div>
           </ChecklistRow>
         </ChecklistGroup>
         <ChecklistGroup
diff --git a/src/app/ThemeColors.tsx b/src/app/ThemeColors.tsx
new file mode 100644
index 00000000..daf3622e
--- /dev/null
+++ b/src/app/ThemeColors.tsx
@@ -0,0 +1,14 @@
+'use client';
+
+import { MATTE_COLOR, MATTE_COLOR_DARK } from './config';
+
+export default function ThemeColors() {
+  return (<>
+    {MATTE_COLOR && <style jsx global>{`
+      :root { --matte-bg: ${MATTE_COLOR}; }
+    `}</style>}
+    {MATTE_COLOR_DARK && <style jsx global>{`
+      :root { --matte-bg-dark: ${MATTE_COLOR_DARK}; }
+    `}</style>}
+  </>);
+}
diff --git a/src/app/config.ts b/src/app/config.ts
index 534314a8..084e4581 100644
--- a/src/app/config.ts
+++ b/src/app/config.ts
@@ -232,6 +232,10 @@ export const DEFAULT_THEME =
       : 'system';
 export const MATTE_PHOTOS =
   process.env.NEXT_PUBLIC_MATTE_PHOTOS === '1';
+export const MATTE_COLOR =
+  process.env.NEXT_PUBLIC_MATTE_COLOR;
+export const MATTE_COLOR_DARK =
+  process.env.NEXT_PUBLIC_MATTE_COLOR_DARK;
 
 // DISPLAY
 
@@ -350,6 +354,8 @@ export const APP_CONFIGURATION = {
   hasDefaultTheme: Boolean(process.env.NEXT_PUBLIC_DEFAULT_THEME),
   defaultTheme: DEFAULT_THEME,
   arePhotosMatted: MATTE_PHOTOS,
+  matteColor: MATTE_COLOR,
+  matteColorDark: MATTE_COLOR_DARK,
   // Display
   hasCategoryVisibility:
     Boolean(process.env.NEXT_PUBLIC_CATEGORY_VISIBILITY),
diff --git a/src/components/EnvVar.tsx b/src/components/EnvVar.tsx
index 44bd1158..484e0c5e 100644
--- a/src/components/EnvVar.tsx
+++ b/src/components/EnvVar.tsx
@@ -5,12 +5,14 @@ import CopyButton from './CopyButton';
 export default function EnvVar({
   variable,
   value,
+  accessory,
   includeCopyButton = true,
   trailingContent,
   className,
 }: {
   variable: string,
   value?: string,
+  accessory?: ReactNode,
   includeCopyButton?: boolean,
   trailingContent?: ReactNode,
   className?: string,
@@ -33,6 +35,7 @@ export default function EnvVar({
         )}>
           {variable}{value && ` = ${value}`}
         </span>
+        {accessory}
         {includeCopyButton &&
           <span className="translate-y-[1px]">
             <CopyButton
diff --git a/src/photo/PhotoLarge.tsx b/src/photo/PhotoLarge.tsx
index 173d3f66..6ea1e97b 100644
--- a/src/photo/PhotoLarge.tsx
+++ b/src/photo/PhotoLarge.tsx
@@ -29,6 +29,8 @@ import {
   SHOULD_PREFETCH_ALL_LINKS,
   ALLOW_PUBLIC_DOWNLOADS,
   SHOW_TAKEN_AT_TIME,
+  MATTE_COLOR,
+  MATTE_COLOR_DARK,
 } from '@/app/config';
 import AdminPhotoMenu from '@/admin/AdminPhotoMenu';
 import { RevalidatePhoto } from './InfinitePhotoScroll';
@@ -237,8 +239,16 @@ export default function PhotoLarge({
       ariaLabel: `Admin menu for '${titleForPhoto(photo)}' photo`,
     }} />;
 
-  const largePhotoContainerClassName = clsx(arePhotosMatted &&
-    'flex items-center justify-center aspect-3/2 bg-gray-100',
+  const largePhotoContainerClassName = clsx(
+    arePhotosMatted && 'flex items-center justify-center aspect-3/2',
+    // Matte theme colors defined in root layout
+    arePhotosMatted && (MATTE_COLOR
+      ? 'bg-(--matte-bg)'
+      : 'bg-gray-100'),
+    arePhotosMatted && (MATTE_COLOR_DARK
+      ? 'dark:bg-(--matte-bg-dark)'
+      // Only specify dark background when MATTE_COLOR is not configured
+      : !MATTE_COLOR && 'dark:bg-gray-700/35'),
   );
 
   return (