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.
) : 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. */} +