You can customize the look and feel of the Style Upload iFrame by passing a config object in the initialization message.
const config = {
theme: {
primaryColor: "#1e293b",
accentColor: "#10b981",
backgroundColor: "#f8fafc"
},
layout: {
padding: "1.5rem",
cardBorderRadius: "0.75rem",
cardGap: "2rem"
}
};theme Options #Control the colors of the style uploader.
| Parameter | Type | Default | Description |
|---|---|---|---|
| primaryColor | string | #1e293b | Primary button color (Continue, Create Style buttons). |
| accentColor | string | #10b981 | Accent color for progress indicators, success states, and checkmarks. |
| backgroundColor | string | #f8fafc | Background color of the main container area. |
layout Options #Control the spacing and appearance of elements.
| Parameter | Type | Default | Description |
|---|---|---|---|
| padding | string | 1.5rem | CSS padding for the entire container. Use `0` for edge-to-edge layout. |
| cardBorderRadius | string | 0.75rem | Border radius for all cards. Use `0` for sharp corners. |
| cardGap | string | 2rem | Space between cards (e.g., `1rem`, `24px`). |