ThemeEditor

Edit --oas-* theme tokens in real time: edits are written to host CSS variables immediately, so the subtree previews them live. Color token rows use a dual channel of swatch + text box (the swatch only carries #rrggbb; the text box can edit any CSS color function such as rgb()/oklch()/color-mix() without corrupting the original value); numeric token rows link a range slider with a number input. The panel has a search box that filters by token name, collapsible groups, built-in compact / comfortable presets, and export / import / reset tools.

Default token set

Shows the full set of default theme tokens (the semantic tokens from @oas-ui/theme); undefined variables are skipped automatically.

Default token set

Example

Editing color function values

Color token rows are a dual channel of swatch + text box:

• The swatch only carries values parseable to #rrggbb — color functions such as rgb()/oklch() are converted to their hex equivalent automatically and never fall back to black
• The text box always keeps the original value editable (any CSS color function); editing writes back without changing the original format
• Unparseable values (e.g. color-mix() containing var()) disable the swatch (neutral gray); only the text box is editable
• Invalid color input in the text box is not written back and shows a red outline

Editing color function values

Example

Integration with ConfigProvider

When the editor is inside a <oas-config-provider>, the write target switches to the nearest provider element — the whole subtree (including Shadow DOM) inherits edited tokens live. The button on the right toggles the provider's dark theme to verify edited values still override the theme.

Live preview in a ConfigProvider subtree

Primary buttonPrimary tagToggle dark theme

Example

Custom token list

Pass a JSON string array (CSS variable names) via the token attribute to edit only those tokens; variables not defined on the current page are skipped automatically.

Custom tokens

Example

Numeric token slider

Numeric token rows link a range slider with a number input (min / max / step come from the token definition): dragging the slider syncs the number box and writes back, and vice versa; the slider is clamped to min/max natively.

Slider sync

Example

Preset themes

applyPreset(name) / the preset attribute applies a built-in preset theme that only touches size-family tokens (control-height / space), never colors:

• compact: control-height -4px per tier, space scaled down proportionally
• comfortable: control-height +4px per tier, space scaled up proportionally
• default: equivalent to reset(), clears the written inline variables

Applied tokens are recorded in writtenTokens and cleared together by reset().

Switching presets

CompactComfortableDefaultNot applied

Example

Collapsible groups & search

Groups are collapsible via details/summary (open by default). The search box at the top filters rows by token name substring (case-insensitive); while filtering, groups auto-expand and groups without matches are hidden; clearing restores the previous fold state.

Collapse & search filter

Example

Export / import / reset

• exportJson() returns the current token set as JSON; exportCss() returns :root { ... } CSS text (same source)
• importJson(json) applies a token set to the themeRoot (non--- keys are ignored with a warning); the panel refreshes in place without losing focus
• reset() clears the inline variables written by the editor and restores the default theme values

Export / import / reset

Export JSONExport CSSImport sample JSONReset editor

Click a button to view the result

Example

API

oas-theme-editor

Attributes

Attribute	Description	Type	Default
preset	Built-in preset theme: compact (tight; control-height -4px, space scaled down proportionally) / comfortable (roomy; +4px, space scaled up proportionally) / default (equivalent to reset; clears written inline variables). Invalid values are ignored with a dev warning	—	—
token	Custom list of tokens to edit (CSS variable names)	—	—

Events

Event	Description
oas-change	Editing any token, detail: { token, value }

Method	Description
exportJson()	Returns the current token set { '--oas-*': value }
exportCss()	Returns :root { --oas-*: value; ... } CSS text (same source as exportJson)
importJson(json)	Applies a token set to the themeRoot: { '--oas-*': value }; non--- keys are ignored with a dev warning (deduplicated), then the panel refreshes in place (no rebuild, no focus loss)
applyPreset(name)	Applies a built-in preset theme (compact / comfortable / default); invalid names are ignored with a dev warning (deduplicated)
reset()	Clears the inline CSS variables written to the host and restores the default theme values

Behavior: tokens are read from the computed style of the host (or the nearest oas-config-provider); edits are written back to the host immediately via style.setProperty, and the subtree inherits them live. Inside a config-provider, writes go to the nearest provider (inherited by the whole subtree). Color rows are a swatch + text box dual channel: the swatch only carries values parseable to #rrggbb (color functions such as rgb()/oklch() are converted to hex; unparseable values like color-mix() containing var() disable the swatch); the text box always keeps the original value editable (any CSS color function) and invalid input is neither written nor dispatched, showing a red outline. Numeric rows link a range slider with a number input (min/max/step from the token definition) and write back with the original unit; empty or invalid numeric input is neither written nor dispatched. Groups are collapsible via details/summary (open by default); the search box filters rows by token name substring. Presets only touch size-family tokens (control-height / space); applied tokens are recorded in writtenTokens and cleared together by reset().