Quarto: Modifying Colors of the NavBar

Quarto is a static site generator that generates websites (like this blog) from markdown files.

Quarto sites by default use the Bootstrap component library and can be themed by overriding Bootstrap SASS variables as described here.

One of the things I found confusing when trying to theme this blog was what SASS variable to override to change the color of the NavBar on top of every page. I kept trying to change the normal Boootstrap variables, but it didn’t seem to work.

For the changing the color of the NavBar, instead of the Bootstrap variables you should use the ones described here.

More specifically, for this site, I’m using the following .scss file.

/*-- scss:defaults --*/
$black:    #000;
$neon:     #39ff14;
$white:    #FFFF;
$blue:     #0244b8;

$link-color:    $black;

$navbar-bg:     $black;
$navbar-fg:     $white;
$navbar-hl:     $neon;