Upcoming: Reusable Themes in Canvas Dashboard 🎨

Note: This is an early feature launch announcement, meaning the feature is still in development. We make this announcement early to gather feedback and make sure what we build actually helps solve our users’ use cases.

Introduction


We’re excited to introduce Page Themes - a new capability that allows greater control over the styling of your dashboards. With Page Themes, you have the flexibility to customize a wide array of elements, including but not limited to:

  • Typography: change the font family, font size and color of text and data labels
  • Colors: customize color palettes for visualizations and other chart elements
  • Canvas & block styling: add borders, margins, shadows or even use custom image as background

Page Themes unlocks endless possibilities to create stunning dashboards, incorporating your corporate themes, stylized embedded dashboards, or even dark mode.

How it works


Page Themes offers a range of supported properties for customization. Themes can be easily defined using AML. When applied within a Canvas Dashboard, Page Themes take precedence, overriding the default styles of the dashboard.

Defining Themes in AML

You have the flexibility to define reusable themes in AML or implement local themes directly within dashboard elements using the theme property. Local themes take precedence over Page Themes, enabling granular control over styling.

PageTheme classic {
	page {
		background {
			bg_color: 'rgb(248, 248, 248)'
		}
	}
	
	canvas {
		background {
			bg_color: 'rgb(248, 248, 248)'
		}
		shadow: 'sm'
	}
	
	block {
		border {
			border_radius: 10
		}
		background {
			bg_color: 'rgb(248, 248, 248)'
		}
		shadow: 'sm'
		padding: 6
		label {
			font_size: 16
			font_family: 'Arial'
			font_color: 'grey'
			font_style: 'italic'
		}
		
	}
}
Dashboard ecommerce {
	title: 'eCommerce dashboard'
	view: CanvasLayout {
		...
	}
	
    // Add PageTheme to Canvas Dashboard
	theme: classic
	
	block v1: VizBlock {
		...
		
		// Local theme override PageTheme
		theme {
			border {
				border_radius: 10
			}
			background {
				bg_color: 'rgb(248, 248, 248)'
			}
		}
	}
}

Using Themes in Canvas Dashboard

:bulb: Tips: You can define and edit themes inside a Canvas Dashboard file for an instanteaneous feedback loop.

Release Timeline


This feature is currently under development and is expected to be released by Q3 2024.

:point_down: We’d love to hear about your specific use cases that could benefit from Page Themes.

5 Likes

Super excited for this. Differentiating widgets in regular Canvas is painful. Can’t wait!!!

3 Likes

Hello Theo,

It looks great, I’m so excited for this amazing update.

Thanks,
Steve

2 Likes