AML Theme

Knowledge Checkpoint

A grasp of these concepts will help you understand this documentation better:

• Dashboard Themes

Dashboard themes in Holistics are defined using three AML objects: PageTheme, BlockTheme, and VizTheme. These can be declared inline in a dashboard file or in a shared file (e.g. themes.aml) for reuse across dashboards. Each object maps to a level in the dashboard visual hierarchy:

// Reusable theme declared in themes.aml
PageTheme my_theme {
  canvas { ... }
  block { ... }
  viz { ... }
}

See Dashboard Themes for how-to guides on applying and creating themes.

PageTheme

PageTheme is the top-level theme object. It controls the full visual hierarchy of a dashboard: page background, canvas area, block styling, and visualization styling.

Parameter name	Description
background	Background of the outer page viewport
canvas	Styling for the main canvas area
block	Default styling for all blocks
viz	Default styling for all visualizations
custom_css	Custom CSS injected into the dashboard

background

Controls the outermost page container (the viewport surrounding the canvas).

Parameter	Description	Accepted values
bg_color	Background color	Any valid CSS <color> e.g. "#ffffff", "rgb(255 0 153)"
bg_image	Background image	Any valid CSS <image> e.g. "https://...", "linear-gradient(blue, red)"
bg_repeat	How the background image repeats	false, true, "x", "y", "space", "round"
bg_size	How the background image is sized	"cover", "contain"

canvas

Controls the primary reporting area that contains all dashboard blocks.

Parameter	Description	Accepted values
border.border_width	Canvas border width	Number, String, or DetailedSpacing
border.border_radius	Canvas corner roundness	Number, String, or DetailedRadius
border.border_color	Canvas border color	Any valid CSS <color>
border.border_style	Canvas border style	"none", "solid", "dotted", "dashed", "inset", "outset", "ridge", "groove", "double"
background.bg_color	Canvas background color	Any valid CSS <color>
background.bg_image	Canvas background image	Any valid CSS <image>
background.bg_repeat	How the canvas background image repeats	false, true, "x", "y", "space", "round"
background.bg_size	How the canvas background image is sized	"cover", "contain"
shadow	Canvas shadow effect	"none", "sm", "md", "lg"
opacity	Canvas opacity	Number between 0 and 1

block

Default styling applied to all blocks in the dashboard. Can be overridden per block using BlockTheme.

Parameter	Description	Accepted values
label.font_family	Font family for block titles	Web-safe or custom fonts. Learn more e.g. "Inter", "Arial, sans-serif"
label.font_size	Font size for block titles	Any valid CSS <length> e.g. 14, "14px", "2em"
label.font_color	Font color for block titles	Any valid CSS <color>
label.font_weight	Font weight for block titles	"light", "normal", "medium", "semibold", "bold", "extrabold"
label.font_style	Font style for block titles	"normal", "italic"
label.letter_spacing	Letter spacing for block titles	Any valid CSS letter-spacing e.g. 1, "0.05em"
label.text_decoration	Text decoration for block titles	"underline", "overline", "line-through"
label.text_transform	Text transform for block titles	"uppercase", "lowercase", "capitalize"
text.font_family	Font family for block text content	Web-safe or custom fonts. Learn more
text.font_size	Font size for block text content	Any valid CSS <length>
text.font_color	Font color for block text content	Any valid CSS <color>
text.font_weight	Font weight for block text content	"light", "normal", "medium", "semibold", "bold", "extrabold"
text.font_style	Font style for block text content	"normal", "italic"
text.letter_spacing	Letter spacing for block text content	Any valid CSS letter-spacing
text.text_decoration	Text decoration for block text content	"underline", "overline", "line-through"
text.text_transform	Text transform for block text content	"uppercase", "lowercase", "capitalize"
border.border_width	Block border width	Number, String, or DetailedSpacing
border.border_radius	Block corner roundness	Number, String, or DetailedRadius
border.border_color	Block border color	Any valid CSS <color>
border.border_style	Block border style	"none", "solid", "dotted", "dashed", "inset", "outset", "ridge", "groove", "double"
background.bg_color	Block background color	Any valid CSS <color>
background.bg_image	Block background image	Any valid CSS <image>
background.bg_repeat	How the block background image repeats	false, true, "x", "y", "space", "round"
background.bg_size	How the block background image is sized	"cover", "contain"
padding	Internal block padding	Number, String, or DetailedSpacing
shadow	Block shadow effect	"none", "sm", "md", "lg"
opacity	Block opacity	Number between 0 and 1

viz

Default styling for data visualizations. Currently supports table-based visualizations (Data Table, Pivot Table, Metric Sheet).

viz.table

Note: Table styling has an override hierarchy: general styles are overridden by header, then sub_header, then sub_title.

Parameter	Description	Accepted values
general.bg_color	Table body background color	Any valid color value e.g. "#ffffff"
general.hover_color	Row hover background color	Any valid color value
general.banding_color	Alternating row color	Any valid color value
general.font_size	Font size for all table text	Number or String e.g. 12, "12px"
general.font_color	Font color for all table text	Any valid color value
general.font_family	Font family for all table text	Any valid font family name
general.border_color	Table outer border color	Any valid color value
general.border_width	Table border and grid line thickness	Number or String
general.grid_color	Table grid line color	Any valid color value
header.bg_color	Header background color	Any valid color value
header.font_size	Header font size	Number or String
header.font_color	Header font color	Any valid color value
header.font_weight	Header font weight	"light", "normal", "medium", "semibold", "bold", "extrabold"
sub_header.bg_color	Pivot Table sub-header background color	Any valid color value
sub_header.font_size	Pivot Table sub-header font size	Number or String
sub_header.font_color	Pivot Table sub-header font color	Any valid color value
sub_header.font_weight	Pivot Table sub-header font weight	"light", "normal", "medium", "semibold", "bold", "extrabold"
sub_title.font_size	Metric Sheet subtitle font size	Number or String
sub_title.font_color	Metric Sheet subtitle font color	Any valid color value
sub_title.font_weight	Metric Sheet subtitle font weight	"light", "normal", "medium", "semibold", "bold", "extrabold"

custom_css

Injects custom CSS into the dashboard. Accepts any valid CSS code.

PageTheme my_theme {
  custom_css: @css
    .my-class { color: red; }
  ;;
}

See Custom CSS for details and examples.

---

BlockTheme

BlockTheme overrides the block styling from PageTheme for a specific block. It accepts the same parameters as the block section of PageTheme.

Dashboard my_dashboard {
  block text_block: TextBlock {
    theme: BlockTheme {
      background {
        bg_color: 'transparent'
      }
    }
  }
}

---

VizTheme

VizTheme overrides the visualization styling from PageTheme for a specific visualization block. It accepts the same parameters as the viz section of PageTheme.

Dashboard my_dashboard {
  block viz_block: VizBlock {
    viz: PivotTable {
      theme: VizTheme {
        table {
          general {
            bg_color: 'white'
          }
        }
      }
    }
  }
}

---

Helper types

DetailedSpacing

Used for specifying different spacing values for each side of an element (e.g. border_width, padding).

Property	Description	Type
top	Spacing for the top side	Number or String
left	Spacing for the left side	Number or String
bottom	Spacing for the bottom side	Number or String
right	Spacing for the right side	Number or String

padding: {
  top: 10,
  left: "5px",
  bottom: 10,
  right: "5px"
}

DetailedRadius

Used for specifying different border-radius values for each corner of an element (e.g. border_radius).

Property	Description	Type
top_left	Radius for the top-left corner	Number or String
top_right	Radius for the top-right corner	Number or String
bottom_left	Radius for the bottom-left corner	Number or String
bottom_right	Radius for the bottom-right corner	Number or String

border_radius: {
  top_left: 5,
  top_right: "10px",
  bottom_left: 5,
  bottom_right: "10px"
}