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

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#15,301 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
82/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
sass, scss
Lĩnh vực
accessibility

Hướng nghiên cứu

Bắt đầu với src/resources/formats/html/bootstrap/dist/scss/_variables.scss, nơi issue xác định các giá trị mặc định màu xám nhạt, rồi lần theo cách bundle tối thiết lập màu thương hiệu. Suy ra các giá trị nền thứ cấp và tam cấp từ nền tối, sau đó render ví dụ được cung cấp ở chế độ tối và kiểm tra xem các hộp bị ảnh hưởng có độ tương phản dễ đọc hay không.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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
Ngôn ngữ chính
JavaScript
Star
6.1k
Fork
478
Merge trung bình
17 giờ 53 phút
Pull request đã merge (30 ngày)
135

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của quarto-dev/quarto-cli

Tất cả issue của quarto-dev/quarto-cli

Issue tương tự

Thêm issue về JavaScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.