Themes in Canvas Dashboard

info

Themes is available in 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 to customize a wide range of elements, including:

• Typography: Modify the font family, font size of text and data labels
• Colors: Customize 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 calling 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

Tip: 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")
    }
  }
}

Reference

tip

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

Parameter	Effects on Dashboard	Options
Page Theme
background.bg_color	Sets the background color for the area surrounding the canvas	Any valid color value (e.g., "#FFFFFF", "rgb(255, 255, 255)")
background.bg_image	Sets the URL for a background image	Valid image URL
background.bg_repeat	Determines how the background image repeats	false, true, "x", "y", "space", "round"
background.bg_size	Determines how the background image is sized	"cover", "contain"
canvas.border.border_width	Sets the width of the canvas border	Number, String, or DetailedSpacing object
canvas.border.border_radius	Sets the roundness of the canvas corners	Number, String, or DetailedRadius object
canvas.border.border_color	Sets the color of the canvas border	Any valid color value
canvas.border.border_style	Sets the style of the canvas border	"none", "solid", "dotted", "dashed", "inset", "outset", "ridge", "groove", "double"
canvas.background.bg_color	Sets the background color of the canvas	Any valid color value
canvas.background.bg_image	Sets the URL for a background image	Valid image URL
canvas.background.bg_repeat	Determines how the background image repeats	false, true, "x", "y", "space", "round"
canvas.background.bg_size	Determines how the background image is sized	"cover", "contain"
canvas.shadow	Sets the shadow effect of the canvas	"none", "sm", "md", "lg"
canvas.opacity	Sets the opacity of the canvas	Number between 0 and 1
Block Theme
block.label.font_family	Sets the font family for block labels/titles	Any valid font family name
block.label.font_size	Sets the font size for block labels/titles	Number or String (e.g., "14px")
block.label.font_color	Sets the font color for block labels/titles	Any valid color value
block.label.font_weight	Sets the font weight for block labels/titles	"light", "normal", "medium", "semibold", "bold", "extrabold"
block.label.font_style	Sets the font style for block labels/titles	"normal", "italic"
block.text.font_family	Sets the font family for block text content	Any valid font family name
block.text.font_size	Sets the font size for block text content	Number or String (e.g., "12px")
block.text.font_color	Sets the font color for block text content	Any valid color value
block.text.font_weight	Sets the font weight for block text content	"light", "normal", "medium", "semibold", "bold", "extrabold"
block.text.font_style	Sets the font style for block text content	"normal", "italic"
block.border.border_width	Sets the width of block borders	Number, String, or DetailedSpacing object
block.border.border_radius	Sets the roundness of block corners	Number, String, or DetailedRadius object
block.border.border_color	Sets the color of block borders	Any valid color value
block.border.border_style	Sets the style of block borders	"none", "solid", "dotted", "dashed", "inset", "outset", "ridge", "groove", "double"
block.background.bg_color	Sets the background color of blocks	Any valid color value
block.background.bg_image	Sets the URL for a background image	Valid image URL
block.background.bg_repeat	Determines how the background image repeats	false, true, "x", "y", "space", "round"
block.background.bg_size	Determines how the background image is sized	"cover", "contain"
block.padding	Sets the internal padding of blocks	Number, String, or DetailedSpacing object
block.shadow	Sets the shadow effect of blocks	"none", "sm", "md", "lg"
block.opacity	Sets 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"
}