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

Aberta Para iniciantes
  • Algo errado?
#15,301 0 comentários 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 1 dia

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
2/5
Tempo estimado
1-3 horas
Facilidade para iniciantes
82/100
Tipo de issue
Bug
Clareza
Claramente especificada
Status de atividade
Ativa
Stack de tecnologia
sass, scss
Domínio
accessibility

Direção de pesquisa

Comece por src/resources/formats/html/bootstrap/dist/scss/_variables.scss, onde a issue identifica os valores padrão em cinza-claro, e acompanhe como o bundle escuro define as cores da marca. Derive os valores dos planos de fundo secundário e terciário a partir do plano de fundo escuro; em seguida, renderize o exemplo fornecido no modo escuro e verifique se as caixas afetadas têm contraste legível.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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
Linguagem predominante
JavaScript
Estrelas
6.1k
Forks
478
Merge médio
17h 53min
PRs com merge (30d)
135

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de quarto-dev/quarto-cli

Todas as issues de quarto-dev/quarto-cli

Issues semelhantes

Mais issues de JavaScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.