> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://uploadcare.com/docs/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://uploadcare.com/docs/_mcp/server.

# AI Image Editor theming

> Style the AI Image Editor editor with --uc-ai-* CSS custom properties for colors, shape, layout, and motion.

The editor is styled entirely through CSS custom properties on the element.
When used as a [File Uploader plugin](/docs/file-uploader/ai-image-editor/), most
tokens inherit from the uploader's `--uc-*` theme automatically. Set any of
these to customize:

```css
uc-ai-image-editor {
  --uc-ai-primary: #6d28d9;
  --uc-ai-radius: 20px;
  --uc-ai-dot-grid-color: #2a2a2a;
}
```

| Token group     | Tokens                                                                                                                                                                                                                                                                                                                                                                                                     |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Color           | `--uc-ai-foreground`, `--uc-ai-background`, `--uc-ai-floating`, `--uc-ai-floating-border`, `--uc-ai-muted`, `--uc-ai-muted-foreground`, `--uc-ai-primary`, `--uc-ai-primary-hover`, `--uc-ai-primary-foreground`, `--uc-ai-primary-transparent`, `--uc-ai-secondary`, `--uc-ai-secondary-hover`, `--uc-ai-secondary-foreground`, `--uc-ai-border`, `--uc-ai-destructive`, `--uc-ai-destructive-foreground` |
| Shape           | `--uc-ai-radius`, `--uc-ai-radius-button`, `--uc-ai-radius-card`, `--uc-ai-radius-frame`, `--uc-ai-radius-input`                                                                                                                                                                                                                                                                                           |
| Layout & type   | `--uc-ai-padding`, `--uc-ai-button-size`, `--uc-ai-font-family`, `--uc-ai-font-size`                                                                                                                                                                                                                                                                                                                       |
| Canvas / motion | `--uc-ai-dot-grid-color`, `--uc-ai-shadow-color`, `--uc-ai-dialog-shadow`, `--uc-ai-transition`, `--uc-ai-ease-in-out`, `--uc-ai-ease-out`                                                                                                                                                                                                                                                                 |
| Prompt          | `--uc-ai-prompt-max-height`, `--uc-ai-prompt-max-lines`                                                                                                                                                                                                                                                                                                                                                    |

The [API reference](https://uploadcare.github.io/ai-image-editor/api/components?utm_source=uploadcare-docs\&utm_medium=docs\&utm_campaign=ai-image-editor#css-properties)
lists every CSS custom property the component exposes.