Interface MetabaseTheme

Type Declaration

• Optionalcartesian?: {
      goalLine?: { label?: { fontSize?: string } };
      label?: { fontSize?: string };
      padding?: string;
      splitLine?: { lineStyle?: { color?: string } };
  }

  Cartesian charts

  • OptionalgoalLine?: { label?: { fontSize?: string } }

    • Optionallabel?: { fontSize?: string }

      • OptionalfontSize?: string

        Font size of goal line labels

  • Optionallabel?: { fontSize?: string }

    • OptionalfontSize?: string

      Labels used in cartesian charts, such as axis ticks and series.

  • Optionalpadding?: string

    Padding around the chart.

  • OptionalsplitLine?: { lineStyle?: { color?: string } }

• OptionalcollectionBrowser?: {
      breadcrumbs?: {
          expandButton?: {
              backgroundColor?: string;
              hoverBackgroundColor?: string;
              hoverTextColor?: string;
              textColor?: string;
          };
      };
      emptyContent?: {
          icon?: { height?: Width<(...) | (...)>; width?: Width<(...) | (...)> };
          subtitle?: { fontSize?: FontSize<(...) | (...)> };
          title?: { fontSize?: FontSize<(...) | (...)> };
      };
  }

• Optionaldashboard?: {
      backgroundColor?: string;
      card?: { backgroundColor?: string; border?: string };
      gridBorderColor?: string;
  }

  • OptionalbackgroundColor?: string

  • Optionalcard?: { backgroundColor?: string; border?: string }

    • OptionalbackgroundColor?: string

    • Optionalborder?: string

      Add custom borders to dashboard cards when set. Value is the same as the border property in CSS, such as "1px solid #ff0000". This will replace the card's drop shadow.

  • OptionalgridBorderColor?: string

    Border color of the dashboard grid, shown only when editing dashboards. Defaults to colors.border

• Optionalnumber?: { value?: { fontSize?: FontSize<string | number>; lineHeight?: string } }

  Number chart

  • Optionalvalue?: { fontSize?: FontSize<string | number>; lineHeight?: string }

    Value displayed on number charts. This also applies to the primary value in trend charts.

• OptionalpivotTable?: {
      cell?: { fontSize?: string };
      rowToggle?: { backgroundColor?: string; textColor?: string };
  }

  Pivot table *

  • Optionalcell?: { fontSize?: string }

    • OptionalfontSize?: string

      Font size of cell values, defaults to ~12px

  • OptionalrowToggle?: { backgroundColor?: string; textColor?: string }

    Button to toggle pivot table rows

• Optionalpopover?: { zIndex?: number }

  Popover

  • OptionalzIndex?: number

    z-index of overlays. Useful for embedding components in a modal. Defaults to 200.

• Optionalquestion?: { backgroundColor?: string; toolbar?: { backgroundColor?: string } }

  • OptionalbackgroundColor?: string

    Background color for all questions

  • Optionaltoolbar?: { backgroundColor?: string }

    Toolbar of the default interactive question layout

• Optionaltable?: {
      cell?: {
          backgroundColor?: string;
          fontSize?: string;
          textColor?: string;
      };
      idColumn?: { backgroundColor?: string; textColor: string };
      stickyBackgroundColor?: string;
  }

  Data tables *

  • Optionalcell?: { backgroundColor?: string; fontSize?: string; textColor?: string }

    • OptionalbackgroundColor?: string

      Default background color of cells, defaults to background

    • OptionalfontSize?: string

      Font size of cell values, defaults to ~12.5px

    • OptionaltextColor?: string

      Text color of cells, defaults to text-primary.

  • OptionalidColumn?: { backgroundColor?: string; textColor: string }

    • OptionalbackgroundColor?: string

      Background color of ID column, defaults to lighten(brand)

    • textColor: string

      Text color of ID column, defaults to brand.

  • OptionalstickyBackgroundColor?: string

    Background color of the table header that stays fixed while scrolling. Defaults to white if no cell background color is set

• Optionaltooltip?: {
      backgroundColor?: string;
      focusedBackgroundColor?: string;
      secondaryTextColor?: string;
      textColor?: string;
  }

  Tooltip

  • OptionalbackgroundColor?: string

    Tooltip background color.

  • OptionalfocusedBackgroundColor?: string

    Tooltip background color for focused rows.

  • OptionalsecondaryTextColor?: string

    Secondary text color shown in the tooltip, e.g. for tooltip headers and percentage changes.

  • OptionaltextColor?: string

    Tooltip text color.