Theme Designer
A slide-in panel to pick a brand preset or craft a custom theme, applying --pura-* token overrides live and persisting the choice.
Preview
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Reflects and controls panel visibility |
launcher | boolean | — | Also render a fixed floating button that toggles the panel |
position | string | right | Panel side: right (default) or left |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/theme-designer.js"></script>import "./pura/lib/theme-designer.js";