Figures that follow the toggle

A cell can emit a light output and a dark output. Put the light output first:

#| renderings: [light, dark]

With askr-html and theme-toggle, the dark stylesheet carries data-mode="dark", and the toggle adds quarto-dark to body. The Figures page renders a pair of swatches this way.

Wide figures and diagrams

Wrap a figure or Mermaid block in .askr-wide-figure to keep its natural label size and scroll it inside a labelled, keyboard-focusable region. The drawing’s own intrinsic width sets the scroll extent; no fixed consumer width is needed. Mermaid colors follow Askr’s light and dark palettes.

::: {.askr-wide-figure aria-label="Circuit signal path"}
```{mermaid}
flowchart LR
  Input --> Resonator --> Output
```
:::

This utility keeps native Quarto figures, captions and cross references.

For two related callouts or cards, .askr-grid creates equal columns from 768px upward and stacks them below that breakpoint. The source order remains the reading order. Standard Quarto .columns keeps its own responsive layout.

To constrain a tall figure to the viewport, wrap it in .askr-figure-fit. This optional utility caps the image at 70svh (with a 70vh fallback), preserves its aspect ratio and leaves the native caption below it. Unwrapped figures are unchanged; image inspection continues through the existing Askr Image Viewer. See the Figures component examples.