Understanding CSS Theme Variables in Bold BI

Bold BI’s CSS custom theming feature provides a flexible way to modify the look and feel of the Bold BI Application. This feature enabling you to tailor the appearance of Bold BI to align with your brand’s visual identity.

To create a custom theme, you can follow the instructions provided in the following link: Create Custom Dashboard Theme

Here’s a brief explanation of some of these variables and their usage:

Box-Shadow

The box-shadow variable is used to customize the shadows of pop-up boxes. This includes combo boxes and date picker widgets.

Container-Box-Shadow

The container-box-shadow variable is used to customize the shadow color of each widget container box. For instance, the color #f7ca16 can be applied using this variable.

Designer-Header-Background

The designer-header-background variable is used to customize the background color of header tabs. This includes item panel headers and property panel headers in the design view.

Designer-Data-Color-Palette1 to Designer-Data-Color-Palette7

The designer-data-color-palette1 to designer-data-color-palette7 variables are used to customize the default color palette of chart widgets. For example, if a pie chart is rendered with the default color palette and we change it to a red variant, the chart will be rendered accordingly.

Active-Icon-Normal-Color

The active-icon-normal-color variable is used to customize the colors of the enabled icons. The colors of various icons will be rendered based on the color of this variable.

Toast-Success-Border-Color

The toast-success-border-color variable is used to customize the border color of the notification pop-up for dashboard or widget export operation. This includes both initiating file downloading and success notifications.

For more information on how to use these variables, please refer to the Bold BI Documentation.