Themed.js Demo

A powerful theme management library with AI-powered theme generation. Click the buttons below to switch themes, or describe a theme to generate with AI.

AI Theme Generator

Current Theme Colors

Style Demo

Theme tokens in use: hierarchy (primary vs secondary), state colors, text levels, spacing & radius, and typography.

Primary (main action)

Secondary (supporting)

Accent

State (alerts)

Error Something went wrong. Please try again.
Warning Your session will expire in 5 minutes.
Success Your changes have been saved.
Info New features are available in settings.

Text hierarchy

Heading (primary color)

Body text uses text primary for readability.

Caption or secondary label uses text secondary.

Disabled or muted uses text disabled.

Spacing & radius

sm md lg

Shadow & transition

none sm md lg
fast normal slow

Typography

Sans: The quick brown fox
Serif: The quick brown fox
Mono: The quick brown fox
xs sm base lg xl