Add CSS filter for auto-dark figures (#2919)

Thanks to @gadenbuie

Fixes #2729. Closes #2854

Author: jayhesselberth

NEWS.md

@@ -1,5 +1,7 @@
 # pkgdown (development version)
 
+* Plots in dark mode are now transformed with a CSS filter to improve their
+  visibility (thanks to @gadenbuie).
 * Updated the translations vignette with instructions for building non-English sites through Github Actions.
 * `build_site()` gained a `quiet` argument, which is propagated to other functions
   (e.g., `build_articles()`) and is useful for debugging build errors on GH actions.

R/test.R

@@ -80,6 +80,8 @@ NULL
 #' plot(1:10)
 #' lines(1:10)
 #' text(2, 5, "Hello", srt = 30, cex = 2)
+#'
+#' plot(1:3, col = c("red", "green", "blue"), pch = 16, cex = 10)
 NULL
 
 #' Test case: tables

inst/BS5/assets/pkgdown.scss

@@ -930,3 +930,21 @@ figure>figcaption.quarto-float-caption-top {
   --mermaid-node-bg-color: RGBA(var(--bs-primary-rgb), 0.1);
   --mermaid-node-fg-color: var(--bs-primary);
 }
+
+// aut-dark mode for images ---------------------------------------
+
+@mixin invert-filter {
+
+  img:not(.logo),
+  .html-widget {
+    filter: invert(100%) hue-rotate(180deg);
+  }
+}
+
+[data-bs-theme="dark"] {
+  @include invert-filter;
+
+  .no-invert-dark-mode {
+    @include invert-filter;
+  }
+}

man/test-figures.Rd

@@ -4,3 +4,5 @@
 *_files
 
 /.quarto/
+
+**/*.quarto_ipynb