Theme Properties

Overview

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 (expand to display):

{
  "theme": {
    "content": {
      "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"
        }
      }
    },
    "meta": {
      "category": "theme",
      "deprecated": "0",
      "isProduction": 1,
      "summary": "",
      "tags": "",
      "title": "Demo theme"
    }
  }
}

General rules

To customize KPI 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)"

Meta section

Regardless of the number of changed properties, every custom theme must include the meta section.

"meta" : {
         "category" : "theme",
         "deprecated" : "0",
         "isProduction" : 1,
         "summary" : "",
         "tags" : "",
         "title" : "{Your theme name}"
      }

Properties

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

Colors

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

PropertyDescriptionExample code
Primary color

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

Default:  

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

Custom: 

Error color

Color for error messages and error states.

Default: 

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

Custom:  

Success color

Color for success messages and success states.

Default:   

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

Custom:  

Warning color

Color for warning messages and warning states.

Default:   

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

Custom:  

 

Complementary

For KPI Dashboards only.

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

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

For examples of complementary palette usage, see Theme Examples.

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

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.

Use the following formats to external fonts:

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

Use the following formats to local fonts:

  • "font": "local(Arial)"
  • "font": "local(Time New Roman)"
  • "font": "local('Times New Roman')"
PropertyDescriptionExample code
Regular fontSpecify a regular font.
"font" : "url(https://cdn.jsdelivr.net/npm/roboto-font@0.1.0/fonts/Roboto/roboto-regular-webfont.ttf)"
"font": "local(font), url(path/to/font.svg) format('svg'),
         url(path/to/font.woff) format('woff'),
         url(path/to/font.otf) format('opentype')"
Bold fontSpecify a bold face of the font.
"fontBold" : "url(https://cdn.jsdelivr.net/npm/roboto-font@0.1.0/fonts/Roboto/roboto-bold-webfont.ttf)"

Recommended fonts

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

Sans Serif FontsSerif Fonts

Visual elements

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

PropertyDescriptionExample code
Button

Customize the look of buttons in KPI Dashboards and analytical Designer.

Default:  

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

Custom:  

 

Overlay windowsCustomization of overlay windows.
"modal" : {
  "title" : {
     "color" : "#6D7680",
     "lineColor" : "#DAE2EA"
  },
  "borderColor" : "#ffffff",
  "borderRadius" : "6",
  "borderWidth" : "2",
  "dropShadow" : true,
  "outsideBackgroundColor" : "#DAE2EA"
}
Tooltips

Customize tooltips.

Default:  

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

Custom:  

 

Analytical Designer

Customize the color of the insight names.

PropertyDescriptionExample code
Insight title color

Color of the insight name.

Default:

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

Custom:

KPI Dashboards

Customize various elements in KPI Dashboards, such as titles, filters, navigation, and widgets.

PropertyDescriptionExample code
KPI Dashboard title

Customize the title of your KPI Dashboards.

Default: 

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

Custom:  

Navigation

Customize the left navigation of the KPI Dashboards.

Default:  

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

Custom: 

 

Filter bar

Customize the look of the filter bar of your KPI Dashboards.

Default:  

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

Custom: 

Dashboard sections

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

Default:  

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

Custom:  

Content section

PropertyDescriptionExample code
KPIs

Customize the look of KPIs on KPI Dashboards.

Keep the border radius at 4px or below to prevent display problems in exported PDF files.

Default:

 "kpiWidget" : {
                  "title" : {
                     "color" : "#8292E3",
                     "textAlign" : "center"
                  },
                  "kpi" : {
                     "primaryMeasureColor" : "#E8EAF7",
                     "secondaryInfoColor" : "#8292E3"
                  },
                  "borderColor" : "#3049D1",
                  "borderRadius" : "6",
                  "borderWidth" : "1",
                  "backgroundColor" : "#1b4096",
                  "dropShadow" : true
               }

Custom:  

Insights on KPI Dashboards

Customize the insights added to KPI dashboards.

If you have headline insights on your KPI dashboard, keep the border radius at 4px or below to prevent display problems in exported PDF files.

Default:  

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

Custom:  

Background color

Color of the KPI dashboard background.

Default:  

"backgroundColor" : "#F4F5FB"

Custom:  

 

 

 

Theme Examples