Story

As a RHDH user, I want configurable theme-specific logos, so that the header of the application will align with my preferred theme.

Background

The masthead in PatternFly 6 was updated to have a light colour in the light theme. This is a change from PatternFly 5, where the masthead was always a dark colour in all themes. To align with the Red Hat portfolio, we theme RHDH so that the application resembles the latest version of PatternFly. 

The masthead changes cause issues as we currently assume the logo will always be behind a dark colour. Like other Red Hat products (see CONSOLE-4448), we also need to allow users to specify multiple logos per theme. 

In RHDH, we determine whether the global header has a dark or light coloured background through the theme.(light|dark).palette.rhdh.general.appBarBackgroundScheme property in the theme. In light theme, appBarBackgroundScheme is set to "light," while the value is set to "dark" in dark theme.

Currently, logos can be configured like this:

• Company Logo

  red-hat-developer-hub.backstage-plugin-global-header:      
    mountPoints:        
    - mountPoint: global.header/component          
      importName: CompanyLogo          
      config:            
      priority: 200            
      props:              
        to: '/'              
        logo: #encode_base-64_uri_image
  

• app.branding.fullLogo 

  app:
    branding:
      fullLogo:  #encode_base-64_uri_image
      iconLogo: #encode_base-64_uri_image

   

We proposes support for new methods to configure the logo:

• in the CompanyLogo component 
  • logo.light and logo.dark props 
• in the app-config:
  • app.branding.fullLogo.light and app.branding.fullLogo.dark config will specify the logos to be used in the Sidebar and Global Header's CompanyLogo 
  • app.branding.iconLogo.light and app.branding.iconLogo.dark keys will also be added for both the favicon and for when the sidebar logo is enabled. the favicon (i.e., the tab icon) will not respect the theme set in the RHDH settings, but rather the system colour scheme (that is, the one set by the prefers-color-scheme media query).
• the CompanyLogo prop logo, app.branding.fullLogo, and app.branding.iconLogo can also be strings. in these cases, the specified logo will be used in all themes. this is useful for logos which have sufficient contrast when put against any background colour.

This behaviour will be applied to both the global header CompanyLogo component and the existing sidebar logo. Moreover, the default RHDH logo will also need to be updated for both themes.

Acceptance Criteria

• Support app.branding.fullLogo.(theme) keys for theme-specific Global Header's CompanyLogo and Sidebar.

• appBarBackgroundScheme is used to determine which logo is rendered at runtime in the UI
• The CSS prefers-color-scheme media query determines which favicon to use
• Support logo.(theme) prop in CompanyLogo component.
• The CompanyLogo component should render the logo based on the following priority (highest to lowest):
  1. logo.(theme) / logo (from CompanyLogo props)
  2. app.branding.fullLogo.(theme) / app.branding.fullLogo
  3. RHDH logo

• When app.sidebar.logo is true, the Sidebar should render the logo based on the following priority (highest to lowest):

1. 1. app.branding.fullLogo?.(theme) / app.branding.fullLogo
   2. RHDH logo

• Strings can be passed to fullLogo / iconLogo / CompanyLogo logo, where it will be used regardless of theme. This also helps retain backwards compatibility with how the fullLogo and iconLogo fields worked prior to this update.