ADVERT

🎨 CSS Variable Theme Previewer

Import CSS custom properties to preview light and dark themes, tweak values live, and export polished token sets.

Preview CSS variable themes

Toggle between design token sets, adjust values on the fly, and preview how typography and components react before exporting JSON or CSV.

--bg--fg--muted--card--accent--accent-fg--border

UI preview with your tokens

Typography

The quick brown fox jumps over the lazy dog. Adjust font colors and backgrounds to check contrast.

--bg#ffffff

--fg#0f172a

--muted#e2e8f0

--card#f8fafc

--accent#2563eb

--accent-fg#eff6ff

--border#d0d5dd

Tokens: 7Color swatches: 7

JSON format supports either an array of { name, variables } objects or an object map of theme name to variable dictionary.

ADVERT

ADVERT