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

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
+8
View File
@@ -340,6 +340,14 @@ if (process.env.OVERLEAF_HEADER_IMAGE_URL != null) {
settings.nav.custom_logo = process.env.OVERLEAF_HEADER_IMAGE_URL
}
if (process.env.OVERLEAF_HEADER_IMAGE_URL_LIGHT != null) {
settings.nav.custom_logo_light = process.env.OVERLEAF_HEADER_IMAGE_URL_LIGHT
}
if (process.env.OVERLEAF_HEADER_IMAGE_URL_DARK != null) {
settings.nav.custom_logo_dark = process.env.OVERLEAF_HEADER_IMAGE_URL_DARK
}
if (process.env.OVERLEAF_HEADER_EXTRAS != null) {
try {
settings.nav.header_extras = JSON.parse(process.env.OVERLEAF_HEADER_EXTRAS)