Dashboard Themes

Themes give you full control over how your dashboards look — typography, colors, spacing, and visualization styling. Define them once to enforce consistent branding across your workspace, or apply them ad-hoc to a single dashboard.

You can customize:

Typography: Font family and size for text and data labels
Colors: Dashboard backgrounds, borders, and other UI elements
Canvas & block styling: Padding, shadows, and background images
Visualization styling: Tables, KPI metrics, and chart color palettes

High-level concepts

Theme types

There are two types of themes in Holistics: reusable themes, and local themes. Each serves different use cases:

Name	Description
Reusable themes	Themes that can be applied across multiple dashboards, providing consistency and efficiency. There are two sub-types: Built-in themes: Ready-to-use themes shipped by Holistics Custom themes: Themes created by your team's admins and analysts, saved for organization-wide use These themes can be selected from a dropdown menu when styling any dashboard.
Local themes (or ad-hoc themes)	Local customizations applied directly to a specific dashboard that cannot be reused elsewhere. Perfect for: Quick one-off styling adjustments Dashboard-specific branding requirements Prototyping theme ideas before creating reusable versions

Name

Description

Reusable themes

Themes that can be applied across multiple dashboards, providing consistency and efficiency. There are two sub-types:

Built-in themes: Ready-to-use themes shipped by Holistics
Custom themes: Themes created by your team's admins and analysts, saved for organization-wide use

These themes can be selected from a dropdown menu when styling any dashboard.

Local themes (or ad-hoc themes)

Local customizations applied directly to a specific dashboard that cannot be reused elsewhere. Perfect for:

Quick one-off styling adjustments
Dashboard-specific branding requirements
Prototyping theme ideas before creating reusable versions

Theme components

A theme is defined as a PageTheme object that contains the following sections:

Section	Description
`color`	Default color palette for all charts in the dashboard
`background`	Background of the outermost page viewport
`canvas`	Styling for the main canvas area: background, border, shadow, opacity
`block`	Default styling for all blocks: label, text, border, background, shadow, padding, opacity
`viz`	Default styling for data visualizations
`custom_css`	Custom CSS injected into the dashboard

See AML Theme Reference for full syntax details.

Apply a theme

You can apply reusable themes to your canvas dashboards using either the GUI or code approach:

GUI: Open Themes setting at the top right corner of your dashboard and choose from either built-in or custom themes:

Code: Reference the theme directly in your dashboard code in Development using the following syntax:

Dashboard ecommerce_dashboard {
  theme: H.themes.name // built-in themes
}

Dashboard ecommerce_dashboard {
  theme: theme_name // custom themes
}

Create a theme

Use the Theme Builder

Themes are currently configured in AML code with no built-in visual editor. To make this easier, use the external Theme Builder: an interactive sandbox to design and preview your theme visually, then copy the generated AML code into Holistics.

Create a local theme

Local themes are defined directly within your dashboard code using the theme parameter. When your dashboard uses a local theme, you'll see a local theme indicator in the Theme Settings panel:

Syntax:

Dashboard ecommerce_dashboard {
  theme {} // normal local theme
}

Dashboard ecommerce_dashboard {
  theme: PageTheme {} // normal local theme, using AML syntax
}

Dashboard ecommerce_dashboard {
  theme: theme_name.extend({}) // local theme created from extending a reusable theme
}

Create a reusable theme

To create a reusable custom theme, simply follow these steps:

Go to Development > Library > Themes and create a new .theme.aml file with a PageTheme definition.
Once saved, apply it from the Theme settings menu or reference it directly in your dashboard code via the theme parameter.

For example, here we create a themes.aml file to declare a custom theme named classic_blue, and then reference it in the dashboard file under the theme parameter:

ecommerce_dashboard.page.aml
themes.aml

Dashboard ecommerce_dashboard {
  title: "eCommerce dashboard"
  
  theme: classic_blue
  ...
}

PageTheme classic_blue {
  background {
    bg_color: "#FFFFFF"
    bg_repeat: false
    bg_size: "cover"
    // bg_image:
  }
  canvas {
    border {
      border_radius: 4
      border_width: 1
      border_color: "#4896EA"
      border_style: "solid"
    }
    background {
      bg_color: "#D1E5FA"
      bg_repeat: false
      bg_size: "cover"
      // bg_image:
    }
    shadow: "none"
    opacity: 1
  }
  // Block Theme
  block {
    label {
      font_family: "Inter"
      font_size: 14
      font_color: "#1357A0"
      font_weight: "medium"
      font_style: "normal"
      // letter_spacing:
      // text_decoration:
      // text_transform:
    }
    text {
      font_family: "Inter"
      font_size: 12
      font_color: "#1357A0"
      font_weight: "normal"
      font_style: "normal"
      // letter_spacing:
      // text_decoration:
      // text_transform:
    }
    border {
      border_width: 1
      border_radius: 8
      border_color: "#4896EA"
      border_style: "solid"
    }
    background {
      bg_color: "#E8F2FD"
      bg_repeat: false
      bg_size: "cover"
      // bg_image:
    }
    padding: 12
    shadow: "none"
    opacity: 1
  }
  //Viz Theme
  viz {
    // Table Theme
    table {
      general {
        bg_color: 'white'
        hover_color: '#C8DCF2'
        banding_color: '#EAF5FC'
        font_size: 12
        font_color: '#505D6A'
        font_family: 'Arial'
        border_color: '#90A2B7'
        border_width: 1
        grid_color: '#90A2B7'
      }
      header {
        bg_color: '#608EC3'
        font_size: 12
        font_color: 'white'
        font_weight: 'bold'
      }
      
      // Pivot table properties
      sub_header {
        bg_color: '#AECEF2'
        font_size: 12
        font_color: '#505D6A'
        font_weight: 'bold'
      }

      // Metric Sheet properties
      sub_title {
        font_size: 12
        font_color: '#505D6A'
        font_weight: 'bold'
      }
    }

    // KPI Metric Theme
    metric_kpi {
      alignment: "center"
      label {
        font_family: "Inter"
        font_size: 14
        font_color: "#64748B"
        font_weight: "medium"
      }
      value {
        font_family: "Inter"
        font_size: 32
        font_color: "#1357A0"
        font_weight: "bold"
      }
      progress {
        text {
          font_size: 12
          font_color: "#505D6A"
        }
        indicator {
          bg_color: "#4896EA"
        }
        track {
          bg_color: "#D1E5FA"
        }
      }
      trend {
        positive {
          text { font_color: "#15803D" }
          background { bg_color: "#DCFCE7" }
        }
        negative {
          text { font_color: "#B91C1C" }
          background { bg_color: "#FEE2E2" }
        }
        neutral {
          text { font_color: "#475569" }
          background { bg_color: "#F1F5F9" }
        }
      }
    }
  }
}

Result:

Set a chart color palette

You can set a default color palette for all charts in a dashboard by referencing it in your theme:

PageTheme my_theme {
  color {
    data: palette_name
  }
}

The palette priority order is: viz-level palette > theme palette > project default palette. If no palette is set at a given level, it falls through to the next.

Add custom CSS

You can include CSS snippets directly in your theme using the custom_css parameter and reuse it across dashboards. Read more for details and examples.

PageTheme classic {
  // existing theme properties
  custom_css: @css
    /* your custom CSS rules here */
  ;;
}

Customize individual blocks

Block and viz styling works at two levels:

Theme level: Define inside a PageTheme to set defaults for any dashboard using that theme:
- block {} applies to all block types
- viz {} applies only to Viz blocks
Block level: Define overrides on a specific block in your dashboard file using BlockTheme (for block container styling) or VizTheme (for viz content inside a Viz block) to customize that specific block only.

Override block styling

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

Override viz styling

Currently, viz-level styling is supported for Table, Pivot Table, Metric Sheet, and KPI Metric visualizations.

Table
KPI Metric

Dashboard ecommerce_dashboard {
  block table_name: VizBlock {
    ...
    viz: PivotTable {
      ...
      theme: VizTheme {
        table {
          general {
            bg_color: 'white'
          }
        }
      }
    }
  }
}

Dashboard ecommerce_dashboard {
  block kpi_name: VizBlock {
    ...
    viz: MetricKpi {
      ...
      theme: VizTheme {
        metric_kpi {
          alignment: "center"
          value {
            font_color: "#1357A0"
            font_weight: "bold"
          }
          trend {
            positive {
              background { bg_color: "#DCFCE7" }
            }
            negative {
              background { bg_color: "#FEE2E2" }
            }
          }
        }
      }
    }
  }
}

Reuse theme values

Theme definitions often repeat the same values - the same color code or font family appearing across block, canvas, and viz sections. You can use AML reusability features to define these values once and reference them throughout, so a single change updates the whole theme.

Use constants for reusable values

const classic_blue_border_color = "#4896EA"
const classic_blue_font_color = "#1357A0"
const classic_blue_font_family = "Inter"

PageTheme classic_blue {
  // other properties omitted...
  canvas {
    border {
      // other properties omitted...
      border_color: classic_blue_border_color
    }
  }
  block {
    // other properties omitted...
    label {
      // other properties omitted...
      font_family: classic_blue_font_family
    }
    text {
      // other properties omitted...
      font_family: classic_blue_font_family
    }
    border {
      // other properties omitted...
      border_color: classic_blue_border_color
    }
  }
}

Use AML Dict to avoid namespace pollution

// Instead of separate constant for each variable
// const classic_blue_border_color = "#4896EA"
// const classic_blue_font_color = "#1357A0"
// const classic_blue_font_family = "Inter"

// You can use an AML Dict instead
const classic_blue_vars = {
    border_color: "#4896EA"
    font_color: "#1357A0"
    font_family: "Inter"
}
// then use it like this
PageTheme classic_blue {
  // other properties omitted...
  canvas {
    border {
      // other properties omitted...
      border_color: classic_blue_vars("border_color")
    }
  }
}

Syntax Reference

For a full parameter reference for PageTheme, BlockTheme, and VizTheme, see the AML Theme Reference.

tip

Hover over PageTheme, BlockTheme or VizTheme in the code editor to see suggestions for available parameters.

High-level concepts​

Theme types​

Theme components​

Apply a theme​

Create a theme​

Create a local theme​

Create a reusable theme​

Set a chart color palette​

Add custom CSS​

Customize individual blocks​

Override block styling​

Override viz styling​

Reuse theme values​

Use constants for reusable values​

Use AML Dict to avoid namespace pollution​

Syntax Reference​