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

Offen Anfängerfreundlich
  • Stimmt etwas nicht?
#15,301 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
82/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
sass, scss
Bereich
accessibility

Rechercherichtung

Beginne mit src/resources/formats/html/bootstrap/dist/scss/_variables.scss, wo der Issue die hellgrauen Standardwerte nennt, und verfolge, wie das Dark-Bundle die Markenfarben festlegt. Leite die Werte für den sekundären und tertiären Hintergrund vom dunklen Hintergrund ab. Rendere anschließend das bereitgestellte Beispiel im Dark Mode und prüfe, ob die betroffenen Boxen einen gut lesbaren Kontrast aufweisen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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
Vorherrschende Sprache
JavaScript
Sterne
6.1k
Forks
478
Ø Merge
17 Std. 53 Min.
Gemergte PRs (30 T.)
135

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.