ThemeEditor

Edit --oas-* theme tokens in real time: color tokens use a color picker, numeric tokens use a number input (displayed without the unit, written back with the original unit). Edits are written to host CSS variables immediately, so the subtree previews them live. By default, tokens are grouped into colors / font sizes / spacing / radius / control heights.

Default token set

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

Default token set

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

Export & reset

Call exportJson() to get the current token set as JSON; reset() clears the inline variables written by the editor and restores the default theme values.

Export theme JSON / reset

Export theme JSONReset editor

Click "Export theme JSON" to view the result

Example

API

Attributes

Attribute	Description	Type	Default
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 }
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 input only accepts hex #rrggbb; non-hex current values are displayed but not fed into the color picker. Empty or invalid numeric input is neither written nor dispatched.