How to apply Custom Theme in Embedded dashboards?
In Bold BI, you can customize the default color palette in your embedded dashboards. This allows you to maintain a consistent visual identity across your organization.
Applying a Custom Theme
To apply a custom theme in Bold BI embedded application, follow these steps:
-
Upload the custom theme files to the Bold BI Server. For more details on uploading custom theme files, refer to this link.
-
Use the following API members to set the custom theme in the embedded dashboard:
appearance: Sets the custom theme in the embedded dashboard.application: Sets the custom theme for buttons, menus, and popups as branding color.dashboard: Sets the custom theme in the dashboard with a combination ofappearanceandapplicationmembers.isLocalTheme: Set this member totrueif you directly refer to the theme file in your embedding application.
Applying Custom Theme Using appearance Option
In the BoldBI.create() method, add the API member dashboardSettings and include themeSettings with the appearance member in it.
function renderDashboard() {
var dashboard= BoldBI.create({
dashboardSettings: {
themeSettings: {
appearance: "dark", // By default, the light theme will be set.
}
}
});
dashboard.loadDashboard();
}
Applying Custom Theme Using application Option
When setting a custom theme for the application option, you must also set a custom theme for the appearance option. Otherwise, a light theme will be applied for the appearance option.
function renderDashboard() {
var dashboard= BoldBI.create({
dashboardSettings: {
themeSettings: {
appearance: "dark",
application: "darkviolet", // Specify the name under which you saved the application theme file in Bold BI server.
}
}
});
dashboard.loadDashboard();
}
Applying Custom Theme Using dashboard Option
When setting a custom theme for the dashboard option, you don’t need to set custom theme values for appearance and application options.
function renderDashboard() {
var dashboard= BoldBI.create({
dashboardSettings: {
themeSettings: {
dashboard: "greenMist", // Specify the name under which you saved the dashboard theme file in Bold BI server.
}
}
});
dashboard.loadDashboard();
}
Here the dashboard is rendered in dark theme as given in appearance option and application buttons, loading indicator are applied with darkviolet theme as specified in application option
Referencing Custom Theme File Externally
To refer to the custom theme file as external in your embedded application, follow these steps:
- In your embedding application, add the external custom theme file and the Embed SDK script file in the head tag, as demonstrated below.
<head>
<script type="text/javascript" src="https://cdn.boldbi.com/embedded-sdk/latest/boldbi-embed.js"></script>
<script type="text/javascript" src="~/css/boldbi.theme.definition.min.css"></script>
</head>
- Set the
isLocalThemeoption totruewhen referring to the custom theme file as external.
function renderDashboard() {
var dashboard= BoldBI.create({
dashboardSettings: {
themeSettings: {
isLocalTheme: true, // The default value is false.
}
}
});
dashboard.loadDashboard();
}
A custom theme sample is provided. From this sample, you can generate the custom theme file({src directory}/boldbi-themestudio/themes) by following the steps in the readme page.
Additional References
