Dark mode media query breaks table readability in light-themed Quarto documents

Open Beginner friendly
#649 3 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
65/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Quiet
Tech stack
css, r
Domain
frontend

Research direction

Search the repository for --tt-text-color and the dark-mode media query, then reproduce the issue with the minimal Quarto document and quarto render. Done means table text remains readable in a light-only Quarto theme while still supporting documents configured with separate light and dark themes.

Written by the indexing model from the issue text.

Description

The media query overrides --tt-text-color to #e0e0e0 regardless of the host document's actual background color. Since Quarto light themes like flatly keep a white background even when the OS is in dark mode, the result is light grey text on white — effectively invisible.

Minimal Quarto document:

---
title: "Test"
format:
  html:
    theme: flatly
---
```{r}
library(modelsummary)
mod <- lm(mpg ~ wt + hp, data = mtcars)
modelsummary(mod)
```

Steps to reproduce:

  1. Set macOS to dark mode (System Settings → Appearance → Dark)
  2. Render the document with quarto render
  3. Open the resulting HTML in Safari or Chrome
  4. The table text is unreadable (light grey on white background)

Expected behavior

The table should respect the host document's color scheme, not the OS preference, unless the host document itself opts into dark mode — for example via Quarto's dual theme configuration:

---
title: "Test"
format:
  html:
    theme: 
      light: flatly
      dark: darkly
---
---
title: "Test"
format:
  html:
    theme: 
        light: flatly
        dark: darkly
---

Screenshots

Image Image

Environment

  • tinytable 0.16.0
  • modelsummary 2.6.0
  • Quarto 1.9.36
  • R 4.5.3
  • macOS 26.4
Dominant language
R
Stars
344
Forks
30
Avg merge
23h 45m
Merged PRs (30d)
1

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from vincentarelbundock/tinytable

All issues in vincentarelbundock/tinytable

Similar issues

More R issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.