Themes in Canvas Dashboard
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.
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
- 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 {
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
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"
}