Basic styling of apps using custom themes

These examples show how to apply basic styling to your apps using custom themes. All properties referenced in the examples below are described in detail in Custom theme JSON properties.

Defining variables

A variable is a symbolic name associated with a value and whose associated value may be changed. They are defined in the _variables property and the variable names must be prefixed with @.

Note: Colors should be defined using hexadecimal values.
"_variables" : { "@grayscale-100" : "#FFFFFF", "@grayscale-98" : "#FBFBFB", "@grayscale-95" : "#F2F2F2", "@grayscale-90" : "#E6E6E6", "@grayscale-85" : "#D9D9D9", "@grayscale-80" : "#CCCCCC", "@grayscale-75" : "#BFBFBF", "@grayscale-70" : "#B3B3B3", "@grayscale-65" : "#A6A6A6", "@grayscale-60" : "#999999", "@grayscale-55" : "#8C8C8C", "@grayscale-50" : "#808080", "@grayscale-45" : "#737373", "@grayscale-40" : "#666666", "@grayscale-35" : "#595959", "@grayscale-30" : "#4D4D4D", "@grayscale-28" : "#474747", "@grayscale-25" : "#404040", "@grayscale-20" : "#333333", "@grayscale-15" : "#262626", "@grayscale-10" : "#1A1A1A", "@grayscale-5" : "#0D0D0D", "@grayscale-0" : "#000000", "@text" : "13px" }

Setting the basic font color

The top level color property controls all font colors in the app. If you define the color property on a lower level, for example for object titles, subtitles and footnotes, these will override the top level color definition.

"color": "@grayscale-20",

Setting the general font size

The top level fontSize property controls the font size in the app. If you define the fontSize property on a lower level, for example for object titles, subtitles and footnotes, these will override the top level fontSize definition

"fontSize": "@text",

Defining the background color of the visualizations

The top level backgroundColor property controls the background color of all visualizations in the app. If you define the backgroundColor property on a lower level, for example on a specific chart type, this will override the top level backgroundColor definition.

"backgroundColor": "@grayscale-95",

Defining the data colors

The dataColors object holds the following color definitions:

Property Description
primaryColor Primary data color definition. This is the default color for data in the charts when you use auto colors.
othersColor Color definition for others group values.
errorColor Color definition for error values.
nullColor Color definition for null values.
"dataColors": { "primaryColor": "@grayscale-28", "othersColor": "@grayscale-55", "errorColor": "@grayscale-90", "nullColor": "@grayscale-85" }

Full code example

Did this information help you?

Thanks for letting us know. Is there anything you'd like to tell us about this topic?

Can you tell us why it did not help you and how we can improve it?