components
Themed image
A theme-aware illustration. It renders both a light and a dark source and swaps between them with CSS that mirrors the token cascade, so it follows the system preference and the explicit theme toggle alike. Images arrive with a calm blur-to-sharp reveal over a muted surface.
Theme swap
Use the theme toggle in the top right to switch modes. The cream art belongs to light, the navy art to dark, so the two swap visibly. The same swap also tracks your system preference when no explicit theme is set.
Single-image fallback
With no darkSrc, both layers use lightSrc, so the component degrades to one image that stays put across themes.
Aspect ratio and corners
aspectRatio sets the frame shape; rounded accepts true, false, or a custom radius value.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| lightSrc | string | none | Source shown in light mode, and the fallback when no dark source is given. |
| darkSrc | string | none | Source shown in dark mode. Falls back to lightSrc when omitted. |
| alt | string | none | Alt text. Required, since the illustration carries meaning. |
| aspectRatio | string | "4 / 3" | CSS aspect-ratio for the figure. |
| rounded | boolean | string | true | true uses --savi-radius-lg, a string sets a custom radius, false squares it. |
| priority | boolean | false | Load eagerly (loading="eager") instead of lazily. |