Theme Creator

Build a polished theme visually, preview it live, then export app, editor, CSS, or design-token files.

Editor

All values are saved in the exported JSON.

Metadata

Palette Presets

Palette presets change the UI colors in the preview. Shiki themes below only affect syntax/code-block colors.

Core Colors

Surface colors cards, sidebars, fields, popovers

Live Preview

Switch mode without changing editor tab.
Using light palette
Theme preview session
Simulated app interface
Ask to Edit✓ Source OK
Assistant
Here is how your colors feel in a real conversation card. Foreground, paper, and popover surfaces all work together here.
Looks great — can you execute the export?
Tool result
Your accent color is used for primary actions and selected navigation states.
Theme validation
JSON schema-ready✓ Passed
Syntax previewgithub-light
// Shiki theme controls code block colors
export function createTheme(mode) {
  const accent = "#8b5cf6";
  return { mode, accent, steps: 3 };
}
Message assistant…