Theme preview
theme-preview switches one documentation example between the generated light and dark token collections. Its choice stays inside the preview and does not change or store the reader’s site-wide theme.
Preview#
This surface uses semantic paper, ink, line, and accent roles.
Boundary#
Use this wrapper to compare a real example in both supported themes. Keep component-preview for examples that need framing but do not need a local theme control.
Example
{{< theme-preview >}}When to use
A local light and dark theme switcher for documentation examples.
Implementation
layouts/shortcodes/theme-preview.htmlOptions
This shortcode has no named parameters in its template.
Interface manifest
- Kind
- Shortcode
- Category
- Content
- Status
- Implemented
- Implementation
- Partial:
layouts/partials/theme-toggle.htmlShortcode:layouts/shortcodes/theme-preview.htmlData:tokens/themes/light.tokens.jsontokens/themes/dark.tokens.jsonCSS:assets/css/generated/themes.cssassets/css/site.cssJavaScript:assets/js/site.js - Related interfaces
- Theme toggle