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
- Install a site using this theme.
- In a Canvas page region, place
system_branding_blockinside a section whose background isbg-black. - 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.svgautomatically. - 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.
Issue fork vartheme_bs5_rightup-3620716
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
Comment #4
rajab natshah✅ Released in vartheme_bs5_rightup 1.0.0-alpha1
Comment #6
rajab natshah