Dark-mode plot inversion doesn't cover layout-ncol/layout panel figures

Open Beginner friendly
#3,013 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
1/5
Estimated time
Under an hour
Newbie friendliness
88/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Quiet
Tech stack
bootstrap, r, scss
Domain
documentation, web-dev

Research direction

Start in BS5/assets/pkgdown.scss and inspect the invert-filter mixin alongside its existing Quarto selectors. Reproduce the issue with a qmd article using layout-ncol, then toggle dark mode and verify that layout-panel plot images invert like ordinary chunk figures. Done when the layout-panel figures switch correctly without changing other plot handling.

Written by the indexing model from the issue text.

Description

pkgdown's Bootstrap 5 template auto-inverts rendered plot images in dark mode via the invert-filter mixin in BS5/assets/pkgdown.scss:

@mixin invert-filter {
  img.r-plt,                  // vignette figures
  pre .r-plt.img img,         // example figures
  .cell-output-display img,   // quarto figures
  .html-widget {
    filter: invert(100%) hue-rotate(180deg);
  }
}

This works for ordinary chunk output, but quarto's layout-ncol/layout cell option renders figures inside a different wrapper — <div class="cell quarto-layout-panel"> / <div class="quarto-layout-cell"> — instead of .cell-output-display. None of the selectors above match that wrapper, so images placed via layout-ncol stay light-mode-only while every other plot on the page switches with the theme.

It seems to me that this is an oversight, since the same stylesheet special-cases .quarto-layout-cell .html-widget elsewhere, so layout-ncol appears to be an anticipated case, but the invert-filter mixin itself was just never extended to match.

To reproduce, add this to any qmd article, pkgdown 2.2.1:

```{r}
#| layout-ncol: 2
plot(1:10)
plot(10:1)
```

Toggle the site's light-switch to dark mode: ordinary chunk figures elsewhere on the page invert correctly; these two do not.

Suggested fix:

Add the layout-panel selector to the mixin:

@mixin invert-filter {
  img.r-plt,
  pre .r-plt.img img,
  .cell-output-display img,
  .quarto-layout-panel img,   // <- add this one
  .html-widget {
    filter: invert(100%) hue-rotate(180deg);
  }
}

Happy to open a PR with this change if useful.

Dominant language
R
Stars
775
Forks
355
No merged PRs in 30d

Contributor guide

Open the contributing guide

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 r-lib/pkgdown

All issues in r-lib/pkgdown

Similar issues

More R issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.