Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

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

Ouverte Adaptée aux débutants
  • Quelque chose ne va pas ?
#15,060 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
2/5
Temps estimé
1-3 heures
Accessibilité débutants
62/100
Type d'issue
Bug
Clarté
Clairement spécifiée
Activité
Active
Stack technique
bootstrap, javascript, scss
Domaine
accessibility, frontend

Piste de recherche

La barre de navigation définit déjà data-bs-theme="dark" sur son propre élément dans nav-before-body.ejs, commencez donc par là pour voir le schéma. Ensuite, trouvez le code du bouton de bascule du mode sombre qui ajoute quarto-dark au body, et définissez data-bs-theme sur html au même endroit, en utilisant light pour revenir en arrière. Reproduisez avec dark.scss et index.qmd du ticket, basculez le mode et vérifiez que .btn-close reçoit le filtre invert. C'est terminé lorsque l'attribut suit la bascule et que les boutons de fermeture sur une surface sombre sont visibles.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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...
Langage dominant
JavaScript
Étoiles
6.1k
Forks
466
Merge moyen
20 h 6 min
PR mergées (30 j)
84

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de quarto-dev/quarto-cli

Toutes les issues de quarto-dev/quarto-cli

Issues similaires

Plus d'issues JavaScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.