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

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

@@ -16,4 +16,11 @@ By default, the {product-short} global header includes the following components:
 include::modules/configuring-the-global-header/proc-customize-rhdh-global-header.adoc[leveloffset=+1]
 
 
-include::modules/configuring-the-global-header/proc-mount-points.adoc[leveloffset=+1]
+include::modules/configuring-the-global-header/proc-mount-points.adoc[leveloffset=+1]
+
+
+include::modules/configuring-the-global-header/proc-configuring-theme-specific-company-logos-for-global-header.adoc[leveloffset=+1]
+
+include::modules/configuring-the-global-header/proc-configuring-logo-size-global-header.adoc[leveloffset=+1]
+
+include::modules/configuring-the-global-header/con-logo-selection-priority.adoc[leveloffset=+1]

modules/configuring-the-global-header/con-logo-selection-priority.adoc

@@ -0,0 +1,40 @@
+[id="logo-selection-priority_{context}"]
+= Logo selection priority
+
+The logo selection priority determines which logo {product} ({product-very-short}) displays in the *Global Header* and *Sidebar* based on the active theme and your configuration.
+
+{product} uses the following fallback order when selecting logos if you configure multiple logo options or omit theme-specific keys.
+
+.Global Header
+
+*Light theme (priority order):*
+
+. `logo.light` from the `CompanyLogo` configuration
+. `app.branding.fullLogo.light`
+. `logo` from the `CompanyLogo` configuration
+. `app.branding.fullLogo`
+. Default {product-short} light theme logo
+
+*Dark theme (priority order):*
+
+. `logo` from the `CompanyLogo` configuration
+. `app.branding.fullLogo`
+. Default {product-short} dark theme logo
+
+.Sidebar
+
+When you set `app.sidebar.logo` to `true`, the *Sidebar* uses the following priority order:
+
+*Light theme (priority order):*
+
+. `app.branding.fullLogo.light`
+. `app.branding.fullLogo`
+. Default {product-short} light theme icon
+
+*Dark theme (priority order):*
+
+. `app.branding.fullLogo`
+. Default {product-short} dark theme icon
+
+
+

modules/configuring-the-global-header/proc-configuring-logo-size-global-header.adoc

@@ -0,0 +1,47 @@
+
+[id="configuring-logo-size-global-header.adoc_{context}"]
+= Configuring logo size in the Global Header
+
+You can control the display size of your company logo in the *Global Header* by configuring the *width* and *height* properties. You can align the logo's size with your company's branding and ensure consistent presentation within {product} ({product-very-short}).
+
+This configuration applies only to the *Global Header* using the `CompanyLogo` component.
+
+.Prerequisites
+
+You have permissions to modify the {product} configuration.
+
+.Procedure
+
+.Configuring logo size
+Use the red-hat-developer-hub.backstage-plugin-global-header configuration block to set the logo width and height:
+
+[source,yaml]
+----
+- mountPoint: global.header/component
+importName: CompanyLogo
+config:
+  priority: 200
+  props:
+    to: '/'
+    logo:
+      light: <image>
+      dark: <image>
+    width: 300
+    height: 100
+----
+
+You can adjust *width* and *height* to control the pixel size of the logo in the *Global Header*. If you omit these values, the `CompanyLogo` component uses its default sizing.
+
+Use this configuration with theme-specific logos to maintain consistent branding across `light` and `dark` themes.
+
+.Verification
+
+. Apply the configuration in your cluster or local environment.
+. Navigate to the *Global Header* in the {product-short} UI.
+. Confirm that:
+
+.. The logo displays using the specified *width* and *height*.
+.. The correct logo appears based on the active theme (`light` or `dark`).
+
+
+

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

@@ -0,0 +1,57 @@
+[id="configuring-theme-specific-company-logos-for-global-header.adoc_{context}"]
+= Configuring theme-specific company logos for global header and sidebar
+
+You can configure theme-specific company logos in {product} ({product-very-short}) to align with the company's branding and improve visibility across light and dark themes.
+
+The {product-short} theme update changed the *Sidebar* and *Global Header* to use white backgrounds in the light theme.
+Previously, both used black backgrounds in light and dark modes. This change needs theme-aware logos to ensure strong contrast and consistent branding.
+
+.Prerequisites
+You have the required permissions to modify {product} configuration.
+
+.Procedure
+
+.Updating *Global Header* logo
+* Use the `red-hat-developer-hub.backstage-plugin-global-header` configuration block:
+
+[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
+----
+
+.Updating *Sidebar* logo
+
+* Configure the sidebar logos in the `app.branding` section:
+
+[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.
+
+.Verification
+. Switch between light and dark themes in the UI.
+. Confirm that the correct logo displays in both the *Global Header* and *Sidebar* according to the theme.