Files
overleaf-cep/services/web/app/views/layout-react.pug
T
ThomasandClaude Opus 4.8 42b29f0107 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
2026-09-17 12:05:54 +00:00

72 lines
2.6 KiB
Plaintext

//- Avoids including Bootstrap's own JS to prevent conflicts with react-bootstrap,
//- since Bootstrap 5's JS and react-bootstrap should not be used together on the same page.
extends ./layout-base
include ./_mixins/formMessages
block isApplicationPageVar
- isApplicationPage = true
block append meta
- const canDisplayAdminMenu = hasAdminAccess()
- const canDisplayAdminRedirect = canRedirectToAdminDomain()
- const sessionUser = getSessionUser()
- const canDisplayProjectUrlLookup = settings.adminPrivilegeAvailable && canDisplayAdminMenu && hasAdminCapability('view-project-setting', false)
- const canDisplaySplitTestMenu = hasFeature('saas') && hasNonAdminDomainCapability('view-split-test')
- const canDisplaySurveyMenu = hasFeature('saas') && canDisplayAdminMenu && hasAdminCapability('manage-survey', false)
- const canDisplayScriptLogMenu = hasFeature('saas') && hasAdminCapability('view-script-log', false) && canDisplayAdminMenu
- const enableUpgradeButton = projectDashboardReact && usersBestSubscription && (usersBestSubscription.type === 'free' || usersBestSubscription.type === 'standalone-ai-add-on')
- const showSignUpLink = hasFeature('registration-page')
meta(
name='ol-navbar'
data-type='json'
content={
customLogo: settings.nav.custom_logo_light || settings.nav.custom_logo,
customLogoDark: settings.nav.custom_logo_dark || settings.nav.custom_logo,
title: nav.title,
canDisplayAdminMenu,
canDisplayAdminRedirect,
canDisplayProjectUrlLookup,
canDisplaySplitTestMenu,
canDisplaySurveyMenu,
canDisplayScriptLogMenu,
enableUpgradeButton,
suppressNavbarRight: !!suppressNavbarRight,
suppressNavContentLinks: !!suppressNavContentLinks,
showSubscriptionLink: nav.showSubscriptionLink,
showSignUpLink: showSignUpLink,
currentUrl: currentUrl,
sessionUser: sessionUser ? {email: sessionUser.email} : undefined,
adminUrl: settings.adminUrl,
items: cloneAndTranslateText(nav.header_extras),
}
)
meta(
name='ol-footer'
data-type='json'
content={
showThinFooter: showThinFooter,
showPoweredBy: !hasFeature('saas') && !settings.nav.hide_powered_by,
subdomainLang: settings.i18n.subdomainLang,
translatedLanguages: settings.translatedLanguages,
leftItems: cloneAndTranslateText(settings.nav.left_footer),
rightItems: settings.nav.right_footer,
}
)
block body
if typeof suppressNavbar === 'undefined'
include layout/navbar-marketing-react
block content
if typeof suppressFooter === 'undefined'
if showThinFooter
include layout/thin-footer
else
include layout/fat-footer-react
if typeof suppressPugCookieBanner === 'undefined'
include _cookie_banner