RHIDP-7614: Configuring theme-specific company logos for global header and sidebar

assemblies/assembly-configuring-the-global-header.adoc

@@ -18,6 +18,8 @@ include::modules/configuring-the-global-header/proc-customize-rhdh-global-header
 
 include::modules/configuring-the-global-header/proc-mount-points.adoc[leveloffset=+1]
 
+include::modules/configuring-the-global-header/proc-configuring-theme-specific-company-logos.adoc[leveloffset=+1]
+
 include::modules/configuring-the-global-header/con-quicklinks-and-starred-items-in-global-header.adoc[leveloffset=+1]
 
-include::modules/configuring-the-global-header/proc-enabling-quicklinks-starred-items-after-upgrade.adoc[leveloffset=+1]
+include::modules/configuring-the-global-header/proc-enabling-quicklinks-starred-items-after-upgrade.adoc[leveloffset=+1]

modules/configuring-the-global-header/proc-configuring-theme-specific-company-logos.adoc

@@ -0,0 +1,53 @@
+[id="configuring-theme-specific-company-logos.adoc_{context}"]
+= Configuring theme-specific company logos
+
+You can configure theme-specific company logos in {product} ({product-very-short}) to align with company branding and improve visibility across light and dark themes.
+
+The {product-short} theme update changes the *Sidebar* and *Global Header* to use white backgrounds in the light theme.
+Previously, both used black backgrounds in light and dark modes. Theme-aware logos ensure strong contrast and consistent branding.
+
+.Prerequisites
+* You have sufficient permissions to modify {product} configuration.
+
+.Procedure
+
+* Configure the *Global Header* logo using the `red-hat-developer-hub.backstage-plugin-global-header` configuration block as shown in the following example:
++
+.Example *Global Header* logo
++
+[source,yaml]
+----
+red-hat-developer-hub.backstage-plugin-global-header:
+  mountPoints:
+    - mountPoint: global.header/component
+      importName: CompanyLogo
+      config:
+        priority: 200
+        props:
+          to: '/'
+          logo: <string> or <object> # Use a single image string for both themes or an object with theme-specific logos
+            dark: <base64_dark_logo> # Used in dark theme
+            light: <base64_light_logo> # Used in light theme
+----
+
+* Configure the *Sidebar* logo in the `app.branding` section as shown in the following example:
++
+.Example *Sidebar* logo
+[source,yaml]
+----
+app:
+  sidebar:
+    search: true
+    settings: true
+    logo: true
+  branding:
+    fullLogo: <string > or <object>
+      dark: <base64_dark_logo>
+      light: <base64_light_logo>
+----
++
+By default, if you do not provide `fullLogoLightTheme` or `logoLightTheme`, the application uses `logo` or `fullLogo` for both themes.
++
+If you enable `app.sidebar.logo`, ensure you configure `app.branding.fullLogoLightTheme` to display the correct logo in the light theme.
++
+If you skip configuration, the *Sidebar* displays the default {product} icon for both light and dark themes.