Theme Properties

Themes use special JSON structures with CSS properties. This article describes individual properties and gives examples.

Complete JSON Structure

This is an example set of the properties that you can customize:

{
    "palette": {
        "primary": {
            "base": "#3049D1"
        },
        "error": {
            "base": "#e54d42"
        },
        "success": {
            "base": "#00c18d"
        },
        "warning": {
            "base": "#f4d521"
        }
    },
    "typography": {
        "font": "url(https://cdn.jsdelivr.net/npm/roboto-font@0.1.0/fonts/Roboto/roboto-regular-webfont.ttf)",
        "fontBold": "url(https://cdn.jsdelivr.net/npm/roboto-font@0.1.0/fonts/Roboto/roboto-bold-webfont.ttf)"
    },
    "button": {
        "borderRadius": "2",
        "dropShadow": true
    },
    "modal": {
        "title": {
            "color": "#6D7680",
            "lineColor": "#DAE2EA"
        },
        "borderColor": "#ffffff",
        "borderRadius": "6",
        "borderWidth": "2",
        "dropShadow": true,
        "outsideBackgroundColor": "#DAE2EA"
    },
    "tooltip": {
        "color": "#C8D0FF",
        "backgroundColor": "#07124E"
    },
    "analyticalDesigner": {
        "title": {
            "color": "#6D7680"
        }
    },
    "dashboards": {
        "title": {
            "color": "#6D7680",
            "backgroundColor": "#F4F5FB",
            "borderColor": "#1b4096"
        },
        "navigation": {
            "title": {
                "color": "#6d7680"
            },
            "borderColor": "#DAE2EA",
            "item": {
                "color": "#6d7680",
                "hoverColor": "#000",
                "selectedColor": "#000",
                "selectedBackgroundColor": "#F4F5FB"
            },
            "backgroundColor": "#ffffff"
        },
        "filterBar": {
            "filterButton": {
                "backgroundColor": "#F4F5FB"
            },
            "backgroundColor": "#F4F5FB",
            "borderColor": "#1b4096"
        },
        "section": {
            "title": {
                "color": "#6D7680",
                "lineColor": "#dde4eb"
            },
            "description": {
                "color": "#999EA5"
            }
        },
        "content": {
            "kpiWidget": {
                "title": {
                    "color": "#8292E3",
                    "textAlign": "center"
                },
                "kpi": {
                    "primaryMeasureColor": "#E8EAF7",
                    "secondaryInfoColor": "#8292E3"
                },
                "borderColor": "#3049D1",
                "borderRadius": "6",
                "borderWidth": "1",
                "backgroundColor": "#1b4096",
                "dropShadow": true
            },
            "widget": {
                "title": {
                    "color": "#101010",
                    "textAlign": "center"
                },
                "borderColor": "#ffffff",
                "borderRadius": "6",
                "borderWidth": "2",
                "dropShadow": true,
                "backgroundColor": "#ffffff"
            },
            "backgroundColor": "#F4F5FB"
        }
    }
}

An example of a dashboard using a custom theme.

General Rules

To customize Dashboards, update the properties in the dashboards section.

To customize Analytical Designer, update the properties in the analyticalDesigner section.

When creating your themes, follow these general rules:

Colors	Use the following color coding formats: Hexadecimal color without transparency: `#ff0` or `#ff00ff` Hexadecimal color with transparency: `#ff06` or `#ff00ff80` RGB colors: `rgb(120,120,120)` RGBA colors: `rgb(120,120,120,0.6)` Background colors should give enough contrast for texts to be readable.
Borders	Border radius and weight use pixels. To use a different unit, include it in the string. Example: `"border-radius" : "2em"`
Widget borders	The recommended maximum for the widget border radius is 30px. The recommended maximum width of widget borders is 4px. To hide the border of widgets, use a transparent color instead of borderwidth=0. Example: `"borderColor": "78787800"` or `"borderColor": "rgb(120,120,120,0)"`

Properties

The following sections contain information about individual properties, examples, and exemplary codes.

Colors

The basic colors for your Dashboards and Analytical Designer are defined in the palette section.

Primary color
Error color
Success color
Warning color
Complementary color

Primary color

Color for primary buttons, links, and accented visual elements.

"primary" : {
   "base" : "#3049D1"
}

Default:

Custom:

Error color

Color for error messages and error states.

 "error" : {
   "base" : "#7d07f2"
}

Default:

Custom:

Success color

Color for success messages and success states.

"success" : {
   "base" : "#00c18d"
}

Default:

Custom:

Warning color

Color for warning messages and warning states.

"warning" : {
   "base" : "#e60000"
}

Default:

Custom:

Complementary color

For Dashboards only.

Colors for various visual elements, such as borders, lines, shadows, buttons, and so on.

"complementary" : {
        "c0" : "#282a36",
        "c1" : "#4d4466",
        "c2" : "#725e97",
        "c3" : "#9778c8",
        "c4" : "#bd93f9",
        "c5" : "#c8a7f7",
        "c6" : "#d4bbf6",
        "c7" : "#e0cff4",
        "c8" : "#ece3f3",
        "c9" : "#f8f8f2"
    }

The complementary palette consists of 10 colors of your choice (c0 to c9). You can define:

All 10 colors.
The first (c0) and the last color (c9).
These two colors are mandatory. The rest will be calculated automatically using these colors.
The first color (c0), the last color (c9), and any number of colors in between.
The rest will be calculated automatically using these colors.

The individual colors are used for:

c0 - Background color of dashboard, widgets, dialogs, etc.
c1 - Contrast background color
c2 - More contrast background color
c3 - Border light color
c4 - Border medium color
c5 - Text light color, border dark color
c6 - Text color
c7 - Text color
c8 - Text color
c9 - Text dark color, foreground color

Fonts

Fonts are defined in the typography section of the JSON.

Specify both variants of the font (regular and bold). Both variants must be from the same font family.

Domain Whitelisting Required: To use external fonts, the font domain must be whitelisted in your organization’s Content Security Policy (CSP). Currently, only https://fonts.gstatic.com/ is enabled by default.
If you need fonts from another URL, you must:
Add the font domain to your CSP font-src directive
Or contact our support for assistance with CSP configuration

For external fonts, use the following formats:

Recommended: Absolute URL only - "font": "url(https://somewebsite.com/path/to/font.woff)"
Explicit format - "font": "url(https://somewebsite.com/path/to/font.woff) format('woff')"

For local fonts, use the following formats:

"font": "local(Arial)"
"font": "local(Times New Roman)"
"font": "local('Times New Roman')"

To specify a regular font, use the following code:

"font" : "url(https://cdn.jsdelivr.net/npm/roboto-font@0.1.0/fonts/Roboto/roboto-regular-webfont.ttf)"

To specify a bold font, use the following code:

"fontBold": "url(https://somewebsite.com/path/to/font-bold.woff)"

Working Examples

Here are tested, working font configurations:

Open Sans (Alternative Source)

"typography": {
    "font": "url(https://db.onlinewebfonts.com/t/629a55a7e793da068dc580d184cc0e31.woff2)",
    "fontBold": "url(https://db.onlinewebfonts.com/t/50145685042b4df07a1fd19957275b81.woff2)"
}

Roboto (CDN)

"typography": {
    "font": "url(https://cdn.jsdelivr.net/npm/roboto-font@0.1.0/fonts/Roboto/roboto-regular-webfont.woff2)",
    "fontBold": "url(https://cdn.jsdelivr.net/npm/roboto-font@0.1.0/fonts/Roboto/roboto-bold-webfont.woff2)"
}

Troubleshooting Font Issues

If your custom fonts are not loading, check the following:

1. Console Errors

Open your browser’s Developer Tools (F12) and check the Console tab for errors like:

Refused to load the font 'https://example.com/font.woff2' because it violates the following Content Security Policy directive: "font-src 'self' data: ..."

Solution: Add the font domain to your CSP font-src directive.

2. Font URL Format Issues

Problem: URLs containing format('woff2') in the path don’t work

// ❌ This doesn't work
"font": "url(https://fonts.gstatic.com/font.woff2) format('woff2')"

Solution: Remove format specifications from the URL path

// ✅ This works
"font": "url(https://fonts.gstatic.com/font.woff2)"

3. Corrupted Font Files

Some Google Fonts URLs may reference corrupted files. If a font doesn’t work despite proper CSP configuration:

Try alternative font sources (like db.onlinewebfonts.com or cdn.jsdelivr.net)
Test the font URL directly in your browser
Use different font variants or weights

4. Missing Bold Variant

Ensure you specify both font and fontBold properties:

"typography": {
    "font": "url(https://example.com/font-regular.woff2)",
    "fontBold": "url(https://example.com/font-bold.woff2)"
}

Recommended fonts

Here are some recommended free fonts that you can use in your themes.

Sans Serif Fonts	Serif Fonts
Lato	Crimson Text
Assistant	Old Standard TT
Noto Sans	Kameron
Source Sans Pro	Copse
Libre Franklin	Playfair Display
Open Sans	Lora
Roboto	Merriweather
Titillium Web	PT Serif
Varela Round	Source Serif Pro

Visual elements

Customize visual elements, such as buttons, overlay windows, and tooltips.

Buttons
Overlay windows
Tooltips

Buttons

Customize the look of buttons in Dashboards and Analytical Designer.

"button" : {
  "borderRadius" : "0",
  "dropShadow" : false
}

Default:

Custom:

Overlay windows

Customize overlay windows.

"modal" : {
  "title" : {
     "color" : "#6D7680",
     "lineColor" : "#DAE2EA"
  },
  "borderColor" : "#ffffff",
  "borderRadius" : "6",
  "borderWidth" : "2",
  "dropShadow" : true,
  "outsideBackgroundColor" : "#DAE2EA"
}

Tooltips

Customize tooltips.

"tooltip" : {
  "color" : "#C8D0FF",
  "backgroundColor" : "#07124E"
}

Default:

Custom:

Analytical Designer

Customize the color of the visualization names.

Visualization title color

Visualization title color

Color of the visualization name.

"analyticalDesigner" : {
  "title" : {
     "color" : "#d6044e"
  }
}

Default:

Custom:

Dashboards

Customize various elements in Dashboards, such as titles, filters, navigation, and widgets. In the Dashboards section.

Dashboard title
Navigation
Filter bar
Dashboard sections

Dashboard title

Customize the title of your dashboards.

"title" : {
               "color" : "#0392bd",
               "backgroundColor" : "#eafafd",
               "borderColor" : "#1b4096"
            }

Default:

Custom:

Customize the left navigation of the Dashboards.

"navigation" : {
               "title" : {
                  "color" : "#3973ac"
               },
               "borderColor" : "#DAE2EA",
               "item" : {
                  "color" : "#3973ac",
                  "hoverColor" : "#000",
                  "selectedColor" : "#000",
                  "selectedBackgroundColor" : "#F4F5FB"
               },
               "backgroundColor" : "#ffffff"
            }

Default:

Custom:

Filter bar

Customize the look of the filter bar of your dashboards.

"filterBar" : {
               "filterButton" : {
                  "backgroundColor" : "#F4F5FB"
               },
               "backgroundColor" : "#F4F5FB",
               "borderColor" : "#1b4096"
            }

Default:

Custom:

Dashboard sections

Customize the title and description of the sections on your dashboards.

"section" : {
               "title" : {
                  "color" : "#3b6ba1",
                  "lineColor" : "#85abd6"
               },
               "description" : {
                  "color" : "#85abd6"
               }
            }

Default:

Custom:

Visualizations on dashboards

Customize the visualizations added to dashboards.

"widget": {
    "title": {
        "color": "#101010",
        "textAlign": "center"
    },
    "borderColor": "#F4F5FB",
    "borderRadius": "6",
    "borderWidth": "2",
    "dropShadow": true,
    "backgroundColor": "#F4F5FB"
}

Default:

Custom:

Background color

Color of the dashboard background.

"backgroundColor" : "#F4F5FB"

Default:

Custom:

Theme Examples

Theme Properties

Complete JSON Structure

General Rules

Properties

Colors

Primary color

Error color

Success color

Warning color

Complementary color

Fonts

Working Examples

Open Sans (Alternative Source)

Roboto (CDN)

Troubleshooting Font Issues

1. Console Errors

2. Font URL Format Issues

3. Corrupted Font Files

4. Missing Bold Variant

Recommended fonts

Visual elements

Buttons

Overlay windows

Tooltips

Analytical Designer

Visualization title color

Dashboards

Dashboard title

Navigation

Filter bar

Dashboard sections

Content section

Visualizations on dashboards

Background color