Autoswitching plots depending on documentation theme?

[dom-linkevicius]

Hi, I would like for the plots in my documentation to be automatically changed depending on the theme of the documentation (light/dark). This is possible using the plain Documenter.HTML (see https://github.com/JuliaDocs/Documenter.jl/issues/1578), but breaks when using DocumenterVitepress.MarkdownVitepress - would you have any advice on how to do this?

[asinghvi17]

Have you added that CSS to the style.css in docs/src/.vitepress/theme?

The correct approach for Vitepress is to append {.light-only} or {.dark-only} to your images, so

![]($(filename)_light.png){.light-only}
![]($(filename)_dark.png){.dark-only}

[dom-linkevicius]

Yes, I have added the CSS from that issue to style.css, but it is a bit unclear to me where I should append the extra code that you wrote? Is it to doc.md or style.css or some other location?

[asinghvi17]

You don't need the style if you use the Markdown I linked ;)

[dom-linkevicius]

Many thanks for the clarification. I have tried adding the Markdown you linked, but it is displaying both images at the same time, instead of selecting based on theme.

[dom-linkevicius]

@asinghvi17 by any chance do you have any further suggestions regarding this?

[korsbo]

I had to tinker to get this to work. But

/* Switching between light/dark theme plots */

:root:not(.dark) .dark-only {
  display: none;
}

:root:is(.dark) .light-only {
  display: none;
}

:root:not(.dark) .light-only {
  display: block;
}

:root:is(.dark) .dark-only {
  display: block;
}

in a css file (docs/src/.vitepress/theme/style.css, or some custom.css that you link to in docs/src/.vitepress/theme/index.ts) enabled

![](fig_light.png){.light-only}

![](fig_dark.png){.dark-only}

where the empty line between these seems necessary for some reason.

Just posting in case anyone else comes across this.

[asinghvi17]

Huh, thanks! I didn't realize that this wasn't working on other Vitepress sites, maybe it's not in the default DocumenterVitepress CSS. I'll look into other methods depending on what Vitepress supports natively, but that CSS method seems to be pretty good as well!