Support separate header logo images for light and dark themes (#36362)

mirror of https://github.com/yu-i-i/overleaf-cep.git synced 2026-11-14 22:23:42 +01:00

Server Pro/CE admins can set a custom header logo via OVERLEAF_HEADER_IMAGE_URL,
but the same image is used for both the light and dark navbar themes. A logo
with good contrast on one background can be hard to see on the other (e.g. a
dark logo on the dark dashboard navbar).

Add two optional env vars, OVERLEAF_HEADER_IMAGE_URL_LIGHT and
OVERLEAF_HEADER_IMAGE_URL_DARK, each falling back to OVERLEAF_HEADER_IMAGE_URL
when unset, so existing configurations are unaffected. The light/dark fallback is
resolved server-side and exposed to the frontend as customLogo (light-effective)
and customLogoDark (dark-effective); the two theme-aware navbars (project
dashboard and library) pick between them using the existing overall-theme hook,
so the logo tracks both the user's theme setting and live OS theme changes.

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
GitOrigin-RevId: 587a5679c650717cba6251e6d612146f434e8730

This commit is contained in:

Thomas

2026-09-17 12:05:54 +00:00

committed by

Copybot

co-authored by

Claude Opus 4.8

parent b4b12caf48

commit 42b29f0107

6 changed files with 22 additions and 4 deletions

									
										services/web/frontend/js/shared/components/types/default-navbar-metadata.ts
									
		+1
		
												View File
												
				@@ -5,6 +5,7 @@ import type {

				export type DefaultNavbarMetadata = {

				  customLogo?: string

				  customLogoDark?: string

				  title?: string

				  canDisplayAdminMenu: boolean

				  canDisplayAdminRedirect: boolean