Looking for Dashboard < 0.12.0, or the Query Engine < v0.10.0?
Dashboard
Properties
theme

theme

The theme property allows you to change the look and feel of <Vizzly.Dashboard/>.

Default Theme

<Vizzly.Dashboard/> uses a default theme. To override these defaults, use theme properties.

Default theme (opens in a new tab)

Base Settings

<Vizzly.Dashboard/> inherits the following CSS properties from parent elements:

  • background color.
  • font-family, font-weight, color, line-height, and text-transform.

To preserve accessibility, some areas of <Vizzly.Dashboard/> do not inherit the properties above, these include chart title, subject, labels, axisTitles, table th, and table cells.

Properties

CSS Variables

Already use CSS Variables in your codebase? Pass CSS Variables directly to <Vizzly.Dashboard/> (example below).

More about CSS variables (opens in a new tab).

import Vizzly, { type VizzlyTheming } from "@vizzly/dashboard"
 
export function Dashboard() {
  const theme: VizzlyTheming.Base = {
    rowLimit: 6,
    detail: "minimal",
    forms: {
      select: {
        background: "var(--dk-mode-color-1)",
        borderRadius: "var(--border-radius)",
        border: "1px solid var(--border-color)",
        fontSize: "var(--font-size-standard)",
        padding: "6.25px 0.5rem",
        boxShadow: "inset 0 0 0 1px  transparent",
        color: "var(--dk-mode-color-3)",
        "&:hover": {
          border: "1px solid var(--dk-mode-highlight-color)",
          boxShadow: "inset 0 0 0 1px transparent",
        },
        "&:focus": {
          border: "1px solid var(--dk-mode-highlight-color)",
        },
        indicatorColor: "var(--dk-mode-highlight-color)",
      },
    },
    dropdowns: {
      fontSize: "var(--font-size-small)",
      background: "var(--dk-mode-color-2)",
      color: "var(--dk-mode-color-3)",
      boxShadow: "0 8px 24px var(--dk-mode-color-1)",
      borderRadius: "var(--border-radius)",
      border: "1px solid var(--border-color)",
      separatorBorder: "1px solid var(--border-color)",
      "&:hover": {
        background: "#6e76811a",
      },
      padding: "7px 18px",
    },
  }
 
  return (
    <Vizzly.Dashboard
      // ...
      theme={theme}
    />
  )
}