navbar menu bg color

[josherrickson]

Description

Hi,

Is there a was to color the background of navbar menus? Specifically I'm trying to avoid the white in dark mode. On https://quarto.org/docs/output-formats/html-themes.html#navigation, I see $navbar-bg and $popover-bg, but neither of them seem to work.

Thanks

[mcanouil]

Could you share a small self-contained "working" (reproducible) example to work with, i.e., a complete Quarto document or a Git repository? Thanks.

You can share a Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).

````qmd
---
title: "Reproducible Quarto Document"
format: html
---

This is a reproducible Quarto document using `format: html`.
It is written in Markdown and contains embedded R code.
When you run the code, it will produce a plot.

```{r}
plot(cars)
```

The end.
````

[josherrickson]

Sure. Here's _quarto.yml:

project:
  type: website
  output-dir: docs

website:
  title: "Example"
  navbar:
    left:
      - text: Menu
        menu:
          - example.qmd

format:
  html:
    theme:
      light: cosmo
      dark: [cosmo, theme-dark.scss]

Here's theme-dark.scss:

/*-- scss:defaults --*/
// Base document colors
$body-bg: #073642;
$body-color: #eee8d5;
$link-color: #268bd2;

// Code blocks
$code-block-bg-alpha: -.8;

// Navbar
$navbar-bg: #002b36;

And here's example.qmd:

This is a reproducible Quarto document using `format: html`.
It is written in Markdown and contains embedded R code.
When you run the code, it will produce a plot.

```{r}
plot(cars)
```

The end.

Run quarto preview, then click to the toggle to dark mode. Expanding the "Menu", note the background color.

[josherrickson]

Nevermind - I found nav-tabs-link-active-color and nav-tabs-link-active-bg on https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss. Thanks anyways.

[mcanouil]

All variables are listed in the _variables.scss, see https://quarto.org/docs/output-formats/html-themes.html#theme-options.
In particular you are interested in:

• https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss#L1235-L1283
• https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss#L1154-L1227