Search results
Dashboard Themes in Bold BI Enterprise edition
The dashboard theme option is now available as a preview feature in the Bold BI Enterprise edition. This feature allows you to apply different theme for the dashboard. Currently we have provided light and dark theme.
How to switch dashboard themes
By default, the dashboards are rendered in the light mode and the theme option is shown in the header panel of the published dashboards as shown in the following image.
Clicking the Theme option will list out the available themes.
You can switch the themes by clicking the required theme name from the list.
The following image shows the dashboard view after applying the dark theme.
NOTE: Theming will not be applied in few areas in the dashboard. Please check the limitations section for details.
The browser will be remembering the last applied theme and all the dashboards will be rendered with the theme.
How to enable or disable the dashboard theme option in the Bold BI Enterprise edition
By default, the dashboard theme is enabled in the Bold BI Enterprise edition dashboards.
However, you can turn off the feature by changing the settings with the following mentioned steps.
-
Open the
Web.configfile from the following location. [Installation Drive]: Bold BI \ Dashboard Designer\Web.config
-
You can find the key dashboard:theme:enable as shown in the following screenshot.
-
Change the value for the key
dashboard:theme:enableto false, and restart your server. -
Now, the theme option will not be displayed in the view mode. By default, the light mode will be applied.
Limitations
The dashboard theme is currently a preview feature. The following items are not supported with the dark theme.
-
Dialogs (
Export, View, Info, Share and Comments, Dashboard parameter, and newly implemented dialogs). -
Newly implemented widgets like
RTE, Spline Area chart, Period over Period Comparison, Miscellaneous, and Custom widgets. -
Deprecated widgets such as
Card and Maps. –Syncfusion will not provide the support in the future.
Custom Theme
Custom theme allows you to customize the appearance of the Bold BI dashboard viewer. You can achieve this by customizing the JSON settings file. Granular level customization can also be done using these settings.
How to create and apply a new custom theme
Follow the steps to add a new custom theme in Bold BI Enterprise edition.
-
Navigate to the Bold BI deployment location.
[Installation Drive]:\Bold BI\Dashboard Designer\DashboardThemes -
By default, light and dark theme files will be available in the location.
Dashboard themes folder:
-
Open the theme file in any text editor to view the template and the color code values.
Dashboard theme template json file:
-
Create a new theme file with the template shown in the above theme file. You can modify the color for the properties in the hex format.
Prepared custom blue theme file contents:
NOTE: Set the custom theme name in the
nameproperty. -
Now save the newly prepared theme file with the
[ThemeName].jsonformat.
-
Now open the dashboard in the browser and the theme will be list in the theme drop down.
-
Select your custom theme and the theme will be applied to the dashboard.
The following image shows the dashboard view after applied the custom blue theme.
Custom theme JSON file format
A valid JSON custom theme file needs at least the name property, as shown in the following code sample.
{
"name": "Blue"
}The other properties are optional and will be applied with the default color codes.
For an example, If you want to change the widget color palette codes alone and use the light theme for other color codes, you can create a new theme file with the following code.
{
"name": "Blue",
"dataColorPalette": [
"#826AF9",
"#2D99FF",
"#2CD9C5",
"#FF6C40",
"#FFE700",
"#F29D38",
"#FF4085"
]
}Starting from v3.3.88 you can customize the following,
- Color Customization
- Font Customization
{
"background": "#FFFFFF",
"textStyle": {
"color": "#000000",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
}Color Customization
Allows you to customize the color and background css property for the dashboard.
colorcustomizes the foreground color of the dashboard elements.backgroundcustomizes the background of the dashboard elements.
Font Customization
Allows you to customize the font property for the text elements in the dashboard banner, widgets, tooltips, menus, alert and filter overview dialog. It encloses the below properties to customize the text elements in the dashboard.
autoFontSettingsvalidates the customized value for the property overrides or not.fontSizecustomizes thefont-sizecss property.fontFamilycustomizes thefont-familycss property.fontWeightcustomizes thefont-weightcss property.fontSrcincludes the new custom font, only as base64 string.
Font source can be applied by converting the font file to base64 string and use as specified below. The value for font source property can be applied once and it can be referred to its fontFamily value given.
{
"fontSettings": {
"autoFontSettings": false,
"fontSize": "",
"fontWeight": "",
"fontFamily": "MyFontFamily",
"fontSrc": "url(data:font/truetype;charset=utf-8;base64, AAEAAAATAQAABAAwRkZUTVyddG4AAScUAAAAHEdERUYBFwAkAAEmQAAAAChHUE9T2CzomQABJogAAACM/8ZwZ20PtC+nAAAH3AAAAmVnYXNw format('truetype')"
}
}NOTE:
1. If value for the property is left blank, then default value is taken.
2. The customized font values are applied only when the `autoFontSettings` property is set false, by default it is set true.
3. The font size measurement can be given in any units (px, pt, em, rem).
4. The font weight can be given either in numerical notation (100 to 900) or string values as `normal`, `bold`, `bolder`, `lighter`.Example:
Here is an example to show how the dashboard banner is color and font customized,
"banner": {
"background": "#ff4801",
"textStyle": {
"color": "#ffffff",
"fontSettings": {
"autoFontSettings": false,
"fontSize": "30px",
"fontWeight": "900",
"fontFamily": "Garamond, serif",
"fontSrc": ""
}
},
"icon": {
"font": {
"color": "#ffffff",
"fontSettings": {
"autoFontSettings": false,
"fontSize": "12px",
"fontWeight": "bold",
"fontFamily": "Garamond, serif",
"fontSrc": ""
}
},
"hover": {
"font": {
"color": "#283A5E",
"fontSettings": {
"autoFontSettings": false,
"fontSize": "17px",
"fontWeight": "bolder",
"fontFamily": "Lucida Console",
"fontSrc": ""
}
},
"background": "#f1f9ff"
}
}
} 
You can find the list of classes that you can customize in the following sections:
Theme name
Defines the custom theme name.
Format:
{
"name": "CustomTheme"
}Theme type
The type should be either light or dark.
Note: When any color value is undefined, the default color will be applied based on the type.
Format:
{
"name": "CustomTheme",
"type": "dark"
}Theme Font
Allows you to customize the font size, family and weight for the overall dashboard.
Format:
{
"fontSettings": {
"autoFontSettings": false,
"fontFamily": "'Brush Script MT', cursive",
"fontSrc": ""
}
}NOTE: The customized font value is applied only when the
autoFontSettingsproperty is set false, by default it is set true.
Data color palette
Defines the color palette for the widgets.
Format:
{
"name": "CustomTheme",
"dataColorPalette": [
"#826AF9",
"#2D99FF",
"#2CD9C5",
"#FF6C40",
"#FFE700",
"#F29D38",
"#FF4085"
]
}Dashboard banner
Allows you to customize the color and font of the dashboard header panel, the dashboard header text, and icons.
Format:
{
"name": "CustomTheme",
"banner": {
"background": "#240C84",
"textStyle": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"icon": {
"font": {
"color": "#3BBDFE",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"hover": {
"font": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"background": "#4a536b"
}
}
}
}Dashboard widgets
The widgets section allows you to configure the widget container properties like the container background, title or sub-title color and font, icon color and font and the widget level properties like the axis properties, legend properties, and the data label properties.
Widget common level properties
The color codes and font settings are defined under the widgets section will be applied to all the applicable widgets unless it has been overridden in the widget specific level.
Background
Defines the widget container background.
Format:
{
"name": "CustomTheme",
"widgets": {
"background": "#32199B"
}
}Text style
Defines the widgets text color and font styles.
Format:
{
"name": "CustomTheme",
"widgets": {
"textStyle": {
"color": "#e5ebf8",
"title": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
},
"subTitle": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
}
}Icon
Defines the widget container icon color and font styles.
Format:
{
"name": "CustomTheme",
"widgets": {
"icon": {
"font": {
"color": "#FF71FF",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": ""
}
},
"hover": {
"font": {
"color": "#c6d0e8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": ""
}
},
"background": "#374159"
}
}
}
}Axis
Defines the widget axis property color codes and font settings.
Format:
{
"name": "CustomTheme",
"widgets": {
"axis": {
"title": {
"font": {
"color": "#c6d0e8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"label": {
"font": {
"color": "#c6d0e8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"gridLines": {
"color": "#4A2BC6"
},
"tickLines": {
"color": "#4A2BC6"
}
}
}
}Legend
Defines the widget’s legend color codes and font settings.
Format:
{
"name": "CustomTheme",
"widgets": {
"legend": {
"font": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
}
}
}Data label
Defines the widget’s data label color codes and font settings.
Format:
{
"name": "CustomTheme",
"widgets": {
"dataLabel": {
"font": {
"color": "#c6d0e8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
}
}
}Data value
Defines the widgets data text and background colors and fonts.
Format:
{
"name": "CustomTheme",
"widgets": {
"dataValue": {
"background": "#212634",
"font": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"hover": {
"font": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"background": "#3e4658"
}
}
}
}Widget specific level properties
The widgets.[widetName] section allows you to customize the properties of a specific widget.
Chart
Format:
{
"name": "CustomTheme",
"widgets": {
"chart": {
"widgetHeader": {
"title": {
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"subTitle": {
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"axis": {
"title": {
"font": {
"color": "#c6d0e8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"gridLines": {
"color": "#4A2BC6"
},
"label": {
"font": {
"color": "#c6d0e8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"tickLines": {
"color": "#4A2BC6"
}
},
"dataLabel": {
"font": {
"color": "#c6d0e8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"legend": {
"font": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"legendTitle": {
"title": {
"font": {
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
}
},
"markerColor": "#32199B"
}
}
}Map
Format:
{
"name": "CustomTheme",
"widgets": {
"map": {
"widgetHeader": {
"title": {
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"subTitle": {
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"dataLabel": {
"font": {
"color": "#1a1a1a",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"legend": {
"font": {
"color": "#c6d0e8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"legendTitle": {
"title": {
"font": {
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
}
},
"fillColor": "#f67280"
}
}
}Tree map
Format:
{
"name": "CustomTheme",
"widgets": {
"treeMap": {
"widgetHeader": {
"title": {
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"subTitle": {
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"dataLabel": {
"font": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"legend": {
"font": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"legendTitle": {
"title": {
"font": {
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
}
},
"fillColor": "#f6727f"
}
}
}Heat map
Format:
{
"name": "CustomTheme",
"widgets": {
"heatMap": {
"widgetHeader": {
"title": {
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"subTitle": {
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"axis": {
"title": {
"font": {
"color": "#c6d0e8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"label": {
"font": {
"color": "#c6d0e8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
}
},
"dataLabel": {
"font": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"fillColor": "#f6727f",
"emptyFillColor": "#282f40",
"legend": {
"font": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
}
}
}
}Grid
Format:
{
"name": "CustomTheme",
"widgets": {
"grid": {
"widgetHeader": {
"title": {
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"subTitle": {
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"content": {
"background": "#202635",
"font": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"hover": {
"background": "#3e4658",
"font": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"selection": {
"background": "#465168",
"font": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
}
},
"filterBar": {
"background": "#202635",
"border": "#505a71",
"font": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"header": {
"background": "#313c50",
"font": {
"color": "#c6d0e8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
}
}
}
}Pivot grid
Format:
{
"name": "CustomTheme",
"widgets": {
"pivotGrid": {
"widgetHeader": {
"title": {
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"subTitle": {
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"border": "#505a71",
"content": {
"background": "#212634",
"font": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"hover": {
"background": "#3e4658",
"font": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"selection": {
"background": "#465168",
"font": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
}
},
"header": {
"background": "#282f40",
"font": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"groupingButton": {
"background": "#485166",
"font": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"icon": {
"font": {
"color": "#c6d0e8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": ""
}
},
"hover": {
"background": "#636e87",
"font": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": ""
}
}
}
}
},
"groupingPanelBackground": "#282f40",
"filterDialog": {
"list": {
"background": "#2d3546",
"font": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"hover": {
"background": "#3e4658",
"font": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"selection": {
"background": "#0565ff",
"font": {
"color": "#ffffff",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
}
},
"footerBackground": "#333c4e",
"cancelButton": {
"background": "#485166",
"font": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"press": {
"background": "#636e87",
"font": {
"color": "#e5ebf8"
}
},
"hover": {
"background": "#636e87",
"font": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
}
},
"okButton": {
"background": "#0565ff",
"font": {
"color": "#ffffff",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"press": {
"background": "#0655d4",
"font": {
"color": "#e5ebf8"
}
},
"hover": {
"background": "#0655d4",
"font": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
}
},
"header": {
"background": "#333c4e",
"font": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
}
}
}
}
}List box
Format:
{
"name": "CustomTheme",
"widgets": {
"listbox": {
"widgetHeader": {
"title": {
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"subTitle": {
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"dropDownList": {
"background": "#240c84",
"font": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"hover": {
"background": "#3e4658",
"font": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"selection": {
"background": "#0565ff",
"font": {
"color": "#ffffff",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"downArrowColor": "#cbd2e0"
},
"checkbox": {
"tickColor": "#ffffff",
"uncheckedBackground": "#2d3546",
"uncheckedBorder": "#77839e",
"checkedBackground": "#0565ff",
"checkedBorder": "#0450cc"
}
}
}
}Combo box
Format:
{
"name": "CustomTheme",
"widgets": {
"combobox": {
"widgetHeader": {
"title": {
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"subTitle": {
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"dropDownList": {
"background": "#240c84",
"font": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"hover": {
"background": "#3e4658",
"font": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"selection": {
"background": "#0565ff",
"font": {
"color": "#ffffff",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"downArrowColor": "#cbd2e0"
},
"checkbox": {
"tickColor": "#ffffff",
"uncheckedBackground": "#2d3546",
"uncheckedBorder": "#77839e",
"checkedBackground": "#0565ff",
"checkedBorder": "#0450cc"
}
}
}
}Date picker
Format:
{
"name": "CustomTheme",
"widgets": {
"datepicker": {
"widgetHeader": {
"title": {
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"subTitle": {
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"textBox": {
"background": "#212634",
"font": {
"color": "#97a5c5",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"calendar": {
"background": "#2d3546",
"borderColor": "#505a71",
"weekHeader": {
"background": "#2d3546",
"font": {
"color": "#c6d0e8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"availableDates": {
"background": "#2d3546",
"font": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"hover": {
"background": "#485166",
"font": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"selection": {
"background": "#0565ff",
"font": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
}
},
"unavailableDays": {
"background": "#2d3546",
"font": {
"color": "#97a5c5",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"otherMonthDays": {
"background": "#2d3546",
"font": {
"color": "#e1e1e1",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"icon": {
"font": {
"color": "#c6d0e8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": ""
}
},
"hover": {
"background": "",
"font": {
"color": "",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": ""
}
}
}
},
"footerBackground": "",
"cancelButton": {
"background": "#485166",
"font": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"press": {
"background": "#636e87",
"font": {
"color": "#e5ebf8"
}
},
"hover": {
"background": "#636e87",
"font": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
}
},
"okButton": {
"background": "#0565ff",
"font": {
"color": "#ffffff",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"press": {
"background": "#0655d4",
"font": {
"color": "#e5ebf8"
}
},
"hover": {
"background": "#0655d4",
"font": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
}
}
}
}
}
}KPI card
Format:
{
"name": "CustomTheme",
"widgets": {
"kpiCard": {
"widgetHeader": {
"title": {
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"subTitle": {
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"border": "#555961",
"leftLabel": {
"color": "#97a5c5",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"leftValue": {
"color": "#97a5c5",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"rightLabel": {
"color": "#97a5c5",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"rightValue": {
"color": "#97a5c5",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"separatorColor": "#97a5c5",
"sparkLine": {
"background": "#494d57",
"opacity": "1"
},
"title": {
"color": "#c6d0e8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
}
}
}Number card
Format:
{
"name": "CustomTheme",
"widgets": {
"numberCard": {
"widgetHeader": {
"title": {
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"subTitle": {
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"border": "#555961",
"rightValue": {
"color": "#97a5c5",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"sparkLine": {
"background": "#4cd766",
"opacity": "0.2"
},
"title": {
"color": "#c6d0e8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
}
}
}Range slider
Format:
{
"name": "CustomTheme",
"widgets": {
"rangeSlider": {
"widgetHeader": {
"title": {
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"subTitle": {
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"sliderBackground": "#465168",
"rangeColor": "#826AF9",
"handle": {
"background": "#202635",
"border": "#826AF9"
},
"label": {
"background": "#212634",
"font": {
"color": "#c6d0e8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
}
}
}
}Range Navigator
Format:
{
"name": "CustomTheme",
"widgets": {
"rangeNavigator": {
"widgetHeader": {
"title": {
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"subTitle": {
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"background": "#212634",
"border": "#3e4658",
"selectedRegionColor": "#212634",
"unselectedRegionColor": "#232a3b",
"content": {
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
}
}
}Circular gauge
Format:
{
"name": "CustomTheme",
"widgets": {
"circularGauge": {
"widgetHeader": {
"title": {
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"subTitle": {
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"background": "#4A2BC6",
"needlePointerBackground": "#bbbcbb",
"rangePointerBackground": "#f6727f",
"scaleBackground": "#bbbcbb",
"targetPointerBackground": "#9A9A9A",
"label": {
"color": "#e2e2e2",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"title": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"value": {
"color": "#e2e2e2",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
}
}
}Radar Polar
Format:
{
"name": "CustomTheme",
"widgets": {
"radarPolar": {
"widgetHeader": {
"title": {
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"subTitle": {
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"axis": {
"label": {
"font": {
"color": "#c6d0e8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"gridLines": {
"color": "#465168"
},
"tickLines": {
"color": "#465168"
}
},
"dataLabel": {
"font": {
"color": "#c6d0e8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"legend": {
"font": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"markerColor": "#212634"
}
}
}Combo Chart
Format:
{
"name": "CustomTheme",
"widgets": {
"comboChart": {
"widgetHeader": {
"title": {
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"subTitle": {
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"axis": {
"title": {
"font": {
"color": "#c6d0e8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"gridLines": {
"color": "#465168"
},
"label": {
"font": {
"color": "#c6d0e8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"tickLines": {
"color": "#465168"
}
},
"dataLabel": {
"font": {
"color": "#c6d0e8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"legend": {
"font": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"legendTitle": {
"title": {
"font": {
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": ""
}
}
}
},
"markerColor": "#212634"
}
}
}Period Over Period
Format:
{
"name": "CustomTheme",
"widgets": {
"pop": {
"widgetHeader": {
"title": {
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"subTitle": {
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"widgetContainer": {
"dateRangeLabel": {
"font": {
"color": "#505D6F",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"compareRangeLabel": {
"font": {
"color": "#505D6F",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"vsLabel": {
"font": {
"color": "#505D6F",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
}
},
"dialog": {
"headerBackground": "#181e2b",
"dateRange": {
"relativeHeader": {
"background": "#333842",
"label": {
"font": {
"color": "#ffffff",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
}
},
"relativeLabel": {
"font": {
"color": "#e2e2e2",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"relativeComboBox": {
"background": "#181e2b",
"textBox": {
"font": {
"color": "#ffffff",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"popup": {
"background": "#181e2b",
"text": {
"font": {
"color": "#ffffff",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
}
}
},
"calender": {
"highlightColor": "#333842",
"selectionColor": "#0565ff",
"weekHeader": {
"font": {
"color": "#ffffff",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"content": {
"hoverColor": "#7B838E",
"dateText": {
"font": {
"color": "#ffffff",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
}
}
}
},
"compareRange": {
"relativeHeader": {
"background": "#333842",
"label": {
"font": {
"color": "#ffffff",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
}
},
"relativeLabel": {
"font": {
"color": "#e2e2e2",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"relativeComboBox": {
"background": "#181e2b",
"textBox": {
"font": {
"color": "#ffffff",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"popup": {
"background": "#181e2b",
"text": {
"font": {
"color": "#ffffff",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
}
}
},
"calender": {
"highlightColor": "#333842",
"selectionColor": "#36c44e",
"weekHeader": {
"font": {
"color": "#ffffff",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"content": {
"hoverColor": "#7B838E",
"dateText": {
"font": {
"color": "#ffffff",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
}
}
}
},
"vsLabel": {
"font": {
"color": "#ffffff",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"footer": {
"footerBackground": "#333842",
"okButton": {
"background": "#0565ff",
"hoverColor": "#2e7eff",
"text": {
"font": {
"color": "#ffffff",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
}
},
"cancelButton": {
"background": "#565F6A",
"hoverColor": "#7B838E",
"text": {
"font": {
"color": "#ffffff",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
}
}
}
}
}
}
}Dashboard tooltip
Allows you to customize the look of the dashboard tooltip.
Format:
{
"name": "CustomTheme",
"tooltip": {
"background": "#240C84",
"font": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"border": "#a2aec9"
}
}Dashboard menu
Allows you to customize the dashboard menu background, foreground and font properties.
Format
{
"name": "CustomTheme",
"menu": {
"background": "#2d3546",
"font": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"border": "#505a71",
"hover": {
"font": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"background": "#4a536b"
}
}
}Error alert dialog
Allows you to customize the dashboard error dialog background, foreground and font properties for the header, footer, and the error content.
Format:
{
"name": "CustomTheme",
"alertDialog": {
"footerBackground": "#333c4e",
"content": {
"background": "#2d3546",
"font": {
"color": "#c6d0e8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"error": {
"background": "#313a50",
"font": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"header": {
"background": "#333c4e",
"font": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
},
"copyButton": {
"background": "#485166",
"font": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"press": {
"background": "#636e87",
"font": {
"color": "#e5ebf8"
}
},
"hover": {
"background": "#636e87",
"font": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
}
},
"okButton": {
"background": "#0565ff",
"font": {
"color": "#ffffff",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"press": {
"background": "#0655d4",
"font": {
"color": "#e5ebf8"
}
},
"hover": {
"background": "#0655d4",
"font": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
}
}
}
}Filter overview
Allows you to customize the filter overview dialog.
Format:
{
"name": "CustomTheme",
"filterOverview": {
"background": "#2d3546",
"border": "#505a71",
"font": {
"color": "#e5ebf8",
"title": {
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"content": {
"widgetTitle": {
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"columnName": {
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
},
"values": {
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": "",
"fontFamily": "",
"fontSrc": ""
}
}
}
},
"icon": {
"font": {
"color": "#aab7d4",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": ""
}
},
"hover": {
"background": "#4a536b",
"font": {
"color": "#e5ebf8",
"fontSettings": {
"autoFontSettings": true,
"fontSize": "",
"fontWeight": ""
}
}
}
}
}
}Contents
- How to switch dashboard themes
- How to enable or disable the dashboard theme option in the Bold BI Enterprise edition
- Limitations
- Custom Theme
- How to create and apply a new custom theme
- Custom theme JSON file format
- Color Customization
- Font Customization
- Theme name
- Theme type
- Theme Font
- Data color palette
- Dashboard banner
- Dashboard widgets
- Widget common level properties
- Background
- Text style
- Icon
- Axis
- Legend
- Data label
- Data value
- Widget specific level properties
- Chart
- Map
- Tree map
- Heat map
- Grid
- Pivot grid
- List box
- Combo box
- Date picker
- KPI card
- Number card
- Range slider
- Range Navigator
- Circular gauge
- Radar Polar
- Combo Chart
- Period Over Period
- Dashboard tooltip
- Dashboard menu
- Error alert dialog
- Filter overview
Contents
- How to switch dashboard themes
- How to enable or disable the dashboard theme option in the Bold BI Enterprise edition
- Limitations
- Custom Theme
- How to create and apply a new custom theme
- Custom theme JSON file format
- Color Customization
- Font Customization
- Theme name
- Theme type
- Theme Font
- Data color palette
- Dashboard banner
- Dashboard widgets
- Widget common level properties
- Background
- Text style
- Icon
- Axis
- Legend
- Data label
- Data value
- Widget specific level properties
- Chart
- Map
- Tree map
- Heat map
- Grid
- Pivot grid
- List box
- Combo box
- Date picker
- KPI card
- Number card
- Range slider
- Range Navigator
- Circular gauge
- Radar Polar
- Combo Chart
- Period Over Period
- Dashboard tooltip
- Dashboard menu
- Error alert dialog
- Filter overview
Thank you for your feedback and comments.We will rectify this as soon as possible!