The site header renders white instead of the design's black bar

Problem/Motivation

The RightUp design (VBN stylesheet in Figma, header-desktop frame) has a black header bar: black background, the white "right up" wordmark with its teal "the", white main navigation, a white search icon, and a teal Newsletter button with a black label. The teal live-feed strip sits under it.

On a fresh install the header renders white instead:

• Computed background rgb(255, 255, 255), navigation links rgb(0, 0, 0).
• The dark wordmark (rightup-logo.svg) is used rather than the white one.
• The teal live-feed strip below the header is already correct, which makes the white bar above it read as a mistake rather than a choice.

Cause: config/canvas.page_region.vartheme_bs5_rightup.header.yml sets the region's root section to background_color: none and text_color: auto, and the search icon-toggle to icon_color: text-body.

No theme change is needed. The theme already ships both wordmarks and reveals the right one by CSS: templates/block/block--system-branding-block.html.twig renders brand-logo-on-light and brand-logo-on-dark, and scss/base/vartheme.base.scss hides the light one and shows the dark one inside .bg-black (the $rightup-dark-section-backgrounds list). The white wordmark rightup-logo-white.svg already ships with the theme, and the footer region already uses background_color: bg-black the same way.

Steps to reproduce

mkdir -p my-drupal-cms-rightup && cd my-drupal-cms-rightup
ddev config --project-type=drupal11 --docroot=web
ddev composer create-project drupal/cms
ddev composer config minimum-stability dev
ddev composer require drupal/rightup:1.0.x-dev
ddev drush si -y ../recipes/rightup

Open the front page: the header bar is white with black navigation, and the dark wordmark is used.

Verified on a fresh install of 1.0.x at commit 15edaa2, Drupal CMS 2.1.4 / core 11.4.6, and on a Varbase 11 install.

Proposed resolution

• In config/canvas.page_region.vartheme_bs5_rightup.header.yml set the region's root section to background_color: bg-black and text_color: text-white, and the search icon-toggle to icon_color: text-white. Three values, no theme change, no new component version. bg_edge2edge is already true, so the black spans the viewport while the content stays in the container.
• Verified on a fresh install with the change: the header section renders bg-black text-white bg-edge2edge, the branding block shows rightup-logo-white.svg (brand-logo-on-dark becomes display:flex, brand-logo-on-light display:none), the navigation row and search icon are white, and the Newsletter button is the accent teal rgb(0, 245, 212) with black text, matching the design frame.

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 header becomes the design's black bar on every page, with the white wordmark and white navigation.

Desktop, 1440px viewport width.

Tablet, 768px viewport width.

Mobile, 375px viewport width. The section component documents columns as a tablet and desktop preset that stacks on mobile, so the three header columns stack here; that mobile layout is being handled separately and is not part of this fix.

API changes

• N/A

Data model changes

• N/A

Release notes snippet

• The site header now renders as the design's black bar with the white wordmark, instead of a white bar with the dark wordmark.