Theming

Both mechanisms render the dashboard's published theme. The inline embed can additionally override that theme for one mount; the iframe embed does not support runtime overrides.

Choose a theme

Iframe

Configure and publish the dashboard theme in Ridge.

The iframe renders that published theme in its own document. Host-page CSS and runtime
theme options cannot reach across the iframe boundary.

Inline

const ridge = await window.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 inline dashboard mounts inside a shadow root, so ordinary host-page selectors do not style it. Use theme rather than targeting Ridge internals.

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

Chart overrides are inline-only, because the iframe embed does not support runtime overrides.

Iframe

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

Inline

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.