Theming

Light / dark

Set the theme when mounting, or switch it at runtime — the editor has full light/dark token sets built in:

const editor = createUframeEditor({ target, src, theme: 'dark' })

editor.setTheme('light')

The end user can also toggle the theme from the editor's own toolbar.

Rebranding

The editor chrome is driven by CSS custom properties under the uf-* namespace (--uf-accent, --uf-panel, --uf-text, --uf-radius, …). Because the editor runs inside the iframe, you rebrand by overriding those tokens in the editor app before hosting it — e.g. add an override stylesheet to the build:

:root {
  --uf-accent: oklch(0.62 0.19 25);   /* your brand */
  --uf-radius: 6px;
}

The uf-* namespace and the iframe boundary keep these styles fully isolated from your host page.