Styling Custom Canvas in Vanilla Components
Custom Canvas is a powerful Embeddable feature that lets your end users create dashboards on their own. This requires an interface in order for them to change chart inputs, add new charts, and rearrange existing charts. You may want to customize the look and feel of this interface to better match your brand or application design.
Custom Canvas uses our Remarkable UI design library under the hood, even if you're using Vanilla Components for your visualizations. This means you can leverage a subset of Remarkable's CSS variables to style the Custom Canvas interface.
We recommend overriding as few variables as possible to achieve the desired look, in order to maintain usability and accessibility.
If you're using Remarkable Pro, you can style Custom Canvas directly using the Theming Remarkable Pro guide.
Adding Custom Styles to Your Theme
To customize the Custom Canvas interface, you'll need to extend your existing Vanilla Components theme with additional CSS variables specific to Remarkable UI. Here's how you can do that:
Upgrade to Vanilla Components v1.3.1 or later.
Ensure your project is using Vanilla Components version 1.3.1 or later, as this version introduced support for styling Custom Canvas via CSS variables.
You can upgrade by running npm run embeddable:upgrade in your project directory, and then running npm install (if you're using Yarn/PNPM/etc, adjust the commands accordingly). This will also update your Embeddable SDKs to the latest versions.
Locate your Vanilla Components theme configuration.
This may be located directly in embeddable.theme.ts or imported from another file, as described in the Theming Vanilla Components guide.
Add Remarkable UI CSS variables to your theme.
The theme object takes an optional remarkableVars property where you can define the CSS variables and their desired values. For example:
const theme: ThemePartial = {
// ... other theme properties ...
remarkableVars: {
'--em-background-color-default': '#5544AA',
'--em-border-radius-400': '0px',
'--em-border-width-0': '0px',
'--em-box-shadow-default-color': '#112255',
'--em-box-shadow-default-position-x': '10px',
'--em-box-shadow-default-position-y': '5px',
// See the full list of variables below for more options
},
};This property does not exist in the default Vanilla Components theme, because the CSS variables are already defined in the Custom Canvas code. It's defined as optional in the Theme type (which ThemePartial extends), so you can add it as shown above.
Save and apply your theme.
Once you've added the desired CSS variables, save your theme configuration. The Custom Canvas interface should now reflect your custom styles when rendered.
Available CSS Variables
Here are all of the CSS variables supported by the theme for styling Custom Canvas:
'--em-background-color-default'?: string;
'--em-background-color-neutral'?: string;
'--em-background-color-subtle'?: string;
'--em-background-inverted'?: string;
'--em-border-radius-200'?: string;
'--em-border-radius-400'?: string;
'--em-border-radius-500'?: string;
'--em-border-width-0'?: string;
'--em-border-width-default'?: string;
'--em-box-shadow-default-blur'?: string;
'--em-box-shadow-default-color'?: string;
'--em-box-shadow-default-position-x'?: string;
'--em-box-shadow-default-position-y'?: string;
'--em-box-shadow-default-spread'?: string;
'--em-btn-island-background-color-default'?: string;
'--em-card-border-radius-default'?: string;
'--em-card-empty-title-font-color-default'?: string;
'--em-card-info-font-font-family'?: string;
'--em-card-info-font-line-height'?: string;
'--em-card-info-font-size'?: string;
'--em-card-info-font-title-weight'?: string;
'--em-card-loader-icon-size-height'?: string;
'--em-card-loader-icon-size-width'?: string;
'--em-card-padding-default'?: string;
'--em-card-subtitle-color-default'?: string;
'--em-card-subtitle-font-font-family'?: string;
'--em-card-title-color-default'?: string;
'--em-card-title-font-line-height'?: string;
'--em-card-title-font-weight'?: number;
'--em-card-title-padding-default'?: string;
'--em-content-inverted'?: string;
'--em-empty-state-background-color-default'?: string;
'--em-empty-state-icon-color-default'?: string;
'--em-empty-state-icon-size-height'?: string;
'--em-empty-state-icon-size-width'?: string;
'--em-empty-state-padding-default'?: string;
'--em-font-size-md'?: string;
'--em-font-size-sm'?: string;
'--em-font-size-xs'?: string;
'--em-font-weight-medium'?: number;
'--em-foreground-color-default'?: string;
'--em-foreground-color-inverted'?: string;
'--em-form-background-color-default'?: string;
'--em-form-border-radius-default'?: string;
'--em-form-font-font-size-title'?: string;
'--em-form-font-font-weight'?: number;
'--em-form-font-line-height'?: string;
'--em-form-form-font-font-size-title'?: string;
'--em-form-form-font-font-weight'?: number;
'--em-form-form-font-line-height'?: string;
'--em-form-group-background-color-hover'?: string;
'--em-form-group-icon-size-height'?: string;
'--em-form-group-icon-size-width'?: string;
'--em-form-group-padding-default'?: string;
'--em-form-group-padding-small'?: string;
'--em-form-header-font-font-color'?: string;
'--em-form-header-font-font-family'?: string;
'--em-form-header-font-font-size'?: string;
'--em-form-header-font-font-weight'?: number;
'--em-form-header-font-line-height'?: string;
'--em-form-header-icon-color-default'?: string;
'--em-form-padding-default'?: string;
'--em-form-padding-large'?: string;
'--em-form-padding-small'?: string;
'--em-form-section-font-font-color'?: string;
'--em-form-section-font-font-family'?: string;
'--em-form-section-font-font-size'?: string;
'--em-form-section-font-font-weight'?: number;
'--em-form-section-font-line-height'?: string;
'--em-gray-800'?: string;
'--em-gray-900'?: string;
'--em-icon-btn-background-color-default'?: string;
'--em-icon-btn-background-color-hover'?: string;
'--em-icon-btn-border-radius-default'?: string;
'--em-icon-btn-icon-color-call-to-action'?: string;
'--em-icon-btn-icon-color-default'?: string;
'--em-icon-btn-icon-size-height'?: string;
'--em-icon-btn-icon-size-width'?: string;
'--em-icon-btn-size-height'?: string;
'--em-icon-btn-size-width'?: string;
'--em-lightbox-font-color-default'?: string;
'--em-lightbox-font-font-family'?: string;
'--em-lightbox-font-font-size'?: string;
'--em-lightbox-font-font-weight'?: number;
'--em-lightbox-font-line-height'?: string;
'--em-line-height-l'?: string;
'--em-line-height-sm'?: string;
'--em-overlay-z'?: number;
'--em-padding-100'?: string;
'--em-padding-200'?: string;
'--em-padding-300'?: string;
'--em-padding-400'?: string;
'--em-padding-800'?: string;
'--em-primary-btn-background-color-default'?: string;
'--em-primary-btn-background-color-disabled'?: string;
'--em-primary-btn-label-color-disabled'?: string;
'--em-primary-btn-label-font-small-size'?: string;
'--em-secondary-btn-background-color-default'?: string;
'--em-secondary-btn-background-color-hover'?: string;
'--em-select-list-item-isolate-background-color-default'?: string;
'--em-select-list-item-isolate-border-radius-default'?: string;
'--em-select-list-item-isolate-label-color-default'?: string;
'--em-select-list-item-isolate-label-font-size'?: string;
'--em-select-list-item-isolate-label-font-weight'?: number;
'--em-select-list-item-isolate-padding-default'?: string;
'--em-select-menu-label-color-default'?: string;
'--em-select-menu-label-font-size'?: string;
'--em-select-menu-label-font-weight'?: number;
'--em-status-error'?: string;
'--em-status-negative-foreground'?: string;
'--em-switch-thumb-background-color'?: string;
'--em-text-input-label-color-default'?: string;
'--em-text-input-size-min-width'?: string;