From 307b84fe05d679d1d3c4d7a2a48a6d7b24ef496c Mon Sep 17 00:00:00 2001 From: Luca <102960244+Luca-Timo@users.noreply.github.com> Date: Wed, 3 Jun 2026 16:34:38 +0200 Subject: [PATCH] fix(branding): use dark-mode logo on the admin login page The login page only ever rendered branding_logo_url (the light logo), so a dark-text logo sat on the dark background in dark mode. Pick the dark variant via useAdminDarkMode (honouring branding_force_color_mode too), mirroring AdminHeader/AdminSidebar, with a fallback to whichever exists. --- frontend/src/pages/admin/AdminLoginPage.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/frontend/src/pages/admin/AdminLoginPage.tsx b/frontend/src/pages/admin/AdminLoginPage.tsx index d9ece291..7afe1385 100644 --- a/frontend/src/pages/admin/AdminLoginPage.tsx +++ b/frontend/src/pages/admin/AdminLoginPage.tsx @@ -8,6 +8,7 @@ import { Button, Input, Card, ReCaptcha } from '../../components/common'; import { useAdminAuth } from '../../contexts'; import { authService } from '../../services/auth.service'; import { usePublicSettings } from '../../hooks/usePublicSettings'; +import { useAdminDarkMode } from '../../contexts/AdminDarkModeContext'; import { resolveLoginLogoClasses } from '../../utils/loginLogoSize'; import { api } from '../../config/api'; @@ -27,12 +28,16 @@ export const AdminLoginPage: React.FC = () => { const [recaptchaToken, setRecaptchaToken] = useState(null); const { data: settingsData } = usePublicSettings(); + const { isDark } = useAdminDarkMode(); const companyName = settingsData?.branding_company_name?.trim() || 'PicPeak'; - const logoUrl = settingsData?.branding_logo_url?.trim(); - const resolvedLogoUrl = logoUrl - ? (logoUrl.startsWith('http') ? logoUrl : logoUrl) - : '/picpeak-logo-transparent.png'; + // Theme-aware logo: the login page honours the admin dark-mode preference + // (and any branding_force_color_mode), so a dark-text logo isn't shown on + // the dark background. Falls back to whichever variant exists. + const lightLogo = settingsData?.branding_logo_url?.trim(); + const darkLogo = settingsData?.branding_logo_url_dark?.trim(); + const logoUrl = isDark ? (darkLogo || lightLogo) : (lightLogo || darkLogo); + const resolvedLogoUrl = logoUrl || '/picpeak-logo-transparent.png'; // Check for session expired message useEffect(() => {