Configuring theme-specific company logos for global header and sidebar

Author: GitHub Actions

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

@@ -19,4 +19,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-for-global-header.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

@@ -24,8 +24,9 @@ red-hat-developer-hub.backstage-plugin-global-header:
         priority: 200
         props:
           to: '/'
-          logo: <base64_dark_logo>             # Used in dark theme
-          logoLightTheme: <base64_light_logo>   # Used in light theme
+          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
@@ -35,48 +36,22 @@ red-hat-developer-hub.backstage-plugin-global-header:
 [source,yaml]
 ----
 app:
+  sidebar:
+    search: true
+    settings: true
+    logo: true
   branding:
-    fullLogo: <base64_dark_logo>               # Used in dark theme
-    fullLogoLightTheme: <base64_light_logo>    # Used in light theme
+    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 `app.sidebar.logo` is set to `true`, you must also configure `app.branding.fullLogoLightTheme` to display the correct logo in light theme.
+If you enable `app.sidebar.logo`, ensure you configure `app.branding.fullLogoLightTheme` to display the correct logo in the light theme.
 
-If you do not configure any logos, the *Sidebar* displays the default {product} icon for both light and dark themes.
-
-The `CompanyLogo` component and the Sidebar automatically select the correct logo based on the active theme. The application uses the following order of priority:
-
-*Global Header*
-
-* Light theme (highest to Lowest priority):
-
-. `logoLightTheme` (from CompanyLogo props)
-. `app.branding.fullLogoLightTheme`
-. `logo (from `CompanyLogo` props)
-. `app.branding.fullLogo`
-. Default {product-short} light theme logo
-
-* Dark theme (highest to lowest priority):
-
-. `logo` (from `CompanyLogo` props)
-. `app.branding.fullLogo`
-. Default {product-short} dark theme logo
-
-*Sidebar* (When `app.sidebar.logo` is set to true)
-
-* Light theme:
-
-. `app.branding.fullLogoLightTheme`
-. `app.branding.fullLogo`
-. Default {product-short} light theme icon
-
-* Dark Theme:
-
-. `app.branding.fullLogo`
-. Default {product-short} dark theme icon
+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 appears in both the *Global Header* and *Sidebar* according to the theme.
+. Confirm that the correct logo displays in both the *Global Header* and *Sidebar* according to the theme.