Can't read navbar dropdown menu and tool items in dark mode

I have:

• searched the issue tracker for similar issues
• installed the latest version of Quarto CLI
• formatted my issue following the Bug Reports guide

Bug description

With a custom dark theme, for both drop down menu items and drop down tool items, the background of the items on the menu are dark (as expected), but when hovered over, the items by default get a light background colour. Because the text by default is light, this makes the text unreadable.

Menu item without hover:

Menu item with hover:

It is possible to fix both of these with additional custom CSS, i.e.

.navbar-nav .dropdown-menu .dropdown-item:hover,
.dropdown-item.quarto-navbar-tools-item:hover {
    background-color: #200F48;
}

but I think this is something that toggling to dark mode should adjust automatically with a colour derived from $body-bg.

I have checked on both the release and the latest pre-release (1.8.18) - the issue occurs on both.

Steps to reproduce

The minimal reprex repo is at https://github.com/EllaKaye/navbar-enhancement and the corresponding site is at https://ellakaye.github.io/navbar-enhancement/.

The issue occurs both on the dropdown from the "Other" navbar item, and from the GitHub logo.

This is _quarto.yml:

project:
  type: website

website:
  title: "navbar-enhancement"
  navbar:
    left:
      - href: index.qmd
        text: Home
      - text: Other
        menu:
          - about.qmd
    tools:
      - icon: github
        menu:
          - text: Source Code
            url: https://github.com/EllaKaye/navbar-enhancement
          - text: Report a Bug
            url: https://github.com/EllaKaye/navbar-enhancement/issues


format:
  html:
    theme:
      light: theme-light.scss
      dark: theme-dark.scss

And this is theme_dark.scss:

/*-- scss:defaults --*/

$dark: #0C0721;

$body-bg: $dark;
$body-color: white;

and this is theme_light.scss:

/*-- scss:defaults --*/

$dark: #0C0721;

$body-color: $dark;

Actual behavior

Hovering over a navbar dropdown menu or tool item in dark mode from a custom theme gives it a light background colour.

Expected behavior

Hovering over a navbar dropdown menu or tool item in dark mode from a custom theme should give it a dark background colour, derived from $body-bg.

Your environment

• IDE: 2025.07.0 build 204
• MacOS: 15.6

Quarto check output

Quarto 1.7.32
[✓] Checking environment information...
      Quarto cache location: /Users/u2175871/Library/Caches/quarto
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.6.3: OK
      Dart Sass version 1.85.1: OK
      Deno version 1.46.3: OK
      Typst version 0.13.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.7.32
      Path: /Applications/quarto/bin

[✓] Checking tools....................OK
      TinyTeX: v2022.11
      Chromium: (not installed)

[✓] Checking LaTeX....................OK
      Using: TinyTex
      Path: /Users/u2175871/Library/TinyTeX/bin/universal-darwin
      Version: 2022

[✓] Checking Chrome Headless....................OK
      Using: Chrome found on system
      Path: /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
      Source: MacOS known location

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
      Version: 3.12.1
      Path: /Users/u2175871/.pyenv/versions/3.12.1/bin/python3
      Jupyter: 5.7.2
      Kernels: python3

(|) Checking Jupyter engine render....Traceback (most recent call last):
  File "/Applications/quarto/share/jupyter/jupyter.py", line 21, in <module>
    from notebook import notebook_execute, RestartKernel
  File "/Applications/quarto/share/jupyter/notebook.py", line 15, in <module>
    from yaml import safe_load as parse_string
ModuleNotFoundError: No module named 'yaml'
[✓] Checking Jupyter engine render....OK

This issue is still present on the latest pre-release (1.8.18).