From 13cc995d39ecfc2b3fd7ce6249f5b34d61fb510d Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Wed, 2 Jul 2025 16:16:13 +0300 Subject: [PATCH 1/4] Configuring theme-specific company logos for global header and sidebar --- ...ssembly-configuring-the-global-header.adoc | 5 +- ...cific-company-logos-for-global-header.adoc | 82 +++++++++++++++++++ 2 files changed, 86 insertions(+), 1 deletion(-) create mode 100644 modules/configuring-the-global-header/proc-configuring-theme-specific-company-logos-for-global-header.adoc diff --git a/assemblies/assembly-configuring-the-global-header.adoc b/assemblies/assembly-configuring-the-global-header.adoc index 93badc6698..5c8cf9db7b 100644 --- a/assemblies/assembly-configuring-the-global-header.adoc +++ b/assemblies/assembly-configuring-the-global-header.adoc @@ -16,4 +16,7 @@ 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] \ No newline at end of file +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] \ No newline at end of file diff --git a/modules/configuring-the-global-header/proc-configuring-theme-specific-company-logos-for-global-header.adoc b/modules/configuring-the-global-header/proc-configuring-theme-specific-company-logos-for-global-header.adoc new file mode 100644 index 0000000000..605ff5c73a --- /dev/null +++ b/modules/configuring-the-global-header/proc-configuring-theme-specific-company-logos-for-global-header.adoc @@ -0,0 +1,82 @@ +[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 RHDH 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: # Used in dark theme + logoLightTheme: # Used in light theme +---- + +.Updating *Sidebar* logo + +* Configure the sidebar logos in the `app.branding` section: + +[source,yaml] +---- +app: + branding: + fullLogo: # Used in dark theme + fullLogoLightTheme: # Used in light theme +---- + +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 do not configure any logos, the *Sidebar* displays the default RHDH 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 RHDH light theme logo + +* Dark theme (highest to lowest priority): + +. `logo` (from `CompanyLogo` props) +. `app.branding.fullLogo` +. Default RHDH dark theme logo + +*Sidebar* (When `app.sidebar.logo` is set to true) + +* Light theme: + +. `app.branding.fullLogoLightTheme` +. `app.branding.fullLogo` +. Default RHDH light theme icon + +* Dark Theme: + +. `app.branding.fullLogo` +. Default RHDH dark theme icon + +.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. \ No newline at end of file From eb51072f1ebb629cc520362cf9e41db7d3c03465 Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Wed, 2 Jul 2025 17:39:07 +0300 Subject: [PATCH 2/4] Configuring theme-specific company logos for global header and sidebar --- ...eme-specific-company-logos-for-global-header.adoc | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/modules/configuring-the-global-header/proc-configuring-theme-specific-company-logos-for-global-header.adoc b/modules/configuring-the-global-header/proc-configuring-theme-specific-company-logos-for-global-header.adoc index 605ff5c73a..c461cc949b 100644 --- a/modules/configuring-the-global-header/proc-configuring-theme-specific-company-logos-for-global-header.adoc +++ b/modules/configuring-the-global-header/proc-configuring-theme-specific-company-logos-for-global-header.adoc @@ -7,7 +7,7 @@ The {product-short} theme update changed the *Sidebar* and *Global Header* to us 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 RHDH configuration. +You have the required permissions to modify {product} configuration. .Procedure @@ -44,7 +44,7 @@ By default, if you do not provide `fullLogoLightTheme` or `logoLightTheme`, the 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 do not configure any logos, the *Sidebar* displays the default RHDH icon for both light and dark themes. +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: @@ -56,13 +56,13 @@ The `CompanyLogo` component and the Sidebar automatically select the correct log . `app.branding.fullLogoLightTheme` . `logo (from `CompanyLogo` props) . `app.branding.fullLogo` -. Default RHDH light theme logo +. Default {product-short} light theme logo * Dark theme (highest to lowest priority): . `logo` (from `CompanyLogo` props) . `app.branding.fullLogo` -. Default RHDH dark theme logo +. Default {product-short} dark theme logo *Sidebar* (When `app.sidebar.logo` is set to true) @@ -70,12 +70,12 @@ The `CompanyLogo` component and the Sidebar automatically select the correct log . `app.branding.fullLogoLightTheme` . `app.branding.fullLogo` -. Default RHDH light theme icon +. Default {product-short} light theme icon * Dark Theme: . `app.branding.fullLogo` -. Default RHDH dark theme icon +. Default {product-short} dark theme icon .Verification . Switch between light and dark themes in the UI. From 12028597c6ee4e35a9224865887d35ffedb55cba Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Mon, 7 Jul 2025 15:34:07 +0300 Subject: [PATCH 3/4] Configuring theme-specific company logos for global header and sidebar --- ...ssembly-configuring-the-global-header.adoc | 6 ++- .../con-logo-selection-priority.adoc | 40 +++++++++++++++ ...c-configuring-logo-size-global-header.adoc | 47 +++++++++++++++++ ...cific-company-logos-for-global-header.adoc | 51 +++++-------------- 4 files changed, 105 insertions(+), 39 deletions(-) create mode 100644 modules/configuring-the-global-header/con-logo-selection-priority.adoc create mode 100644 modules/configuring-the-global-header/proc-configuring-logo-size-global-header.adoc diff --git a/assemblies/assembly-configuring-the-global-header.adoc b/assemblies/assembly-configuring-the-global-header.adoc index 5c8cf9db7b..73499b45aa 100644 --- a/assemblies/assembly-configuring-the-global-header.adoc +++ b/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] \ No newline at end of file +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] diff --git a/modules/configuring-the-global-header/con-logo-selection-priority.adoc b/modules/configuring-the-global-header/con-logo-selection-priority.adoc new file mode 100644 index 0000000000..5b8c527e95 --- /dev/null +++ b/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 + + + diff --git a/modules/configuring-the-global-header/proc-configuring-logo-size-global-header.adoc b/modules/configuring-the-global-header/proc-configuring-logo-size-global-header.adoc new file mode 100644 index 0000000000..4d60669ccb --- /dev/null +++ b/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: + dark: + 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`). + + + diff --git a/modules/configuring-the-global-header/proc-configuring-theme-specific-company-logos-for-global-header.adoc b/modules/configuring-the-global-header/proc-configuring-theme-specific-company-logos-for-global-header.adoc index c461cc949b..c3dd061cc4 100644 --- a/modules/configuring-the-global-header/proc-configuring-theme-specific-company-logos-for-global-header.adoc +++ b/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: # Used in dark theme - logoLightTheme: # Used in light theme + 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 ---- .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: # Used in dark theme - fullLogoLightTheme: # Used in light theme + fullLogo: or + dark: + light: ---- 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. \ No newline at end of file +. Confirm that the correct logo displays in both the *Global Header* and *Sidebar* according to the theme. \ No newline at end of file From d4ab361e68bd40681977a77a16a72849b8d10ab7 Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Fri, 8 Aug 2025 17:58:27 +0200 Subject: [PATCH 4/4] Configuring theme-specific company logos for global header and sidebar --- ...ssembly-configuring-the-global-header.adoc | 6 +-- .../con-logo-selection-priority.adoc | 40 ---------------- ...c-configuring-logo-size-global-header.adoc | 47 ------------------- ...iguring-theme-specific-company-logos.adoc} | 38 +++++++-------- 4 files changed, 18 insertions(+), 113 deletions(-) delete mode 100644 modules/configuring-the-global-header/con-logo-selection-priority.adoc delete mode 100644 modules/configuring-the-global-header/proc-configuring-logo-size-global-header.adoc rename modules/configuring-the-global-header/{proc-configuring-theme-specific-company-logos-for-global-header.adoc => proc-configuring-theme-specific-company-logos.adoc} (57%) diff --git a/assemblies/assembly-configuring-the-global-header.adoc b/assemblies/assembly-configuring-the-global-header.adoc index 73499b45aa..2683fd1135 100644 --- a/assemblies/assembly-configuring-the-global-header.adoc +++ b/assemblies/assembly-configuring-the-global-header.adoc @@ -19,8 +19,4 @@ 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-logo-size-global-header.adoc[leveloffset=+1] - -include::modules/configuring-the-global-header/con-logo-selection-priority.adoc[leveloffset=+1] +include::modules/configuring-the-global-header/proc-configuring-theme-specific-company-logos.adoc[leveloffset=+1] diff --git a/modules/configuring-the-global-header/con-logo-selection-priority.adoc b/modules/configuring-the-global-header/con-logo-selection-priority.adoc deleted file mode 100644 index 5b8c527e95..0000000000 --- a/modules/configuring-the-global-header/con-logo-selection-priority.adoc +++ /dev/null @@ -1,40 +0,0 @@ -[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 - - - diff --git a/modules/configuring-the-global-header/proc-configuring-logo-size-global-header.adoc b/modules/configuring-the-global-header/proc-configuring-logo-size-global-header.adoc deleted file mode 100644 index 4d60669ccb..0000000000 --- a/modules/configuring-the-global-header/proc-configuring-logo-size-global-header.adoc +++ /dev/null @@ -1,47 +0,0 @@ - -[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: - dark: - 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`). - - - diff --git a/modules/configuring-the-global-header/proc-configuring-theme-specific-company-logos-for-global-header.adoc b/modules/configuring-the-global-header/proc-configuring-theme-specific-company-logos.adoc similarity index 57% rename from modules/configuring-the-global-header/proc-configuring-theme-specific-company-logos-for-global-header.adoc rename to modules/configuring-the-global-header/proc-configuring-theme-specific-company-logos.adoc index c3dd061cc4..a7f28b15af 100644 --- a/modules/configuring-the-global-header/proc-configuring-theme-specific-company-logos-for-global-header.adoc +++ b/modules/configuring-the-global-header/proc-configuring-theme-specific-company-logos.adoc @@ -1,19 +1,20 @@ -[id="configuring-theme-specific-company-logos-for-global-header.adoc_{context}"] -= Configuring theme-specific company logos for global header and sidebar +[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 the company's branding and improve visibility across light and dark themes. +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 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. +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 the required permissions to modify {product} configuration. +* You have sufficient permissions to modify {product} configuration. .Procedure -.Updating *Global Header* logo -* Use the `red-hat-developer-hub.backstage-plugin-global-header` configuration block: - +* 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: @@ -29,10 +30,9 @@ red-hat-developer-hub.backstage-plugin-global-header: light: # Used in light theme ---- -.Updating *Sidebar* logo - -* Configure the sidebar logos in the `app.branding` section: - +* Configure the *Sidebar* logo in the `app.branding` section as shown in the following example: ++ +.Example *Sidebar* logo [source,yaml] ---- app: @@ -45,13 +45,9 @@ app: 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. - -.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. \ No newline at end of file ++ +If you skip configuration, the *Sidebar* displays the default {product} icon for both light and dark themes. \ No newline at end of file