feat: support both light and dark logo variants #3023

logonoff · 2025-06-20T14:48:41Z

Description

Modifies app.branding.fullLogo and app.branding.iconLogo to also accept an object that contains light and dark.

RHDH now has this behaviour for the sidebar logo:

if app.branding.fullLogo is a string, it will be shown in both light and dark theme.
if app.branding.fullLogo is an object, the image associated with dark key will be shown in application dark theme, and vice versa

RHDH now has this behaviour for the favicon:

if app.branding.iconLogo is a string, it will be shown in both light and dark theme.
if app.branding.iconLogo is an object, the image associated with dark key will be shown when the system is in dark theme (that is we use the prefers-color-scheme media query), and vice versa

Moreover, the default RHDH app.branding.fullLogo and app.branding.iconLogo has been removed in favour of updating the fallback LogoFull and LogoIcon from Janus branding to RHDH.

This behaviour is similar to other Red Hat products, such as OCP console, as described in openshift/enhancements#1753

demo:

Screencast.From.2025-06-20.10-41-47.mp4

(note the kiwi, banana, and non-official RHDH logo do not reflect the app-config changes I made--the app-configs I changed align with brand)

Which issue(s) does this PR fix

https://issues.redhat.com/browse/RHIDP-7734, https://issues.redhat.com/browse/RHIDP-3227, https://issues.redhat.com/browse/RHIDP-7593, https://issues.redhat.com/browse/RHDHPAI-907

PR acceptance criteria

Please make sure that the following steps are complete:

GitHub Actions are completed and successful
Unit Tests are updated and passing
E2E Tests are updated and passing
Documentation is updated if necessary (requirement for new features)
Add a screenshot if the change is UX/UI related

How to test changes / Special notes to the reviewer

also needs test on RHDH local / cluster

github-actions · 2025-06-20T15:36:17Z

The image is available at:

github-actions · 2025-06-20T18:32:04Z

The image is available at:

github-actions · 2025-06-20T21:23:19Z

The image is available at:

github-actions · 2025-06-20T23:24:24Z

The image is available at:

github-actions · 2025-06-21T01:59:39Z

The image is available at:

github-actions · 2025-06-22T23:56:53Z

The image is available at:

github-actions · 2025-06-23T12:29:36Z

The image is available at:

invincibleJai · 2025-06-23T13:37:51Z

/cc @its-mitesh-kumar
/cc @ciiay

github-actions · 2025-06-23T15:01:41Z

The image is available at:

github-actions · 2025-06-23T17:07:26Z

The image is available at:

github-actions · 2025-06-23T18:33:37Z

The image is available at:

its-mitesh-kumar · 2025-06-25T07:34:39Z

@logonoff , I am adding custom fullLogo, but I am seeing default RHDH Logo. Here is the screenshot

Configuration is below

app:
  sidebar:
    search: false
    settings: false
    logo: false
  branding:
    fullLogo: 'data:image/png;base64,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'

christoph-jerolimov · 2025-06-25T09:57:27Z

Yep, I just wanted report the same. With light and dark it works fine. But when I use a simple string (old format) it doesn't work as expected.

I saw also two other issues, but I expect this should be fixed in the global-header:

The outer div of the company logo has a width of 224px. But the padding on the left has also 24px. I guess the design team inlcudes this 24px in their "it should be 224px wide". So I expect we can go with 200px width on the outer div.

And then I see there the issue that the icon is neigher left or center aligned. The inner logo has a max-width of 150px. Couldn't we just use the full width? Which means 176px at the moment, right?

For this PR it's required that the old configuration is supported. I can create a bug for the sizing/alignment issue if needed.

…rom app config also part of https://issues.redhat.com/browse/RHIDP-3227

github-actions · 2025-06-25T12:54:15Z

The image is available at:

github-actions · 2025-06-25T14:25:50Z

The image is available at:

logonoff · 2025-06-25T19:02:08Z

Yep, I just wanted report the same. With light and dark it works fine. But when I use a simple string (old format) it doesn't work as expected.

The outer div of the company logo has a width of 224px. But the padding on the left has also 24px. I guess the design team inlcudes this 24px in their "it should be 224px wide". So I expect we can go with 200px width on the outer div.

And then I see there the issue that the icon is neigher left or center aligned. The inner logo has a max-width of 150px. Couldn't we just use the full width? Which means 176px at the moment, right?

fixed (using @its-mitesh-kumar's app-config):

fixes an "oepsie woepsie," if you will

includes all the changes in RHDH PR 2893, but a newer version to prevent a runtime error

…nd application launcher includes changes from PR 3039

github-actions · 2025-06-25T20:02:55Z

The image is available at:

christoph-jerolimov

Works great!

Tested it with the latest global-header plugin and changes from the default yaml on a local rhdh.

/lgtm
/approve

openshift-ci · 2025-06-26T07:28:10Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: christoph-jerolimov, ciiay

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

~~OWNERS~~ [christoph-jerolimov]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

openshift-ci · 2025-06-26T08:17:06Z

@logonoff: The following test failed, say /retest to rerun all failed tests or /retest-required to rerun all mandatory failed tests:

Test name	Commit	Details	Required	Rerun command
ci/prow/e2e-tests	`8e3a01e`	link	unknown	`/test e2e-tests`

Full PR test history. Your PR dashboard.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. I understand the commands that are listed here.

* fix(SidebarLogo): support both light and dark variants * fix(favicon): support light and dark variants * feat: replace janus fallback with RHDH, remove duplicated RHDH logo from app config also part of https://issues.redhat.com/browse/RHIDP-3227 * fix: update the theme again, do not target classnames fixes an "oepsie woepsie," if you will * feat(global-header): add CompanyLogo to global-header includes all the changes in RHDH PR 2893, but a newer version to prevent a runtime error * feat(global-header): update default header, enable starred dropdown and application launcher includes changes from PR 3039

openshift-ci bot requested review from albarbaro and dzemanov June 20, 2025 14:48

logonoff force-pushed the light-rhdh branch 2 times, most recently from c5d7f6d to 415797d Compare June 20, 2025 14:56

logonoff changed the title ~~fix(SidebarLogo): support both light and dark variants (wip)~~ fix(SidebarLogo): support both light and dark variants Jun 20, 2025

logonoff changed the title ~~fix(SidebarLogo): support both light and dark variants~~ feat: support both light and dark logo variants Jun 20, 2025

logonoff force-pushed the light-rhdh branch from d904663 to 2a32f94 Compare June 20, 2025 22:46

logonoff force-pushed the light-rhdh branch from 2a32f94 to 13d0ff2 Compare June 21, 2025 01:21

logonoff force-pushed the light-rhdh branch from 13d0ff2 to f6a4f91 Compare June 22, 2025 23:17

logonoff force-pushed the light-rhdh branch from f6a4f91 to dc93429 Compare June 23, 2025 11:52

openshift-ci bot requested review from ciiay and its-mitesh-kumar June 23, 2025 13:37

logonoff force-pushed the light-rhdh branch from c13f073 to 707ded1 Compare June 23, 2025 16:29

logonoff mentioned this pull request Jun 23, 2025

chore: fix branding defaults; bump to 1.6 as default image version; improve docs for consistency with RH style guide (RHIDP-7883, RHIDP-7906) redhat-developer/rhdh-local#53

Merged

5 tasks

logonoff force-pushed the light-rhdh branch 5 times, most recently from 475f65c to 3c66089 Compare June 23, 2025 17:56

openshift-ci bot requested a review from christoph-jerolimov June 25, 2025 07:25

its-mitesh-kumar mentioned this pull request Jun 25, 2025

feat(global-header): adding company logo in global header #2893

Closed

logonoff force-pushed the light-rhdh branch from 43faf6b to a10eda8 Compare June 25, 2025 12:16

openshift-ci bot removed the lgtm label Jun 25, 2025

logonoff added 3 commits June 25, 2025 08:17

fix(SidebarLogo): support both light and dark variants

67e1f59

fix(favicon): support light and dark variants

61b89e2

feat: replace janus fallback with RHDH, remove duplicated RHDH logo f…

c17d8b1

…rom app config also part of https://issues.redhat.com/browse/RHIDP-3227

logonoff force-pushed the light-rhdh branch from a10eda8 to 5712db1 Compare June 25, 2025 12:17

logonoff mentioned this pull request Jun 25, 2025

feat(global-header): update default header, enable starred dropdown and application launcher #3039

Closed

5 tasks

logonoff added 3 commits June 25, 2025 15:24

fix: update the theme again, do not target classnames

22c738f

fixes an "oepsie woepsie," if you will

feat(global-header): add CompanyLogo to global-header

b795a65

includes all the changes in RHDH PR 2893, but a newer version to prevent a runtime error

feat(global-header): update default header, enable starred dropdown a…

8e3a01e

…nd application launcher includes changes from PR 3039

logonoff force-pushed the light-rhdh branch from c2f8d8d to 8e3a01e Compare June 25, 2025 19:25

christoph-jerolimov approved these changes Jun 26, 2025

View reviewed changes

openshift-ci bot assigned christoph-jerolimov Jun 26, 2025

openshift-ci bot added the lgtm label Jun 26, 2025

openshift-ci bot added the approved label Jun 26, 2025

christoph-jerolimov merged commit 84665bd into redhat-developer:main Jun 26, 2025
13 of 14 checks passed

logonoff deleted the light-rhdh branch June 26, 2025 11:20

its-mitesh-kumar mentioned this pull request Jul 7, 2025

RHIDP-7614: Configuring theme-specific company logos for global header and sidebar redhat-developer/red-hat-developers-documentation-rhdh#1255

Closed

its-mitesh-kumar mentioned this pull request Aug 11, 2025

RHIDP-7614: Displaying the preferred username and Company Logo redhat-developer/red-hat-developers-documentation-rhdh#1254

Merged

feat: support both light and dark logo variants #3023

feat: support both light and dark logo variants #3023

Uh oh!

Conversation

logonoff commented Jun 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Which issue(s) does this PR fix

PR acceptance criteria

How to test changes / Special notes to the reviewer

Uh oh!

github-actions bot commented Jun 20, 2025

Uh oh!

github-actions bot commented Jun 20, 2025

Uh oh!

github-actions bot commented Jun 20, 2025

Uh oh!

github-actions bot commented Jun 20, 2025

Uh oh!

github-actions bot commented Jun 21, 2025

Uh oh!

github-actions bot commented Jun 22, 2025

Uh oh!

github-actions bot commented Jun 23, 2025

Uh oh!

invincibleJai commented Jun 23, 2025

Uh oh!

github-actions bot commented Jun 23, 2025

Uh oh!

github-actions bot commented Jun 23, 2025

Uh oh!

github-actions bot commented Jun 23, 2025

Uh oh!

its-mitesh-kumar commented Jun 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

christoph-jerolimov commented Jun 25, 2025

Uh oh!

github-actions bot commented Jun 25, 2025

Uh oh!

github-actions bot commented Jun 25, 2025

Uh oh!

logonoff commented Jun 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Jun 25, 2025

Uh oh!

christoph-jerolimov left a comment

Choose a reason for hiding this comment

Uh oh!

openshift-ci bot commented Jun 26, 2025

Uh oh!

Uh oh!

openshift-ci bot commented Jun 26, 2025

Uh oh!

Uh oh!

logonoff commented Jun 20, 2025 •

edited

Loading

its-mitesh-kumar commented Jun 25, 2025 •

edited

Loading

logonoff commented Jun 25, 2025 •

edited

Loading