VPNavBar has hardcoded background color, prevents theming

[fvsch]

Describe the bug

The VPNavBar component sets a background-color on one of its containers with a rgba() value that is not inherited from the theme's CSS variables.

As a result if you customize the value of --vp-c-bg (shown behind the navbar), you end up with mismatched colors.

Reproduction

1. Go to https://vitepress.vuejs.org/guide/what-is-vitepress on a desktop browser (window width >= 960px, but it looks particularly bad at width >= 1500px).
2. Scroll down a bit so that there is some page content behind the navbar.
3. Open DevTools and set --vp-c-bg: darkslategray; on the html element.

Result: the background color of the navbar and of the page content don't match.

Expected behavior

The background color of the navbar and of the page content should match.

So far I've worked around this issue with this CSS:

/*
 * Fix hardcoded background color of the Nav component.
 * Needs to be a color that matches --vp-c-bg but with partial opacity (for the glass effect).
 */
@media (min-width: 960px) {
  :root.dark .VPNav.no-sidebar,
  :root.dark .VPNavBar.has-sidebar .content {
    background-color: hsl(220 14% 13% / 0.7);
  }
}

I haven't found a CSS fix where the opaque --vp-c-bg variable can be used directly. Using a pseudo-element to make a fake background doesn't seem to work, though maybe I’m missing a trick.

My suggestion is to introduce a CSS variable that is either generic or specific to the navbar, something like:

:root {
  --vp-c-bg-a70: #ffffffb3;
}
.dark {
  --vp-c-bg-a70: #1a1a1ab3;
}

or more specific to the navbar:

:root {
  --vp-nav-glass-bg: #ffffffb3;
}
.dark {
  --vp-nav-glass-bg: #1a1a1ab3;
}

This second option might be used by people who want to opt out of the glass effect, by setting it to --vp-nav-glass-bg: var(--vp-c-bg); (though I have not confirmed that using an opaque color removes the perf issues described in #1049).

It might also be possible to compute a background color by defaulting to using --vp-c-bg first (opaque), then at runtime use getComputedStyle(element).getPropertyValue('background-color'), parse the result and add 0.7 opacity.

System Info

[Not relevant here. See the reproduction steps, which use the production Vitepress docs.]

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[mishushakov]

You can also set the .dark navbar background to fully transparent, the backdrop-filter blur will achieve the same effect