Themes in Canvas Dashboard provide powerful styling capabilities to your dashboards. However, we understand that your dashboard design needs can sometimes go beyond supported parameters - whether you want to customize chart elements, create unique hover effects, or use custom web fonts.
That’s why we’re excited to introduce custom CSS support directly within the themes syntax to give you the maximum flexibility!
How it works
You can now add CSS codes directly within your theme definitions using the new custom_css parameter:
PageTheme classic {
// existing theme properties
custom_css: @css
/* your custom CSS rules here */
;;
}
Define your CSS once in your theme and reuse it across multiple dashboards that apply the same theme. The CSS rules are scoped to only apply to elements inside the canvas dashboard area, preventing any interference with the rest of the application.
Use Case: Importing Custom Fonts in Themes
A practical use case for custom_css is that you can import custom fonts from the web to be used in your dashboard. For example:
Dashboard ecommerce {
theme: PageTheme {
block {
label {
font_family: "Silkscreen"
}
text {
font_family: "Silkscreen"
}
}
custom_css: @css
@import url('https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&display=swap');
;;
}
}
Try out the new custom CSS support in themes and let us know what you think! 
For more details on working with Themes, check out our documentation: Themes in Canvas Dashboard | Holistics Docs (4.0)