From 7d34c97c584eb5e9c56ca1535d8afa8e6564d328 Mon Sep 17 00:00:00 2001 From: Luca <102960244+Luca-Timo@users.noreply.github.com> Date: Wed, 3 Jun 2026 15:19:08 +0200 Subject: [PATCH] fix(branding): dark-mode logo in the admin sidebar MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The sidebar brand row (logo_position=sidepanel) + collapsed rail used the light logo unconditionally. Make it theme-aware via useAdminDarkMode with the same symmetric fallback as the header (dark uses dark||light, light uses light||dark). This was the missing admin surface — the header already switched. --- frontend/src/components/admin/AdminSidebar.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/admin/AdminSidebar.tsx b/frontend/src/components/admin/AdminSidebar.tsx index b165e931..bdc5e552 100644 --- a/frontend/src/components/admin/AdminSidebar.tsx +++ b/frontend/src/components/admin/AdminSidebar.tsx @@ -18,6 +18,7 @@ import { useTranslation } from 'react-i18next'; import { settingsService } from '../../services/settings.service'; import { VersionInfo } from './VersionInfo'; import { usePermissions } from '../../contexts/PermissionsContext'; +import { useAdminDarkMode } from '../../contexts/AdminDarkModeContext'; import { useFeatureFlags, type FeatureKey } from '../../contexts/FeatureFlagsContext'; import { usePublicSettings } from '../../hooks/usePublicSettings'; import { buildResourceUrl } from '../../utils/url'; @@ -106,8 +107,12 @@ export const AdminSidebar: React.FC = ({ isOpen, onClose, col // chosen, the logo replaces the "PicPeak Admin" text in the brand // row, and the favicon takes over in the collapsed icon rail. const { data: publicSettings } = usePublicSettings(); + const { isDark } = useAdminDarkMode(); const logoInSidebar = publicSettings?.branding_logo_position === 'sidepanel'; - const rawLogoUrl = publicSettings?.branding_logo_url?.trim(); + // Theme-aware logo with symmetric fallback (one logo serves both modes). + const lightLogo = publicSettings?.branding_logo_url?.trim(); + const darkLogo = publicSettings?.branding_logo_url_dark?.trim(); + const rawLogoUrl = isDark ? (darkLogo || lightLogo) : (lightLogo || darkLogo); const rawFaviconUrl = publicSettings?.branding_favicon_url?.trim(); const resolvedLogoUrl = rawLogoUrl ? (rawLogoUrl.startsWith('http') ? rawLogoUrl : buildResourceUrl(rawLogoUrl))