export const frontmatter = {
  title: 'Theming',
  description: 'Style widgets with natural-language design specs.'
};

Themes are natural-language design specs that guide code generation.

## List available themes

```python
import vibe_widget as vw

themes = vw.themes()
themes
```

`vw.themes()` pretty-prints a concise list in notebooks. To get the full dict, use `dict(themes)`.

## Create a custom theme

```python
theme = vw.theme("like national geographic but greener")

# Inspect or reuse the generated description
print(theme.description)

vw.create("...", df, theme=theme.description)
```

## Use a theme in create

```python
vw.create("...", df, theme="financial_times")
```

## Iterate with themes

Edits reuse the existing theme by default, so your visual language stays consistent as you refine
behavior or layout.

<WidgetPreview src="/widgets/scatter_themed_ft.js" height={380} />

```python
v1 = vw.create("basic scatter", df, theme="financial_times")
```

<WidgetPreview src="/widgets/scatter_tooltips_legend.js" height={420} />

```python
v2 = v1.edit("add hover tooltips and a right-side legend")
```

You can override the theme on an edit when you want a new look:

```python
v3 = v2.edit("soften the palette and reduce gridlines", theme="paper_white")
```
