Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

Dark mode does not set `data-bs-theme`, so Bootstrap colour-mode styles never apply

Offen Anfängerfreundlich
  • Stimmt etwas nicht?
#15,060 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Anfängerfreundlichkeit
62/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
bootstrap, javascript, scss
Bereich
accessibility, frontend

Rechercherichtung

Die Navbar setzt bereits data-bs-theme="dark" auf ihrem eigenen Element in nav-before-body.ejs, beginne also dort, um das Muster zu sehen. Finde dann den Code für den Dark-Mode-Umschalter, der quarto-dark zum Body hinzufügt, und setze data-bs-theme an derselben Stelle auf html, beim Zurückschalten mit light. Reproduziere mit dark.scss und index.qmd aus dem Issue, schalte den Modus um und prüfe, ob .btn-close den Invert-Filter erhält. Fertig ist es, wenn das Attribut dem Umschalten folgt und die Schließen-Buttons auf einer dunklen Fläche sichtbar sind.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

accessibility bootstrap dark-mode enhancement
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

In dark mode, Quarto marks the page with body.quarto-dark and swaps the stylesheet bundle, but it never sets data-bs-theme="dark".
Bootstrap 5.3 keys its colour-mode rules on that attribute, so Bootstrap components keep their light-mode look on a dark page.

The clearest case is .btn-close.
By default its icon is a black SVG, and Bootstrap only lightens it under [data-bs-theme="dark"].
On a dark surface such as a modal, an offcanvas or a toast, the close button is close to invisible.

This is also an accessibility problem in Quarto's own output.
In a dashboard with light and dark themes and axe: output: document, the accessibility report panel stays white in dark mode, while its close button takes the dark theme's white icon.
The close button cannot be seen.
Setting data-bs-theme="dark" by hand makes it show again.

A dark dashboard with the white Accessibility Report panel open on the right. No close button is visible in the panel header.

The navbar already sets data-bs-theme="dark" on its own element in nav-before-body.ejs, but nothing sets it for the page.

Steps to reproduce

dark.scss:

/*-- scss:defaults --*/
$body-bg: #1e1e2e;
$body-color: #f0f0f0;

index.qmd:

---
title: "Dark mode and Bootstrap colour modes"
format:
  html:
    theme:
      light: cosmo
      dark: [cosmo, dark.scss]
---

```{=html}
<div class="modal-content p-3" style="max-width:320px">
  <div class="d-flex justify-content-between align-items-center">
    <strong>Modal header</strong>
    <button type="button" class="btn-close" aria-label="Close"></button>
  </div>
</div>
<div class="alert alert-warning alert-dismissible mt-3" role="alert" style="max-width:420px">
  A dismissible alert.
  <button type="button" class="btn-close" aria-label="Close"></button>
</div>
```

Render, open the page, and switch to dark mode with the toggle.

Actual behavior

After the switch:

  • body has the class quarto-dark.
  • document.documentElement.getAttribute("data-bs-theme") is null.
  • .btn-close keeps the black icon (fill='%23000') with no filter, so it is barely visible on the dark page.
  • .alert-warning keeps its light tint, rgb(255, 227, 209).
Expected behavior

Dark mode sets data-bs-theme="dark" on <html>, and light mode sets it back to light, so Bootstrap's colour-mode rules apply.
The close button then turns light on dark surfaces.
Setting the attribute by hand in the browser after the switch gives .btn-close the filter invert(1) grayscale(1) brightness(2), which comes from the [data-bs-theme=dark] .btn-close rule already in the compiled dark bundle.

The missing attribute may also explain other dark-mode reports, such as #13173 (navbar dropdown hover) and #13195 (tooltip contrast).

Your environment
  • IDE: none, rendered from the command line.
  • OS: macOS 27.0.
Quarto check output
quarto check

Quarto 99.9.9

[✓] Checking environment information...
      Quarto cache location: /Users/mcanouil/Library/Caches/quarto
      Project: none found (single-file mode)

[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.10.0: OK
      Dart Sass version 1.101.0: OK
      Deno version 2.7.14: OK
      Typst version 0.15.1: OK

[✓] Checking versions of quarto dependencies......OK

[✓] Checking Quarto installation......OK
      Version: 99.9.9
      commit: b86f98d382940bef6c65f37ea0bdfba844f19b6d
      Path: /Users/mcanouil/Projects/quarto-dev/quarto-cli/package/dist/bin

[✓] Checking tools....................OK
      TinyTeX: v2026.07
      Chrome Headless Shell: (not installed)
      VeraPDF: (not installed)

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

[✓] Checking Chrome Headless....................OK
      Using: Chrome from QUARTO_CHROMIUM
      Path: /Applications/Brave Browser.app/Contents/MacOS/Brave Browser

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

ℹ R version 4.6.1 (2026-06-24)
! Config '~/.Rprofile' was loaded!

[✓] Checking R installation...........OK
      Version: 4.6.1
      Path: /Library/Frameworks/R.framework/Versions/4.6/Resources
      LibPaths:
        - /Users/mcanouil/Library/R/arm64/4.6/library
        - /Library/Frameworks/R.framework/Versions/4.6/Resources/library
      knitr: 1.51
      rmarkdown: 2.31

[✓] Checking Knitr engine render......OK

[✓] Checking Python 3 installation....OK
      Version: 3.13.11
      Path: /Users/mcanouil/Projects/q2-tests/.venv/bin/python3
      Jupyter: (None)

      Jupyter is not available in this Python installation.
      Install with python3 -m pip install jupyter

[✓] Checking Julia installation...
Vorherrschende Sprache
JavaScript
Sterne
6.1k
Forks
471
Ø Merge
21 Std. 50 Min.
Gemergte PRs (30 T.)
105

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus quarto-dev/quarto-cli

Alle Issues in quarto-dev/quarto-cli

Ähnliche Issues

Weitere Issues zu JavaScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.