feat(branding): dark-mode logo variant

Add an optional dark-mode logo (branding_logo_url_dark) alongside the
main logo. Upload/remove via the logo endpoint (?variant=dark) on the
Branding settings page. Admin header (admin dark mode) and the public
gallery (dark themes) pick the dark logo when active, falling back to
the light logo when unset. PDFs keep using the light logo.

frontend/src/components/admin/AdminHeader.tsx

@@ -33,7 +33,10 @@ export const AdminHeader: React.FC<AdminHeaderProps> = ({ onMenuClick }) => {
   const { data: brandingSettings } = usePublicSettings();
 
   const companyName = brandingSettings?.branding_company_name?.trim() || 'PicPeak';
-  const logoUrl = brandingSettings?.branding_logo_url?.trim();
+  // Dark-mode logo variant: use it when the admin theme is dark and a dark
+  // logo was uploaded; otherwise fall back to the light logo.
+  const logoUrl = (isDark && brandingSettings?.branding_logo_url_dark?.trim())
+    || brandingSettings?.branding_logo_url?.trim();
   const logoDisplayMode = brandingSettings?.branding_logo_display_mode || 'logo_and_text';
   // Logo placement honours the same Branding > Logo Position setting
   // the gallery does. 'sidepanel' moves the logo into the AdminSidebar

frontend/src/components/gallery/GalleryLayout.tsx

@@ -32,6 +32,7 @@ interface GalleryLayoutProps {
     footer_text?: string;
     favicon_url?: string;
     logo_url?: string;
+    logo_url_dark?: string;
     logo_size?: 'small' | 'medium' | 'large' | 'xlarge' | 'custom';
     logo_max_height?: number;
     logo_position?: 'left' | 'center' | 'right' | 'sidepanel';
@@ -122,6 +123,9 @@ export const GalleryLayout: React.FC<GalleryLayoutProps> = ({
   const { t } = useTranslation();
   const { format } = useLocalizedDate();
   const { theme } = useTheme();
+  // Dark-mode logo variant: prefer it on dark gallery themes, else light.
+  const brandLogoUrl = (theme.colorMode === 'dark' && brandingSettings?.logo_url_dark)
+    || brandingSettings?.logo_url;
   const guestIdentity = useGuestIdentityOptional();
 
   // Footer legal-link config. Cached aggressively because the toggle state
@@ -304,8 +308,8 @@ export const GalleryLayout: React.FC<GalleryLayoutProps> = ({
                 {shouldShowLogo('header') && (
                   <div className={`gallery-logo-wrapper flex-shrink-0 flex items-center gap-2 ${brandingSettings?.logo_position === 'center' ? 'flex-1' : ''} ${getLogoPositionClass()}`}>
                     <img
-                      src={brandingSettings?.logo_url ?
-                        buildResourceUrl(brandingSettings.logo_url) :
+                      src={brandLogoUrl ?
+                        buildResourceUrl(brandLogoUrl) :
                         '/picpeak-logo-transparent.png'
                       }
                       alt={brandingSettings?.company_name || 'PicPeak'}
@@ -587,17 +591,17 @@ export const GalleryLayout: React.FC<GalleryLayoutProps> = ({
               {/* Logo - Show custom logo or fallback to PicPeak logo */}
               {shouldShowLogo('hero') && (
                 <div className="mb-6">
-                  <img 
-                    src={brandingSettings?.logo_url ? 
-                      buildResourceUrl(brandingSettings.logo_url) : 
+                  <img
+                    src={brandLogoUrl ?
+                      buildResourceUrl(brandLogoUrl) :
                       '/picpeak-logo-transparent.png'
-                    } 
+                    }
                     alt={brandingSettings?.company_name || 'PicPeak'}
                     className={`${heroLogoSize.className} w-auto object-contain mx-auto`}
                     style={{
                       ...(heroLogoSize.style || {}),
                       // Only apply brightness/invert filter to default logo; custom logos display as-is
-                      filter: brandingSettings?.logo_url
+                      filter: brandLogoUrl
                         ? 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))'
                         : 'brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))'
                     }}

frontend/src/components/gallery/GalleryView.tsx

@@ -280,6 +280,7 @@ export const GalleryView: React.FC<GalleryViewProps> = ({ slug, event }) => {
         footer_text: settingsData.branding_footer_text || '',
         watermark_enabled: settingsData.branding_watermark_enabled || false,
         logo_url: settingsData.branding_logo_url || null,
+        logo_url_dark: settingsData.branding_logo_url_dark || null,
         logo_size: settingsData.branding_logo_size || 'medium',
         logo_max_height: settingsData.branding_logo_max_height || 48,
         logo_position: settingsData.branding_logo_position || 'left',