Skip to content

Commit ec88c26

Browse files
GitHub Actionsjmagak
GitHub Actions
authored and
jmagak
committed
Configuring theme-specific company logos for global header and sidebar
1 parent 3d2de5a commit ec88c26

File tree

4 files changed

+105
-39
lines changed

4 files changed

+105
-39
lines changed

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,4 +19,8 @@ include::modules/configuring-the-global-header/proc-customize-rhdh-global-header
1919
include::modules/configuring-the-global-header/proc-mount-points.adoc[leveloffset=+1]
2020

2121

22-
include::modules/configuring-the-global-header/proc-configuring-theme-specific-company-logos-for-global-header.adoc[leveloffset=+1]
22+
include::modules/configuring-the-global-header/proc-configuring-theme-specific-company-logos-for-global-header.adoc[leveloffset=+1]
23+
24+
include::modules/configuring-the-global-header/proc-configuring-logo-size-global-header.adoc[leveloffset=+1]
25+
26+
include::modules/configuring-the-global-header/con-logo-selection-priority.adoc[leveloffset=+1]

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

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
[id="logo-selection-priority_{context}"]
2+
= Logo selection priority
3+
4+
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.
5+
6+
{product} uses the following fallback order when selecting logos if you configure multiple logo options or omit theme-specific keys.
7+
8+
.Global Header
9+
10+
*Light theme (priority order):*
11+
12+
. `logo.light` from the `CompanyLogo` configuration
13+
. `app.branding.fullLogo.light`
14+
. `logo` from the `CompanyLogo` configuration
15+
. `app.branding.fullLogo`
16+
. Default {product-short} light theme logo
17+
18+
*Dark theme (priority order):*
19+
20+
. `logo` from the `CompanyLogo` configuration
21+
. `app.branding.fullLogo`
22+
. Default {product-short} dark theme logo
23+
24+
.Sidebar
25+
26+
When you set `app.sidebar.logo` to `true`, the *Sidebar* uses the following priority order:
27+
28+
*Light theme (priority order):*
29+
30+
. `app.branding.fullLogo.light`
31+
. `app.branding.fullLogo`
32+
. Default {product-short} light theme icon
33+
34+
*Dark theme (priority order):*
35+
36+
. `app.branding.fullLogo`
37+
. Default {product-short} dark theme icon
38+
39+
40+

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

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
2+
[id="configuring-logo-size-global-header.adoc_{context}"]
3+
= Configuring logo size in the Global Header
4+
5+
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}).
6+
7+
This configuration applies only to the *Global Header* using the `CompanyLogo` component.
8+
9+
.Prerequisites
10+
11+
You have permissions to modify the {product} configuration.
12+
13+
.Procedure
14+
15+
.Configuring logo size
16+
Use the red-hat-developer-hub.backstage-plugin-global-header configuration block to set the logo width and height:
17+
18+
[source,yaml]
19+
----
20+
- mountPoint: global.header/component
21+
importName: CompanyLogo
22+
config:
23+
priority: 200
24+
props:
25+
to: '/'
26+
logo:
27+
light: <image>
28+
dark: <image>
29+
width: 300
30+
height: 100
31+
----
32+
33+
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.
34+
35+
Use this configuration with theme-specific logos to maintain consistent branding across `light` and `dark` themes.
36+
37+
.Verification
38+
39+
. Apply the configuration in your cluster or local environment.
40+
. Navigate to the *Global Header* in the {product-short} UI.
41+
. Confirm that:
42+
43+
.. The logo displays using the specified *width* and *height*.
44+
.. The correct logo appears based on the active theme (`light` or `dark`).
45+
46+
47+

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

Lines changed: 13 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,9 @@ red-hat-developer-hub.backstage-plugin-global-header:
2424
priority: 200
2525
props:
2626
to: '/'
27-
logo: <base64_dark_logo> # Used in dark theme
28-
logoLightTheme: <base64_light_logo> # Used in light theme
27+
logo: <string> or <object> # Use a single image string for both themes or an object with theme-specific logos
28+
dark: <base64_dark_logo> # Used in dark theme
29+
light: <base64_light_logo> # Used in light theme
2930
----
3031

3132
.Updating *Sidebar* logo
@@ -35,48 +36,22 @@ red-hat-developer-hub.backstage-plugin-global-header:
3536
[source,yaml]
3637
----
3738
app:
39+
sidebar:
40+
search: true
41+
settings: true
42+
logo: true
3843
branding:
39-
fullLogo: <base64_dark_logo> # Used in dark theme
40-
fullLogoLightTheme: <base64_light_logo> # Used in light theme
44+
fullLogo: <string > or <object>
45+
dark: <base64_dark_logo>
46+
light: <base64_light_logo>
4147
----
4248

4349
By default, if you do not provide `fullLogoLightTheme` or `logoLightTheme`, the application uses `logo` or `fullLogo` for both themes.
4450

45-
If `app.sidebar.logo` is set to `true`, you must also configure `app.branding.fullLogoLightTheme` to display the correct logo in light theme.
51+
If you enable `app.sidebar.logo`, ensure you configure `app.branding.fullLogoLightTheme` to display the correct logo in the light theme.
4652

47-
If you do not configure any logos, the *Sidebar* displays the default {product} icon for both light and dark themes.
48-
49-
The `CompanyLogo` component and the Sidebar automatically select the correct logo based on the active theme. The application uses the following order of priority:
50-
51-
*Global Header*
52-
53-
* Light theme (highest to Lowest priority):
54-
55-
. `logoLightTheme` (from CompanyLogo props)
56-
. `app.branding.fullLogoLightTheme`
57-
. `logo (from `CompanyLogo` props)
58-
. `app.branding.fullLogo`
59-
. Default {product-short} light theme logo
60-
61-
* Dark theme (highest to lowest priority):
62-
63-
. `logo` (from `CompanyLogo` props)
64-
. `app.branding.fullLogo`
65-
. Default {product-short} dark theme logo
66-
67-
*Sidebar* (When `app.sidebar.logo` is set to true)
68-
69-
* Light theme:
70-
71-
. `app.branding.fullLogoLightTheme`
72-
. `app.branding.fullLogo`
73-
. Default {product-short} light theme icon
74-
75-
* Dark Theme:
76-
77-
. `app.branding.fullLogo`
78-
. Default {product-short} dark theme icon
53+
If you skip configuration, the *Sidebar* displays the default {product} icon for both light and dark themes.
7954

8055
.Verification
8156
. Switch between light and dark themes in the UI.
82-
. Confirm that the correct logo appears in both the *Global Header* and *Sidebar* according to the theme.
57+
. Confirm that the correct logo displays in both the *Global Header* and *Sidebar* according to the theme.

0 commit comments

Comments
 (0)