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

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.

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:

Iframe

Configure chart colors in the dashboard's published theme in Ridge.

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.