Dashboard Themes

Introduction

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.

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. Note: Table theme has an override mechanism for better controlling table styling: General styling is overridden by headers, sub-headers, and subtitles, in that order.	Table theme: Styling for table-based visualizations, including: Data Table, Pivot Table, Metric Sheet. Customizable properties: General styling: background, font styles, hover color, banding color, border, grid lines color. Headers Sub-headers Subtitles `(To be supported)` Other visualization type themes: Column charts, Line charts, Pie charts, etc.

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:

Holistics offers different customization levels to provide more granular control over your dashboard styling:

Page Theme: Properties that apply to the entire Canvas Dashboard page
Block Theme: Properties that apply to individual blocks, overriding the Page Theme settings
Visualization Theme (Viz Theme): Properties that apply to the data visualization in visualization blocks.
- Table Theme: Properties that apply to Table family visualizations (Data Table, Pivot Table and Metric Sheet).

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)

If you want your created themes to be reusable by other team members, you can convert them to custom themes using code.

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'
      }
    }
  }
}

Result:

Modify specific blocks

For cases where you want to style a specific block quickly or override the global dashboard theme for a block, you can then directly define the theme inside a block:

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

Another example is overriding at the VizTheme level:

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

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.

Introduction​

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​