Separate header images for light and dark themes #1504

Description

Overleaf currently supports customizing the header logo through the following environment variable:

OVERLEAF_HEADER_IMAGE_URL=https://example.com/header-logo.svg

The configured image is used for both the light and dark themes.

This creates a branding issue when the same image does not have sufficient contrast on both backgrounds. For example, a dark logo may work well in the light theme but become difficult to see in the dark theme.

It would be useful to support separate header images for each theme.

Proposed configuration

Introduce two optional environment variables:

OVERLEAF_HEADER_IMAGE_URL_LIGHT=https://example.com/header-logo-light.svg
OVERLEAF_HEADER_IMAGE_URL_DARK=https://example.com/header-logo-dark.svg

The expected behavior would be:

• Use OVERLEAF_HEADER_IMAGE_URL_LIGHT when the light theme is active.
• Use OVERLEAF_HEADER_IMAGE_URL_DARK when the dark theme is active.
• Automatically switch the image when the user changes the theme.
• Support the system theme setting and update the image when the operating-system theme changes.
• Keep OVERLEAF_HEADER_IMAGE_URL for backward compatibility.