# Control an embed's theme and size

Copy as Markdown[View as Markdown](/docs/plugins/backstage/control-theme-and-size.md)

***

Every EventCatalog page and card component accepts a `theme` prop.

## Select a theme[​](#select-a-theme "Direct link to Select a theme")

Set `theme` to `light` or `dark`:

```
<EventCatalogDocumentationEntityPage page="docs" theme="dark" />

<EventCatalogEntityArchitectureGraphCard
  type="service"
  depth={2}
  theme="light"
/>
```

When `theme` is omitted, the embedded page uses the visitor's saved EventCatalog theme. The explicit prop affects that embed; it does not overwrite the visitor's saved preference.

To make every EventCatalog view in a Backstage app consistent, pass the same theme to each page and card component.

## Give cards an explicit height[​](#give-cards-an-explicit-height "Direct link to Give cards an explicit height")

The plugin iframe uses `height: 100%`, which means its height is inherited from its parent. Set the height on the Backstage grid item or another wrapping element:

```
<Grid item xs={12} style={{ height: 800 }}>
  <EventCatalogEntityArchitectureGraphCard
    type="service"
    depth={2}
    theme="dark"
  />
</Grid>
```

Avoid percentage heights unless every ancestor has a defined height. A fixed height, viewport-relative height, or layout-controlled height gives the iframe a concrete area to fill:

```
<Grid item xs={12} style={{ height: 'calc(100vh - 240px)', minHeight: 600 }}>
  <EventCatalogEntitySchemaExplorerCard theme="dark" />
</Grid>
```

Full-page components automatically fill the height made available by the `EntityLayout.Route`. If a custom route wrapper collapses, give that wrapper an explicit height too.