Skip to content

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

reuse-image-light

Page as Markdown

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

Either call form works, and both produce identical HTML.

Parameters

NameTypeRequiredDefaultDescription
srcpathyesPath to the light-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

Wraps a single image in .toggle-dark, which CSS shows in light mode and hides in dark mode.

Reach for this only when the asset must NOT appear in dark mode: a screenshot whose dark counterpart is not ready and whose white card would look wrong, or a diagram with reference-specific colours. For the common “show this in both modes” case use reuse-image; for dark-only use reuse-image-dark.

The symmetric counterpart is reuse-image-dark. Both preserve their source form in a translation build via a placeholder — without it the snapshot would bake a resolved absolute .RelPermalink into the translated page.

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


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

Was this page helpful?