Problem/Motivation

The theme ships a black-ink wordmark and a white one, but only the black one can ever reach the site branding block. A Canvas section with a dark background therefore renders an invisible logo, and there is no way to fix it from configuration.

hook_preprocess_block() sets the branding block's logo unconditionally to the black-ink file:

function vartheme_bs5_rightup_preprocess_block(&$variables) {
  if (($variables['plugin_id'] ?? '') === 'system_branding_block'
    && theme_get_setting('logo.use_default', 'vartheme_bs5_rightup')) {
    $variables['site_logo'] = ... . '/rightup-logo.svg';
  }
}

The white variant is exposed only to page templates, in hook_preprocess_page():

$variables['logo_white'] = ... . '/rightup-logo-white.svg';

So a page region that places system_branding_block inside a dark section has no white path. Verified by computed style on a header section with background_color: bg-black: the rendered img.brand-logo-image is rightup-logo.svg against an effective background of rgb(0, 0, 0). The two files differ only in ink:

rightup-logo.svg        fill="black"   (7 paths)  md5 0f3e04a25043f31855cbb9421c5f61e2
rightup-logo-white.svg  fill="white"   (7 paths)  md5 7894bab05415f4df4a3509cdedca9da6

There is no CSS compensation in the theme either, so nothing recovers the contrast.

Steps to reproduce

  1. Install a site using this theme.
  2. In a Canvas page region, place system_branding_block inside a section whose background is bg-black.
  3. View the page. The wordmark is black ink on a black background and is effectively invisible.

Proposed resolution

Give the branding block a way to render the white wordmark. Options worth weighing:

  • A theme setting or block-level variant so a placement can ask for the white mark.
  • Resolve it from the section's own background, so a dark context picks rightup-logo-white.svg automatically.
  • Ship a single wordmark that uses currentColor, so the surrounding text colour drives it and Bootstrap's text utilities work as expected.

The last option is the most Bootstrap-native and would remove the need for two files, but it changes the asset, so it is the maintainer's call.

Until this exists, a recipe cannot ship a dark header that uses the branding block. That is the practical blocker.

Remaining tasks

  • ✅ File an issue
  • ❌ Addition/Change/Update/Fix
  • ❌ Testing to ensure no regression
  • ➖ Automated unit/functional testing coverage
  • ➖ Developer Documentation support
  • ➖ User Guide Documentation support
  • ❌ UX/UI designer responsibilities
  • ❌ Accessibility and Readability
  • ❌ Reviewed by a human
  • ❌ Code review by maintainers
  • ❌ Full testing and approval
  • ❌ Credit contributors
  • ❌ Review with the product owner
  • ✅ Update Release Notes
  • ✅ Release

User interface changes

  • The site wordmark stays legible when the branding block sits on a dark background.

API changes

  • Depends on the option chosen. A new theme setting or a new prop would be an addition.

Data model changes

  • N/A

Release notes snippet

  • The site branding block can render the white wordmark, so a header or footer on a dark background keeps a legible logo.
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:

Comments

rajab natshah created an issue. See original summary.

  • rajab natshah committed 331128e4 on 1.0.x
    fix: #3620716 Render the white wordmark in the site branding block on...
rajab natshah’s picture

Assigned: rajab natshah » Unassigned
Issue summary: View changes
Status: Active » Fixed
Issue tags: +vartheme_bs5_rightup-1.0.0-alpha1

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

rajab natshah’s picture

Issue summary: View changes

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.