Bootstrap's secondary and tertiary greys stay light in the dark colour scheme

Ouverte Adaptée aux débutants
  • Quelque chose ne va pas ?
#15,301 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
82/100
Type d'issue
Bug
Clarté
Clairement spécifiée
Activité
Active
Stack technique
sass, scss
Domaine
accessibility

Piste de recherche

Commencez par src/resources/formats/html/bootstrap/dist/scss/_variables.scss, où l’issue indique les valeurs par défaut gris clair, et suivez la manière dont le bundle sombre définit les couleurs de marque. Déduisez les valeurs des arrière-plans secondaire et tertiaire à partir de l’arrière-plan sombre, puis affichez l’exemple fourni en mode sombre et vérifiez que les boîtes concernées présentent un contraste lisible.

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

Description

accessibility brand bug 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

In the dark colour scheme of a brand, Bootstrap's grey boxes keep the light greys of the light scheme, under the light text of the dark scheme.
The text then has a contrast of about 1:1 with its box, so it cannot be read (WCAG 1.4.3).

Bootstrap sets $body-secondary-bg: $gray-200 and $body-tertiary-bg: $gray-100 (src/resources/formats/html/bootstrap/dist/scss/_variables.scss, lines 450 and 453).
Quarto builds the dark bundle from the dark brand colours, but nothing moves these two variables away from the light greys.
They reach, among others:

  • the disabled form field ($input-disabled-bg),
  • the input group text box ($input-group-addon-bg),
  • the pagination hover, focus, and disabled boxes ($pagination-hover-bg, $pagination-focus-bg, $pagination-disabled-bg),
  • the popover header, the progress bar, and the active list group item.

Deriving $body-secondary-bg and $body-tertiary-bg from the dark background in the dark bundle would fix all of these at once.

Light Dark
Light scheme: the disabled field, the Filter box, and the Previous page box are light grey with dark text Dark scheme: the same three boxes stay light grey, and their light text is almost invisible
Steps to reproduce

_brand.yml:

color:
  background:
    light: "#ffffff"
    dark: "#14181c"
  foreground:
    light: "#1a1a1a"
    dark: "#e8e6e1"
  primary: "#1f6f8b"

index.qmd:

---
title: "Grey boxes in the dark scheme"
format: html
brand: _brand.yml
respect-user-color-scheme: true
---

```{=html}
<input class="form-control mb-2" value="Enabled field">
<input class="form-control mb-3" disabled value="Disabled field">
<div class="input-group mb-3">
  <span class="input-group-text">Filter</span>
  <input class="form-control" placeholder="Search">
</div>
<ul class="pagination">
  <li class="page-item disabled"><a class="page-link">Previous</a></li>
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">2</a></li>
</ul>
```

Render it, and open it with the system set to dark mode.

Actual behavior
Scheme Element Background Text Contrast
Light Disabled field rgb(233, 236, 239) rgb(26, 26, 26) 14.68:1
Light Input group text rgb(248, 249, 250) rgb(26, 26, 26) 16.51:1
Light Disabled page rgb(233, 236, 239) rgba(26, 26, 26, 0.75) 6.97:1
Dark Disabled field rgb(233, 236, 239) rgb(232, 230, 225) 1.05:1
Dark Input group text rgb(248, 249, 250) rgb(232, 230, 225) 1.18:1
Dark Disabled page rgb(233, 236, 239) rgba(232, 230, 225, 0.75) 1.04:1

The pagination hover and focus boxes are light boxes on the dark page as well, with the link colour as text.

Expected behavior

In the dark scheme, these boxes sit on greys derived from the dark background, and their text keeps at least 4.5:1, as it does in the light scheme.

Your environment
  • OS: macOS 27.2.
  • Browser: Brave (Chromium).
Quarto check output
Quarto 99.9.9
[✓] Checking environment information...
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.10.0: OK
      Dart Sass version 1.107.1: OK
      Deno version 2.9.8: OK
      Typst version 0.15.1: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 99.9.9
      commit: 089ba530b3ed4ec156a355d41b6b7de2db3e44ea
Langage dominant
JavaScript
Étoiles
6.1k
Forks
478
Merge moyen
17 h 53 min
PR mergées (30 j)
135

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.