Theme Panel

theme-panel

Module-tier appearance-preferences control surface — eight named themes, parametric density & radius sliders, three presets, optional light/dark scheme toggle, and opt-in localStorage persistence. Drop into any <popover-ui slot="content"> in your shell's topbar.

Minimal — themes only

Default theme grid. No sliders, no presets, no scheme toggle. Suitable for embedded demos where only theme swapping is offered.

<theme-panel></theme-panel>

With parametric sliders

Adds the density + radius slider block. Selecting a theme also reads the theme's computed knob values back into the sliders.

<theme-panel parametric></theme-panel>

Full panel — parametric + presets + scheme toggle

The docs-shell configuration. Theme + scheme + parametric + presets, all surfaces visible. persist is set so refreshing the page restores your selections.

<theme-panel parametric presets scheme-toggle persist ></theme-panel>

Restricted theme list

The [themes] attribute is tolerant — any space-separated list of slugs renders as buttons. Pass a subset to limit choices, or extend with custom slugs (you supply the matching CSS).

<theme-panel themes="default ocean midnight" parametric ></theme-panel>

Inside a popover (canonical composition)

The usual shape — a palette-icon button trigger pops the panel from a topbar. This is how site/ and playgrounds/admin-shell/ consume the module.

<popover-ui placement="bottom-end"> <button-ui icon="palette" title="Choose theme" variant="ghost" size="sm" slot="trigger"></button-ui> <theme-panel slot="content" parametric presets scheme-toggle></theme-panel> </popover-ui>

Scoped target — preview pane

By default, the panel writes to :root (the <html> element). Pass [target] to scope theming to a region — useful for editor previews and component playgrounds.

<theme-panel target="#preview-pane" parametric></theme-panel> <div id="preview-pane">…preview content…</div>

Preview pane — theming applied here only.

Attributes

Attribute	Type	Default	Notes
`themes`	string	8 named slugs	Space-separated theme slug list.
`parametric`	boolean	`false`	Renders density + radius sliders.
`presets`	boolean	`false`	Renders compact / reset / spacious row.
`scheme-toggle`	boolean	`false`	Renders integrated light/dark switch.
`persist`	boolean	`false`	Writes selections to localStorage.
`storage-prefix`	string	`adia-theme-`	LS key namespace when persisting.
`target`	string (selector)	`:root`	Element to receive writes.
`scheme`	enum	`auto`	`light` / `dark` / `auto`.

Reflected state

Read-only externally; use .apply() to mutate. Style with :has(theme-panel[active-scheme="dark"]).

Attribute	Notes
`active-theme`	Currently selected slug; empty for default.
`active-scheme`	Resolved scheme (auto collapsed to light or dark).
`active-density`	Current `--a-density` on target.
`active-radius`	Current `--a-radius-k` on target.

Events & methods

Surface	Shape	Notes
`theme-change` event	`{ theme, scheme, density, radius, source }`	Bubbles. `source` ∈ `theme \| slider \| preset \| scheme \| reset \| programmatic`.
`.apply(partial)`	`(p: { theme?, scheme?, density?, radius? }) => void`	Programmatic write; emits `theme-change` with `source: 'programmatic'`.
`.reset()`	`() => void`	Clears all state; emits `theme-change` with `source: 'reset'`.