Themes in Canvas Dashboard

info

Themes are available in the Canvas Dashboard. Canvas Dashboard is now generally available to customers using Holistics 4.0.

Introduction

Themes in Canvas Dashboard allow greater control over the styling and visual appearance of your dashboards. This feature lets you customize a wide range of elements, including:

• 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

With Themes, you can easily create visually appealing dashboards, align your dashboard's color scheme with your branding, and even design dark-themed dashboards.

How it works

Themes provide an additional layer of styling and customization to your Canvas Dashboard. In the Themes menu, you can choose from Built-in Themes or create and apply your own Custom Themes.

Create your Custom Themes

In the dashboard code definition, themes are specified using the theme parameter at different levels to provide more granular customization.

• Page Theme: Properties that apply to the entire canvas dashboard page
• Block Theme: Properties that apply to individual blocks, overriding the Page Theme settings

Step-by-step Guide

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.

ecommerce_dashboard.page.aml

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

themes.aml

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 {
    label {
      font_family: "Inter"
      font_size: 14
      font_color: "#1357A0"
      font_weight: "medium"
      font_style: "normal"
    }
    text {
      font_family: "Inter"
      font_size: 12
      font_color: "#1357A0"
      font_weight: "normal"
      font_style: "normal"
    }
    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
  }
}

The Result

Add themes for a specific block using BlockTheme

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

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

tip

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

Parameter	Effects on Dashboard	Accepted Values
Page Theme
background.bg_color	Set the background color for the page	Any valid CSS <color> values e.g. "rebeccapurple", "#ff0099", "rgb(255 0 153)"
background.bg_image	Set the background image for the page	Any valid CSS <image> values e.g. "https://docs.holistics.io/img/logo.png", "linear-gradient(blue, red)"
background.bg_repeat	Determine how the background image repeats	false, true, "x", "y", "space", "round"
background.bg_size	Determine how the background image is sized	"cover", "contain"
canvas.border.border_width	Set the width of the canvas border	Number, String, or DetailedSpacing
canvas.border.border_radius	Set the roundness of the canvas corners	Number, String, or DetailedRadius
canvas.border.border_color	Set the color of the canvas border	Any valid CSS <color> values e.g. "rebeccapurple", "#ff0099", "rgb(255 0 153)"
canvas.border.border_style	Set the style of the canvas border	"none", "solid", "dotted", "dashed", "inset", "outset", "ridge", "groove", "double"
canvas.background.bg_color	Set the background color of the canvas	Any valid CSS <color> values e.g. "rebeccapurple", "#ff0099", "rgb(255 0 153)"
canvas.background.bg_image	Set the background image of the canvas	Any valid CSS <image> values e.g. "https://docs.holistics.io/img/logo.png", "linear-gradient(blue, red)"
canvas.background.bg_repeat	Determine how the background image repeats	false, true, "x", "y", "space", "round"
canvas.background.bg_size	Determine how the background image is sized	"cover", "contain"
canvas.shadow	Sets the shadow effect of the canvas	"none", "sm", "md", "lg"
canvas.opacity	Set the opacity of the canvas	Number between 0 and 1
Block Theme
block.label.font_family	Set the font family for block labels/titles	Web-safe fonts or Custom fonts. Learn more e.g. "Inter", "Arial, sans-serif", "serif"
block.label.font_size	Set the font size for block labels/titles	Any valid CSS <length> values e.g. 14, "14px", "2em"
block.label.font_color	Set the font color for block labels/titles	Any valid CSS <color> values e.g. "rebeccapurple", "#ff0099", "rgb(255 0 153)"
block.label.font_weight	Set the font weight for block labels/titles	"light", "normal", "medium", "semibold", "bold", "extrabold"
block.label.font_style	Set the font style for block labels/titles	"normal", "italic"
block.text.font_family	Set the font family for block text content	Web-safe fonts or Custom fonts. Learn more e.g. "Inter", "Arial, sans-serif", "serif"
block.text.font_size	Set the font size for block text content	Any valid CSS <length> values e.g. 14, "14px", "2em"
block.text.font_color	Set the font color for block text content	Any valid CSS <color> values e.g. "rebeccapurple", "#ff0099", "rgb(255 0 153)"
block.text.font_weight	Set the font weight for block text content	"light", "normal", "medium", "semibold", "bold", "extrabold"
block.text.font_style	Set the font style for block text content	"normal", "italic"
block.border.border_width	Set the width of block borders	Number, String, or DetailedSpacing
block.border.border_radius	Set the roundness of block corners	Number, String, or DetailedRadius
block.border.border_color	Set the color of block borders	Any valid CSS <color> values e.g. "rebeccapurple", "#ff0099", "rgb(255 0 153)"
block.border.border_style	Set the style of block borders	"none", "solid", "dotted", "dashed", "inset", "outset", "ridge", "groove", "double"
block.background.bg_color	Set the background color of blocks	Any valid CSS <color> values e.g. "rebeccapurple", "#ff0099", "rgb(255 0 153)"
block.background.bg_image	Set the background image of blocks	Any valid CSS <image> values e.g. "https://docs.holistics.io/img/logo.png", "linear-gradient(blue, red)"
block.background.bg_repeat	Determine how the background image repeats	false, true, "x", "y", "space", "round"
block.background.bg_size	Determine how the background image is sized	"cover", "contain"
block.padding	Set the internal padding of blocks	Number, String, or DetailedSpacing
block.shadow	Set the shadow effect of blocks	"none", "sm", "md", "lg"
block.opacity	Set the opacity of blocks	Number between 0 and 1

DetailedSpacing

Used for specifying different spacing values for each side of an element.

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

Example:

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

DetailedRadius

Used for specifying different border-radius values for each corner of an element.

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

Example:

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