Dashboard Themes

Themes control the look and feel of dashboards across your workspace: typography, colors, spacing, and visualization styling. Use them to align dashboards with your company branding, build a consistent visual language across teams, or create dark-themed dashboards.

Themes can be defined once and reused organization-wide, or applied ad-hoc to a single dashboard. Typically, admins and analysts define reusable themes for the workspace, while any dashboard builder can apply or override them locally.

You can customize:

Typography: Modify the font family, font size of text and data labels
Colors: Customize the color of dashboard backgrounds, borders, and other elements
Canvas & block styling: Add paddings, shadows, or even use custom images as backgrounds
Visualization styling:
- Table visualization: Customize font size, color, and borders of your table visualizations.
- KPI Metric visualization: Customize alignment, label and value fonts, progress bar colors, and trend indicator styles.

High-level concepts

Theme types

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

Name	Description
Pre-built themes (or reusable themes)	Pre-built themes that can be applied across multiple dashboards, providing consistency and efficiency. There are two sub-types: System themes: Built-in themes created by Holistics Custom themes: Reusable 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

Pre-built themes (or reusable themes)

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

System themes: Built-in themes created by Holistics
Custom themes: Reusable 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

Dashboard themes comprise 4 main levels: Page theme, Canvas theme, Block theme, and Viz theme. Each level allows for the definition of its associated properties. (See Syntax References for details.)

Level	Description	Customizable properties
Page theme	Control the styling of the outermost container of the Canvas (the viewport surrounding the entire canvas area).	Background color
Canvas theme	Control the styling of the primary reporting area that contains all dashboard blocks.	Background, border, shadow, opacity
Block theme	Control the styling of analytics blocks.	Label (block title) Text font styles Border Background Shadow Padding Opacity
Viz theme	Control the styling for data visualizations.	Table theme: Background, font styles, hover/banding colors, borders, and grid lines — with overrides for headers, sub-headers, and subtitles. Applies to Data Table, Pivot Table, and Metric Sheet. KPI Metric theme: Alignment, label/value fonts, progress bar, and trend indicator styles. Other chart themes (column, line, pie, etc.): to be supported.

How-to

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.

Apply pre-built themes

You can apply pre-built themes to your Canvas Dashboard using either the GUI or code approach:

GUI Method:

Open Themes Setting at the top right corner of your dashboard
Choose from either system themes (built-in by Holistics) or your organization's custom themes

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

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

Dashboard ecommerce_dashboard {
  theme: theme_name // custom, reusable themes
}

Create a new 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 pre-built theme
}

Create new custom themes (or reusable themes)

To make a theme reusable across your team, declare it as a named PageTheme in a shared AML file.

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

Step 1: Declare a reusable variable for the PageTheme using AML Constant.
Step 2: Apply the custom theme from the Themes menu; or call the variable at the dashboard's theme parameter.

Best Practice

While reusable themes can be declared anywhere in your project, we recommend organizing them in a separate file (e.g. themes.aml) for better management.

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:

Modify specific blocks

To style a specific block or override the dashboard theme for it, define the theme inline:

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

Another example is overriding at the VizTheme level. For a table visualization:

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

For a KPI Metric visualization:

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

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 */
  ;;
}

Reusing themes with AML reusability

You can use AML reusability features to make it easier to modify and reuse themes. For examples:

Make it easier to change color and font family without worrying about consistency

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 polluting project namespace

// 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​

How-to​

Apply pre-built themes​

Create a new Local theme​

Create new custom themes (or reusable themes)​

Modify specific blocks​

Custom CSS​

Reusing themes with AML reusability​

Make it easier to change color and font family without worrying about consistency​

Use AML Dict to avoid polluting project namespace​

Syntax Reference​