From 343085684ef7d41b2e2920710f9fb34d6a596eea Mon Sep 17 00:00:00 2001
From: lemon <lemonknowsall@gmail.com>
Date: Sat, 16 May 2026 10:58:15 -0700
Subject: [PATCH] Adapt country flag cards for light mode

---
 src/components/CommentContext.tsx | 22 ++++++++++++++++------
 src/components/NoteCard.tsx       | 16 ++++++++--------
 2 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/components/CommentContext.tsx b/src/components/CommentContext.tsx
index b6ce2c3e..c78c0cf8 100644
--- a/src/components/CommentContext.tsx
+++ b/src/components/CommentContext.tsx
@@ -987,7 +987,7 @@ export function CountryFlagBackdrop({ event }: { event: NostrEvent }) {
             alt=""
             decoding="async"
             onError={() => setImageFailed(true)}
-            className="w-full h-full object-cover opacity-60 select-none"
+            className="w-full h-full object-cover opacity-30 saturate-75 brightness-125 dark:opacity-60 dark:saturate-100 dark:brightness-100 select-none"
             style={{
               maskImage: 'linear-gradient(to bottom, black 0%, black 35%, transparent 100%)',
               WebkitMaskImage: 'linear-gradient(to bottom, black 0%, black 35%, transparent 100%)',
@@ -995,11 +995,11 @@ export function CountryFlagBackdrop({ event }: { event: NostrEvent }) {
           />
         ) : paletteGradient ? (
           // Wikipedia not yet resolved (or its image failed) — paint the
-          // flag-color gradient as a placeholder/fallback. Same opacity and
+          // flag-color gradient as a placeholder/fallback. Same theme-aware opacity and
           // mask shape as the image so the visual swap is seamless when the
           // image arrives.
           <div
-            className="absolute inset-0 opacity-60"
+            className="absolute inset-0 opacity-30 saturate-75 brightness-125 dark:opacity-60 dark:saturate-100 dark:brightness-100"
             style={{
               backgroundImage: paletteGradient,
               maskImage: 'linear-gradient(to bottom, black 0%, black 35%, transparent 100%)',
@@ -1007,10 +1007,20 @@ export function CountryFlagBackdrop({ event }: { event: NostrEvent }) {
             }}
           />
         ) : null}
-        {/* Black wash for foreground readability. Mirrors the mask shape
-            so the wash itself fades along with the flag — no hard edge. */}
+        {/* Light mode washes/brightens the flag for dark text; dark mode keeps
+            the original dimmed treatment for white text. Both washes mirror
+            the mask shape so they fade with no hard edge. */}
         <div
-          className="absolute inset-0"
+          className="absolute inset-0 dark:hidden"
+          style={{
+            backgroundImage:
+              'linear-gradient(to bottom, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.84) 50%, rgba(255,255,255,0) 100%)',
+            maskImage: 'linear-gradient(to bottom, black 0%, black 35%, transparent 100%)',
+            WebkitMaskImage: 'linear-gradient(to bottom, black 0%, black 35%, transparent 100%)',
+          }}
+        />
+        <div
+          className="absolute inset-0 hidden dark:block"
           style={{
             backgroundImage:
               'linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.75) 50%, rgba(0,0,0,0) 100%)',
diff --git a/src/components/NoteCard.tsx b/src/components/NoteCard.tsx
index cbfd2436..ed6d411a 100644
--- a/src/components/NoteCard.tsx
+++ b/src/components/NoteCard.tsx
@@ -468,8 +468,8 @@ export const NoteCard = memo(function NoteCard({
 
   const isComment = event.kind === 1111;
   // True when CountryFlagBackdrop is rendering — used to flip the header
-  // strip to high-contrast white text so the author/timestamp stay legible
-  // against the dark wash overlaid on the flag.
+  // strip to high-contrast white text in dark mode so the author/timestamp
+  // stay legible against the dark wash overlaid on the flag.
   const flagMode = useIsCountryRooted(event);
   const isReply = isTextNote && !isComment && isReplyEvent(event);
 
@@ -1041,7 +1041,7 @@ export const NoteCard = memo(function NoteCard({
             <div
               className={cn(
                 flagMode &&
-                  "text-white [&_a]:text-white [&_.text-muted-foreground]:text-white/85 [text-shadow:0_1px_3px_rgba(0,0,0,0.85),0_2px_8px_rgba(0,0,0,0.55)]",
+                  "dark:text-white dark:[&_a]:text-white dark:[&_.text-muted-foreground]:text-white/85 dark:[text-shadow:0_1px_3px_rgba(0,0,0,0.85),0_2px_8px_rgba(0,0,0,0.55)]",
               )}
             >
               {threadedKindHeader}
@@ -1063,7 +1063,7 @@ export const NoteCard = memo(function NoteCard({
                   className={cn(
                     "min-w-0 flex-1",
                     flagMode &&
-                      "text-white [&_a]:text-white [&_.text-muted-foreground]:text-white/85 [text-shadow:0_1px_3px_rgba(0,0,0,0.85),0_2px_8px_rgba(0,0,0,0.55)]",
+                      "dark:text-white dark:[&_a]:text-white dark:[&_.text-muted-foreground]:text-white/85 dark:[text-shadow:0_1px_3px_rgba(0,0,0,0.85),0_2px_8px_rgba(0,0,0,0.55)]",
                   )}
                 >
                   {authorInfo}
@@ -1104,15 +1104,15 @@ export const NoteCard = memo(function NoteCard({
       {/* Foreground wrapper — `relative` lifts the entire post above the
           absolute backdrop layer rendered by CountryFlagBackdrop. */}
       <div className="relative">
-        {/* Header strip — sits over the flag backdrop's dark wash when
-            present. Flips to white text with a drop shadow in flag mode so
-            the name/handle/timestamp stay legible against any flag.
+        {/* Header strip — sits over the flag backdrop when present. In dark
+            mode it flips to white text with a drop shadow so the
+            name/handle/timestamp stay legible against the dimmed flag.
             CountryCommentPill is rendered outside this wrapper so it keeps
             its own gradient/text-shadow styling untouched. */}
         <div
           className={cn(
             flagMode &&
-              "text-white [&_a]:text-white [&_.text-muted-foreground]:text-white/85 [text-shadow:0_1px_3px_rgba(0,0,0,0.85),0_2px_8px_rgba(0,0,0,0.55)]",
+              "dark:text-white dark:[&_a]:text-white dark:[&_.text-muted-foreground]:text-white/85 dark:[text-shadow:0_1px_3px_rgba(0,0,0,0.85),0_2px_8px_rgba(0,0,0,0.55)]",
           )}
         >
           {/* Action header — repost takes priority, otherwise derived from event kind */}