Theme context for figures

[broktoram]

Is it possible to have different figures for light and dark themes, something like #gh-dark-mode-only?

[mcanouil]

In which context? HTML?
If you generate both version of images, you can write a Lua filter (or eventually JavaScript) that change the version of the image according to the theme being light or dark.

[broktoram]

I have different transparent images for light and dark backgrounds.

Is it possible to do it directly in the markdown file (perhaps using a conditional filter that checks the theme and loads the corresponding image)?

[mcanouil]

"Conditional filter" is LUA filter.

Or you'll have to code your way through code cell in order to get the relevant css/scss information and then output the image you want.

[baptiste]

It'd be nice to be able to follow this approach* (from Plot's online documentation)

https://twitter.com/mbostock/status/1653069773645938689

• SVG using currentColor
• mode-specific behavior in some places, such as for heatmaps (YlGnBu/turbo)
• mixBlendMode for overlapping fills
• CSS variable that matches the background color for default stroke colour
• CSS variable technique for a “punch-out” (halo) effect for text over busy elements
• Using Vue, we rewrite the code snippets for different modes to keep things simple: e.g., instead of var(--vp-c-bg)

*(I mean, beyond Observable cells)

[baptiste]

For R code chunks, this trick might be useful to generate both light and dark figures at once:

---
title: "Untitled"
theme:
  light: flatly
  dark: darkly
---

```{r setup, echo=FALSE}
library(ggplot2)
library(ggdark)
library(devoid)
darksvg = function(file, width, height) {
  on.exit({
    ggplot2::reset_theme_settings()
    # invert_geom_defaults()
  }
    )
  theme_set(dark_mode(theme_get()))
  ggsave(filename = file, width = width, height=height, dev='svg', bg = 'transparent')
  void_dev()
}
```


```{r, dev=c('svg','darksvg'), fig.ext=c('-light.svg', '-dark.svg')}

library(palmerpenguins)
p <- ggplot(data = penguins, 
                       aes(x = flipper_length_mm,
                           y = body_mass_g)) +
  geom_point(aes(color = species, 
                 shape = species),
             alpha = 0.8) +
  scale_color_manual(values = c("darkorange","purple","cyan4")) +
  labs(x = "Flipper length (mm)",
       y = "Body mass (g)",
       color = "Penguin species",
       shape = "Penguin species") 
p
```


```{r, dev=c('svg','darksvg'), fig.ext=c('-light.svg', '-dark.svg')}
## second chunk just to check that settings reverted to default (light)
p
```

```{=html}
<picture>
 <source
srcset="echo_files/figure-html/unnamed-chunk-1-1.-light.svg"
   media="(prefers-color-scheme: dark)"
   class="h-[45vh] object-cover"
   />
  <img
 src="echo_files/figure-html/unnamed-chunk-1-1.-dark.svg"
   alt="desktop bg dark"
   class="h-[45vh] object-cover"          
 />
</picture>
```

I have not yet found the right CSS/js trick to switch between the two files when dark/light mode is enabled by the quarto toggle (as opposed to the browser mode); quarto doesn't seem to rely on media="(prefers-color-scheme: dark)" for this and I'm out of my depth.

[mcanouil]

From @baptiste code, here is a complete working solution using JavaScript¹ also using the recommended YAML syntax for options.

JavaScript code

// Author: Mickaël Canouil
// Version: <1.0.0>
// Description: Change image src depending on body class (quarto-light or quarto-dark)
// License: MIT
function updateImageSrc() {
  var bodyClass = window.document.body.classList;
  var images = window.document.getElementsByTagName('img');
  for (var i = 0; i < images.length; i++) {
    var image = images[i];
    var src = image.src;
    var newSrc = src;
    if (bodyClass.contains('quarto-light') && src.includes('-dark')) {
      newSrc = src.replace('-dark', '-light');
    } else if (bodyClass.contains('quarto-dark') && src.includes('-light')) {
      newSrc = src.replace('-light', '-dark');
    }
    if (newSrc !== src) {
      image.src = newSrc;
    }
  }
}

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
      updateImageSrc();
    }
  });
});

observer.observe(window.document.body, {
  attributes: true
});

updateImageSrc();

Quarto document

---
title: "Untitled"
theme:
  light: flatly
  dark: darkly
knitr: 
  opts_chunk: 
    dev: [svg, darksvg]
    fig.ext: [.-light.svg, .-dark.svg]
include-after-body:
  text: |
    <script type="application/javascript" src="image-dark-light.js"></script>
---

```{r}
#| echo: false
library(ggplot2)
library(ggdark)
darksvg <- function(file, width, height) {
  on.exit(ggplot2::reset_theme_settings())
  theme_set(dark_mode(theme_get()))
  ggsave(filename = file, width = width, height = height, dev = "svg", bg = "transparent")
}
```

```{r}
library(palmerpenguins)
ggplot(data = penguins) +
  aes(x = flipper_length_mm, y = body_mass_g) +
  geom_point(
    mapping = aes(
      colour = species,
      shape = species
    ),
    alpha = 0.8
  ) +
  scale_colour_manual(values = c("darkorange", "purple", "cyan4")) +
  labs(
    x = "Flipper length (mm)",
    y = "Body mass (g)",
    color = "Penguin species",
    shape = "Penguin species"
  )
```

dark-light.mov

@baptiste About prefers-color-scheme, it should only be set when both light and dark has been set, otherwise there no point of having it.
I believe it could be done in Quarto (see https://disjfa.github.io/bootstrap-tricks/prefers-color-scheme/ for an example).
@dragonstyle Do you think, that setting prefers-color-scheme is something that could be done?

Footnotes

1. The code is very likely not the best in terms of performance. ↩