Skip to content

Markdown versions of all docs pages are available by appending .md to any docs URL.

reuse-image-dark

Page as Markdown

Renders an image in dark mode only, hidden entirely in light mode

Either call form works, and both produce identical HTML.

Parameters

NameTypeRequiredDefaultDescription
srcDarkpathyesPath to the dark-mode image under assets/.
altstringnoAlt text.
captionstringnoCaption rendered below the image.
widthstringnoCSS width for the figure.

Example

Note

There is no live example on this page: this shortcode cannot be rendered safely in isolation. See Notes for why.

Notes

The mirror of reuse-image-light: wraps a single image in .toggle-light, which CSS shows in dark mode and hides in light mode. Note the parameter is srcDark, not src, matching the name it takes on a paired reuse-image call.

Prefer passing srcDark to reuse-image over pairing a lone reuse-image with a sibling reuse-image-dark for the same figure. The legacy pattern stacks both images, because a lone reuse-image renders in both modes.

The example is marked code-only: this needs a real asset tree.


Source: layouts/_shortcodes/reuse-image-dark.html

Was this page helpful?