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: NEW JSON from PEK

{
    "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"
        }
    }
}

Appearance section

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:

ColorsUse 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.
BordersBorder radius and weight use pixels. To use a different unit, include it in the string. Example: "border-radius" : "2em"
Widget bordersThe 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

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

"primary" : {
   "base" : "#3049D1"
}
DefaultCustom
Default primary color
|
Custom primary color
|

Error color

Color for error messages and error states.

"error" : {
  "base" : "#7d07f2"
}
DefaultCustom
Default error color
|
Custom error color
|

Success color

Color for success messages and success states.

"success" : {
   "base" : "#00c18d"
}
DefaultCustom
Default success color
|
Custom success color
|

Warning color

Color for warning messages and warning states.

"warning" : {
   "base" : "#e60000"
}
DefaultCustom
Default success color
|
Custom success color
|

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.

Currently, only https://fonts.gstatic.com/ is enabled as external URL.

If you need fonts from another URL, contact our support.

For external fonts, use the following formats:

  • Absolute URL - "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(Time 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:

"font": "local(font), url(path/to/font.svg) format('svg'),
         url(path/to/font.woff) format('woff'),
         url(path/to/font.otf) format('opentype')"

Recommended fonts

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

Sans Serif FontsSerf Fonts
LatoCrimsonn Text
AssistantOld Standard TT
Nono SansKameron
Source Sans ProCopse
Libre Franklin
Open Sans
Roboto
Titilium Web
Varela Round

Visual elements

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

Buttons

Customize the look of buttons in Dashboards and Analytical Designer.

"button" : {
  "borderRadius" : "0",
  "dropShadow" : false
}
DefaultCustom
Default button color
|
Custom button color
|

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"
}
DefaultCustom
Default tooltips
|
Custom tooltips
|

Analytical Designer

Customize the color of the visualization names.

Visualization title color

Color of the visualization name.

"analyticalDesigner" : {
  "title" : {
     "color" : "#d6044e"
  }
}
DefaultCustom
Default title color
|
Custom title color
|

Dashboards

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

Dashboard title

Customize the title of your dashboards.

"title" : {
               "color" : "#0392bd",
               "backgroundColor" : "#eafafd",
               "borderColor" : "#1b4096"
            }
DefaultCustom
Default title color
|
Custom title color
|

Navigation

Customize the left navigation of the Dashboards.

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

Filter bar

Customize the look of the filter bar of your dashboards.

"filterBar" : {
               "filterButton" : {
                  "backgroundColor" : "#F4F5FB"
               },
               "backgroundColor" : "#F4F5FB",
               "borderColor" : "#1b4096"
            }
DefaultCustom
Default filter bar
|
Custom filter bar
|

Dashboard sections

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

"section" : {
               "title" : {
                  "color" : "#3b6ba1",
                  "lineColor" : "#85abd6"
               },
               "description" : {
                  "color" : "#85abd6"
               }
            }
DefaultCustom
Default sections
|
Custom sections
|

Content section

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"
}
DefaultCustom
Default visualizations
|
Custom visualizations
|

Background color

Color of the dashboard background.

"backgroundColor" : "#F4F5FB" 
DefaultCustom
Default dahsboard background
|
Custom dahsboard background
|