Problem/Motivation

While working on https://www.drupal.org/project/drupal/issues/3188136 and testing, it has been noticed that changing "Header site branding background color" in the Olivero settings to grey or white makes the text unreadable, since it's color is fixed to white in the CSS.
Oliviero header with gray background

Steps to reproduce

On admin/appearance/settings/olivero change Header site branding background color to gray or white. Reload page/

Proposed resolution

Either make a color change conditionally in the header-site-branding.css or introduce a color system.

User interface changes

Black text on both grey and white backgrounds in the header.

CommentFileSizeAuthor
#7 Olivero-Drupal11-nav.png274.67 KBkanchan bhogade
#6 Olivero-Drupal-Demo.png148.56 KBarunkumark
#4 Site-branding.png141.26 KBahsannazir
Screenshot 2024-04-27 at 13.26.02.png56.79 KByevko

Issue fork drupal-3443881

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

YevKo created an issue. See original summary.

yevko’s picture

yevko commented

This is better to be worked on after https://www.drupal.org/project/drupal/issues/3188136 is merged to avoid merge conflicts

ahsannazir made their first commit to this issue’s fork.

ahsannazir’s picture

ahsannazir commented
StatusFileSize
new Site-branding.png141.26 KB

The issue is not reproducible at my end. I see the css already present to handle this scenario.

.site-branding--bg-gray .site-branding__text,
.site-branding--bg-white .site-branding__text {
  color: var(--color--primary-50);
}

ahsannazir’s picture

ahsannazir commented
Status: Active » Needs review

Moving this to NR to confirm if it is working as expected

arunkumark’s picture

arunkumark
Location Coimbatore
commented
StatusFileSize
new Olivero-Drupal-Demo.png148.56 KB

@ahsannazir @YevKo
In the Oliver theme settings, we can able to adjust the Text color based on the chosen Site Branding Color. The settings are available under the Olivero Color Scheme Settings.

There are already predefined colors drop-down and custom text color options also available. Hope this option will help to adjust the Color scheme from the UI.

Settings

kanchan bhogade’s picture

kanchan bhogade commented
StatusFileSize
new Olivero-Drupal11-nav.png274.67 KB

The issue is not reproducible on my end also; It is Working as expected

smustgrave’s picture

smustgrave commented
Status: Needs review » Postponed (maintainer needs more info)

@YevKo as the reporter can you provide additional steps.

smustgrave’s picture

smustgrave commented
Status: Postponed (maintainer needs more info) » Closed (cannot reproduce)
Issue tags: +Bug Smash Initiative

Since there's been no follow up going to close out, if still an issue in D11 please re-open updating summary with steps.