Skip to main content

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
  • Visualization styling:
    • Table visualization: Customize font size, color, and borders of your table visualizations.

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-components

Canvas Dashboard Themes comprises 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.)

Page Theme

Control the styling of the outermost container of the Canvas (the viewport surrounding the entire canvas area). Customizable Properties: Background color

Canvas Theme

Control the styling of the primary reporting area that contains all dashboard blocks. Customizable Properties: Background, border, shadow, opacity

Block Theme

Control the styling of analytics blocks.

Customizable Properties:

  • Label (block title)
  • Text font styles
  • Border
  • Background
  • Shadow
  • Padding
  • Opacity

Viz Theme

Defines the styling for data visualizations.

  • 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
  • (Coming soon) Other visualization type themes: Column charts, Line charts, Pie charts, etc.
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.

Applying themes

Note

This feature is only available when building dashboards in Development. It won't be visible in Reporting edit mode.

You can apply themes to your canvas dashboard by either writing codes or using GUI.

For GUI option, simply open Themes Setting at the top right corner of your dashboard. From there, you can choose between using the pre-built themes, or creating your new custom theme.

themes-panel

Use pre-built themes

There are two types of pre-built themes:

  • Built-in themes: Themes provided by Holistics
  • Custom themes: Themes created and saved by you and your colleagues.

Modify the selected Theme

modify-theme

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

Create your new 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
  • 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).

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.

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

The Result

reporting-themes-classic-blue

Advanced Features

Custom CSS

(Coming soon)

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, BlockTheme or VizTheme in the code editor to see suggestions for available parameters.

ParameterDescriptionAccepted Values
Background
background.bg_colorSet the background color for the pageAny valid CSS <color> values
e.g. "rebeccapurple", "#ff0099", "rgb(255 0 153)"
background.bg_imageSet the background image for the pageAny valid CSS <image> values
e.g. "https://docs.holistics.io/img/logo.png", "linear-gradient(blue, red)"
background.bg_repeatDetermine how the background image repeatsfalse, true, "x", "y", "space", "round"
background.bg_sizeDetermine how the background image is sized"cover", "contain"
Canvas
canvas.border.border_widthSet the width of the canvas borderNumber, String, or DetailedSpacing
canvas.border.border_radiusSet the roundness of the canvas cornersNumber, String, or DetailedRadius
canvas.border.border_colorSet the color of the canvas borderAny valid CSS <color> values
e.g. "rebeccapurple", "#ff0099", "rgb(255 0 153)"
canvas.border.border_styleSet the style of the canvas border"none", "solid", "dotted", "dashed", "inset", "outset", "ridge", "groove", "double"
canvas.background.bg_colorSet the background color of the canvasAny valid CSS <color> values
e.g. "rebeccapurple", "#ff0099", "rgb(255 0 153)"
canvas.background.bg_imageSet the background image of the canvasAny valid CSS <image> values
e.g. "https://docs.holistics.io/img/logo.png", "linear-gradient(blue, red)"
canvas.background.bg_repeatDetermine how the background image repeatsfalse, true, "x", "y", "space", "round"
canvas.background.bg_sizeDetermine how the background image is sized"cover", "contain"
canvas.shadowSets the shadow effect of the canvas"none", "sm", "md", "lg"
canvas.opacitySet the opacity of the canvasNumber between 0 and 1
Block
block.label.font_familySet the font family for block labels/titlesWeb-safe fonts or Custom fonts. Learn more
e.g. "Inter", "Arial, sans-serif", "serif"
block.label.font_sizeSet the font size for block labels/titlesAny valid CSS <length> values
e.g. 14, "14px", "2em"
block.label.font_colorSet the font color for block labels/titlesAny valid CSS <color> values
e.g. "rebeccapurple", "#ff0099", "rgb(255 0 153)"
block.label.font_weightSet the font weight for block labels/titles"light", "normal", "medium", "semibold", "bold", "extrabold"
block.label.font_styleSet the font style for block labels/titles"normal", "italic"
block.text.font_familySet the font family for block text contentWeb-safe fonts or Custom fonts. Learn more
e.g. "Inter", "Arial, sans-serif", "serif"
block.text.font_sizeSet the font size for block text contentAny valid CSS <length> values
e.g. 14, "14px", "2em"
block.text.font_colorSet the font color for block text contentAny valid CSS <color> values
e.g. "rebeccapurple", "#ff0099", "rgb(255 0 153)"
block.text.font_weightSet the font weight for block text content"light", "normal", "medium", "semibold", "bold", "extrabold"
block.text.font_styleSet the font style for block text content"normal", "italic"
block.border.border_widthSet the width of block bordersNumber, String, or DetailedSpacing
block.border.border_radiusSet the roundness of block cornersNumber, String, or DetailedRadius
block.border.border_colorSet the color of block bordersAny valid CSS <color> values
e.g. "rebeccapurple", "#ff0099", "rgb(255 0 153)"
block.border.border_styleSet the style of block borders"none", "solid", "dotted", "dashed", "inset", "outset", "ridge", "groove", "double"
block.background.bg_colorSet the background color of blocksAny valid CSS <color> values
e.g. "rebeccapurple", "#ff0099", "rgb(255 0 153)"
block.background.bg_imageSet the background image of blocksAny valid CSS <image> values
e.g. "https://docs.holistics.io/img/logo.png", "linear-gradient(blue, red)"
block.background.bg_repeatDetermine how the background image repeatsfalse, true, "x", "y", "space", "round"
block.background.bg_sizeDetermine how the background image is sized"cover", "contain"
block.paddingSet the internal padding of blocksNumber, String, or DetailedSpacing
block.shadowSet the shadow effect of blocks"none", "sm", "md", "lg"
block.opacitySet the opacity of blocksNumber between 0 and 1
Table Visualization
general.bg_colorSets the background color for the table bodyAny valid color value (e.g., "#FFFFFF", "rgb(255, 255, 255)")
general.hover_colorSet the hover background color for table rowsAny valid color value (e.g., "#FFFFFF", "rgb(255, 255, 255)")
general.banding_colorSet the color for the odd rowsAny valid color value (e.g., "#FFFFFF", "rgb(255, 255, 255)")
general.font_sizeSet the font size for all text in the tableNumber or String (e.g., "14px")
general.font_colorSet the font color for all text in the tableAny valid color value (e.g., "#FFFFFF", "rgb(255, 255, 255)")
general.font_familySet the font family for all text in the tableAny valid font family name
general.border_colorSet the color for the table's outer bounding borderAny valid color value (e.g., "#FFFFFF", "rgb(255, 255, 255)")
general.grid_colorSet the color for table’s grid linesAny valid color value (e.g., "#FFFFFF", "rgb(255, 255, 255)")
general.border_widthSet the thickness for all the table borders and grid linesNumber or String (e.g., "14px")
header.bg_colorSets the background color for the table headerAny valid color value (e.g., "#FFFFFF", "rgb(255, 255, 255)")
header.font_sizeSet the font size for table headerNumber or String (e.g., "14px")
header.font_weightSet the font weight for table header'light', 'normal', 'medium', 'semibold', 'bold', 'extrabold'
header.font_colorSet the font color for table headerAny valid color value (e.g., "#FFFFFF", "rgb(255, 255, 255)")
sub_header.bg_colorSets the background color for the subheader of the Pivot TableAny valid color value (e.g., "#FFFFFF", "rgb(255, 255, 255)")
sub_header.font_sizeSets the font size for the subheader of the Pivot TableNumber or String (e.g., "14px")
sub_header.font_weightSets the font weight for the subheader of the Pivot Table'light', 'normal', 'medium', 'semibold', 'bold', 'extrabold'
sub_header.font_colorSets the font color for the subheader of the Pivot TableAny valid color value (e.g., "#FFFFFF", "rgb(255, 255, 255)")
sub_title.font_sizeSets the font size for the Metric Sheet column header’s subtitleNumber or String (e.g., "14px")
sub_title.font_weightSets the font weight for the Metric Sheet column header’s subtitle'light', 'normal', 'medium', 'semibold', 'bold', 'extrabold'
sub_title.font_colorSets the font color for the Metric Sheet column header’s subtitleAny valid color value (e.g., "#FFFFFF", "rgb(255, 255, 255)")
Custom CSS
custom_cssSet the custom CSS for entire dashboardAny valid CSS code

DetailedSpacing

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

PropertyDescriptionType
topSpacing for the top sideNumber or String
leftSpacing for the left sideNumber or String
bottomSpacing for the bottom sideNumber or String
rightSpacing for the right sideNumber 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.

PropertyDescriptionType
top_leftRadius for the top-left cornerNumber or String
top_rightRadius for the top-right cornerNumber or String
bottom_leftRadius for the bottom-left cornerNumber or String
bottom_rightRadius for the bottom-right cornerNumber or String

Example:

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


Let us know what you think about this document :)