live-theme

Work in progress — this component is under active development and its API may change.

A live theme editor that lets you tweak theme colors in real time. Changes apply instantly to the page. The editor itself is immune to theme changes (it uses hardcoded styles in shadow DOM).

Theme Editor

<tosi-theme-editor></tosi-theme-editor>

import { tosiThemeEditor, liveTheme } from 'tosijs-ui'

preview.append(tosiThemeEditor())

Programmatic Control

The liveTheme observable lets you read and write theme values from code:

import { liveTheme } from 'tosijs-ui'

// Read current values
// liveTheme.accent.value   // '#EE257B'
// liveTheme.dark.value     // false

// Set values programmatically (triggers immediate theme update)
// liveTheme.accent.value = '#007AFF'