---
url: https://docs.ridgedata.ai/guide/theming.md
---
# Theming

Both embed types use the dashboard's published theme. JavaScript embeds also accept theme
overrides when you load them. To change an iframe's theme, update and publish it in Ridge.

## Choose a theme

::: code-group

```text [Iframe]
Configure and publish the dashboard theme in Ridge.

The iframe uses the published theme. CSS from your app does not apply inside the iframe.
```

```js [JavaScript]
import { RidgeEmbed } from "https://app.ridgedata.ai/api/embed/loader";

const ridge = await RidgeEmbed.load({
  jwt: token,
  dashboardId: "dashboard-id-123",
  rootElementId: "ridge-dashboard",
  theme: {
    light: {
      background: "#ffffff",
      foreground: "#1a1a1a",
      primary: "#3b5bdb"
    },
    dark: {
      background: "#111318",
      foreground: "#e8e8e8"
    }
  }
});
```

:::

The JavaScript embed uses a shadow root, so your app's CSS selectors do not apply to its
contents. Set `theme` to customize its appearance.

## Theme structure

| Key     | Purpose                                   |
| ------- | ----------------------------------------- |
| `light` | UI variables for light mode.              |
| `dark`  | UI variables for dark mode.               |
| `data`  | Colors used by charts and visualizations. |

All keys are optional. An omitted value falls back to the dashboard's theme.

## UI variables

`light` and `dark` accept the same keys:

`radius`, `background`, `foreground`, `card`, `card-border`, `card-foreground`, `popover`,
`popover-foreground`, `primary`, `primary-foreground`, `secondary`, `secondary-foreground`,
`muted`, `muted-foreground`, `accent`, `accent-foreground`, `destructive`, `positive`,
`negative`, `border`, `input`, `ring`, `data-empty`.

Every value except `radius` is a CSS color. `radius` is a CSS length such as `"0.5rem"`.
Set foreground/background pairs together to preserve contrast.

## Chart colors

For JavaScript embeds, set chart colors in `theme.data`:

::: code-group

```text [Iframe]
Configure chart colors in the dashboard's published theme in Ridge.
```

```js [JavaScript]
theme: {
  data: {
    color: "#3b5bdb",
    colorDark: "#748ffc",
    background: "#fafafa",
    categorical: ["#3b5bdb", "#f76707", "#2f9e44", "#e03131"],
    sequential: "blues",
    diverging: "rdbu"
  }
}
```

:::

Categorical, sequential, and diverging palettes accept a built-in scheme name or an
explicit list of at least two CSS colors. Check contrast and color-vision accessibility in
every mode you support.