Migrating a Custom Theme for Custom Widgets in Bold BI

Migrating a custom theme for your widgets in Bold BI allows you to personalize your dashboard and make it more visually appealing. This guide will walk you through the process of creating a custom theme for your widgets.

Preparing the Environment

Before you start, ensure that your environment is prepared by following the instructions provided in the Prepare Custom Theme Environment.

Creating a New CSS File

Next, create a new CSS file for your custom widget. This file should be located under the widget folder at {src directory}\themes\{created custom theme folder}\widgets.

Writing Custom Theme Variables

In the CSS file, you can write custom theme variables. For instance, if you’re creating a custom pie chart widget, you might write the following theme variables:

JSON Property Theme Variables

"customwidget":{
	"pieChart1":{
		"titleColor":"#5E517B",
		"headerColor":"#5E517B",
		"valueColor":"#5E517B",
		"segmentColor1":"#7F3692",
		"segmentColor2":"#3B115B",
		"background": "#CEC7DD"
	},
}

{
--piechart-widget-title-font-color: #5E517B;
--piechart-widget-header-font-color: #5E517B;
--piechart-widget-value-font-color: #5E517B;
--piechart-widget-segment-color1: #7F3692;
--piechart-widget-segment-color2: #3B115B;
--piechart-widget-background-color: #CEC7DD;
}

Assigning the Theme Variable

After writing your custom theme variables, assign the theme variable to the custom widget source file (sourcefile.js).

Building the Theme CSS Files

To build the theme CSS files, run the gulp build command.

Accessing the Theme Files

Once the build is completed, you can access the theme files from the directory {src directory}/assets/theme/{theme directory name}/boldbi.theme.definition.min.css.

By following these steps, you can create a custom theme for your widgets in Bold BI, making your dashboard more personalized and visually appealing.

Uploading the Theme Files

Use Look and Feel settings to customize the font, application theme, and dashboard theme of Bold BI application. The font and theme management option is available only on the User Management Server (UMS) page. Refer to the following article: How to change font and theme for Bold BI dashboards and applications?

References

• How to change font and theme for Bold BI dashboards and applications?
• Creating a Custom Theme in Bold BI