diff --git a/assemblies/assembly-configuring-the-global-header.adoc b/assemblies/assembly-configuring-the-global-header.adoc index 9f17ac8ea2..c2443da73b 100644 --- a/assemblies/assembly-configuring-the-global-header.adoc +++ b/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] \ No newline at end of file +include::modules/configuring-the-global-header/proc-enabling-quicklinks-starred-items-after-upgrade.adoc[leveloffset=+1] diff --git a/modules/configuring-the-global-header/proc-configuring-theme-specific-company-logos.adoc b/modules/configuring-the-global-header/proc-configuring-theme-specific-company-logos.adoc new file mode 100644 index 0000000000..a7f28b15af --- /dev/null +++ b/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: or # Use a single image string for both themes or an object with theme-specific logos + dark: # Used in dark theme + light: # 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: or + dark: + light: +---- ++ +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. \ No newline at end of file