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

{
   "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" : "#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')"

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

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" : "#ffffff",
                 "borderRadius" : "6",
                 "borderWidth" : "2",
                 "dropShadow" : true
              }
DefaultCustom

Default visualizations

Custom visualizations

Background color

Color of the dashboard background.

"backgroundColor" : "#F4F5FB" 
DefaultCustom

Default dahsboard background

Custom dahsboard background