From 3fb52bb478fed79d441ced22075f77a37e2c8287 Mon Sep 17 00:00:00 2001
From: Chad Miller <chadtmiller15@gmail.com>
Date: Sat, 29 Aug 2026 23:59:19 +0000
Subject: [PATCH] fix: give gallery image loading fallbacks a visible light-mode surface

---
 app/app.css | 2 ++
 app/lib/components/molecules/GalleryMedia.svelte | 2 +-
 app/lib/components/molecules/GallerySectionRow.svelte | 4 ++--
 app/lib/components/molecules/StoryArchive.svelte | 2 +-
 app/lib/components/organisms/GalleryGrid.svelte | 2 +-
 5 file(s) changed, 7 insertion(s)(+), 5 deletion(s)(-)

diff --git a/app/app.css b/app/app.css
--- a/app/app.css
+++ b/app/app.css
@@ -26,6 +26,7 @@
   --bg-root: #080b12;
   --bg-surface: #0f1419;
   --bg-elevated: #161d27;
+  --bg-image: #161d27;
   --bg-hover: #1c2633;
   --bg-blur: rgba(8, 11, 18, 0.85);
   --border: #1e293b;
@@ -49,6 +50,7 @@
   --bg-root: #ffffff;
   --bg-surface: #f6f7fa;
   --bg-elevated: #ffffff;
+  --bg-image: #e2e6ef;
   --bg-hover: #f0f2f7;
   --bg-blur: rgba(255, 255, 255, 0.85);
   --border: #e2e6ef;
diff --git a/app/lib/components/molecules/GalleryMedia.svelte b/app/lib/components/molecules/GalleryMedia.svelte
--- a/app/lib/components/molecules/GalleryMedia.svelte
+++ b/app/lib/components/molecules/GalleryMedia.svelte
@@ -232,7 +232,7 @@
     display: block;
     position: relative;
     overflow: hidden;
-    background: var(--bg-elevated);
+    background: var(--bg-image);
   }
 .spacer {
     display: block;
diff --git a/app/lib/components/molecules/GallerySectionRow.svelte b/app/lib/components/molecules/GallerySectionRow.svelte
--- a/app/lib/components/molecules/GallerySectionRow.svelte
+++ b/app/lib/components/molecules/GallerySectionRow.svelte
@@ -155,7 +155,7 @@
     pointer-events: none;
   }
   .card.skeleton .thumb {
-    background: var(--bg-elevated);
+    background: var(--bg-image);
     animation: pulse 1.2s ease-in-out infinite;
   }
   .card.skeleton::after {
@@ -174,7 +174,7 @@
     width: 100%;
     aspect-ratio: 3 / 4;
     overflow: hidden;
-    background: var(--bg-elevated);
+    background: var(--bg-image);
   }
   .thumb img {
     width: 100%;
diff --git a/app/lib/components/molecules/StoryArchive.svelte b/app/lib/components/molecules/StoryArchive.svelte
--- a/app/lib/components/molecules/StoryArchive.svelte
+++ b/app/lib/components/molecules/StoryArchive.svelte
@@ -61,7 +61,7 @@
   .cell {
     display: block;
     aspect-ratio: 3 / 4;
-    background: var(--bg-elevated);
+    background: var(--bg-image);
     position: relative;
     overflow: hidden;
     border: none;
diff --git a/app/lib/components/organisms/GalleryGrid.svelte b/app/lib/components/organisms/GalleryGrid.svelte
--- a/app/lib/components/organisms/GalleryGrid.svelte
+++ b/app/lib/components/organisms/GalleryGrid.svelte
@@ -116,7 +116,7 @@
   .cell {
     display: block;
     aspect-ratio: 3 / 4;
-    background: var(--bg-elevated);
+    background: var(--bg-image);
     position: relative;
     overflow: hidden;
   }

--
tangled.sh