How do I override the navbar background color using _brand.yml styling?

[coatless]

Description

I've been trying to change the navigation bar for a Quarto webpage using _brand.yml on Quarto pre-release v1.6.33 to no avail. It seems stuck at #517699 (blue variant), c.f.

Website: https://stanford-brand-yml.github.io/quarto-branded-website/
MWE/Code: https://github.com/stanford-brand-yml/quarto-branded-website

I've tried the suggestion at: https://prerelease.quarto.org/docs/authoring/brand.html#in-scss

The other use cases of text elements and supported fields (under Typography?) omit setting a navbar color.

Relevant lines in the MWE:

_brand.yml

color:
  palette:
    cardinal: "#8C1515"

_custom.scss

/*-- scss:defaults --*/
$navbar-bg: $brand-cardinal; 

_quarto.yml

format:
  html:
    toc: true
    theme:
      - custom.scss

# Use the brand file for all documents in the project
brand: _brand.yml

Note

Background color for the navbar seems to be set in:

quarto-cli/src/resources/formats/html/bootstrap/_bootstrap-variables.scss

Lines 63 to 67 in 8e51fc2

	$navbar-default: if(
	variable-exists(theme),
	if(variable-exists(primary), $primary, #517699),
	#517699
	);

[gadenbuie]

brand.yml includes a defaults section where you'll be able to make these kinds of output-specific choices. In fact, I have this exact type of customization in the brand.yml website itself (the black navbar background).

The way I've envisioned making this kind of change is through defaults.bootstrap:

defaults:
  bootstrap:
    defaults:
      navbar-bg: $brand-cardinal

It's not currently implemented in Quarto exactly as above (but will be if #11378 is merged). In the current pre-release of Quarto, you can use this formulation:

defaults:
  bootstrap:
    navbar-bg: $brand-cardinal

Just be sure to leave yourself a TODO note to revisit if the syntax changes.

I should also note that it looks like some of what you tried should have worked. I do think it'd be useful for someone from the Quarto to take a look at your reprex.

[coatless]

Mmm, the code cells are the same? Is this "The Office" picture difference test? 😉

I swear I looked closely at the brand-yml website, but I didn't find the rule change (the brand-yml-theme.scss is modifying code cells and set the theme explicitly to brand _quarto.yml). Though, it's right there at the end of the _brand.yml file.

defaults:
  bootstrap:
    enable-rounded: false
    navbar-bg: $brand-black

Thanks!

[coatless]

Works nicely by the way!

[gadenbuie]

@coatless Sorry for the broken copy-pasta! I'm glad you found the original example. Currently defaults.bootstrap takes a list of variables, but I'm hoping it will be defaults.bootstrap.defaults in the upcoming release.

[cscheid]

@coatless This is really excellent - I recognized the Stanford brand identity right away, even before I looked at the URL! I'm excited to see what y'all will build with this.