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.
pkgdown's Bootstrap 5 template auto-inverts rendered plot images in dark mode via the invert-filter mixin in
BS5/assets/pkgdown.scss:This works for ordinary chunk output, but quarto's
layout-ncol/layoutcell 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 vialayout-ncolstay 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-widgetelsewhere, solayout-ncolappears to be an anticipated case, but theinvert-filtermixin itself was just never extended to match.To reproduce, add this to any qmd article, pkgdown 2.2.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:
Happy to open a PR with this change if useful.