Skip to main content Skip to complementary content
Qlik Resources

Custom theme JSON properties

Information noteThis topic does not include all possible properties, and all properties listed in this topic are not mandatory.
Information noteColors should be defined using hexadecimal values.

These are common properties of the JSON file top level structure.

Common properties
Property Description
_inherit

Defines if the custom theme inherits style properties from the Sense Classic theme. Properties defined in the JSON file override the inherited properties.

Default or undefined: true.

Example:  

"_inherit": false,
_cards

Optional.

Defines if the custom theme should style the objects on the sheets as cards.

Default or undefined: false.

Example:  

"_cards": false,
_variables

Optional.

Variables that can be referenced within the JSON file.

Information noteVariable names must be prefixed with @.

Example:  

"_variables": { "@default": "#555555", "@dark": "#333333", "@light": "#eeeeee", "@H1": "24px", "@H2": "18px", "@H3": "14px", "@H4": "13px", "@H5": "12px", "@font-normal": "12px" }
custom_styles

Optional.

Reference to a custom style sheet that will be inserted when theme is applied.

Information noteAlthough adding custom CSS files is possible, not all CSS rules work at all times in Qlik Sense. For greater stability, use a JSON file instead.

Example:  

"customStyles": [{ "cssRef": "theme.css", "classRef": "my-theme" }]
color

Font color.

This setting can be overridden by defining the color property on any level that supports color.

Example:  

"color": "@default"
fontSize

Font size.

This setting can be overridden by defining the fontSize property on any level that supports fontSize.

Example:  

"fontSize": "@font-normal"
fontFamily

Font (typeface)

Can be specified as a list of prioritized fonts and generic family names, separated by a comma. This setting can be overridden by defining the fontFamily property on any level that supports fontFamily.

Example:  

"fontFamily": "Arial, Helvetica, sans-serif"
backgroundColor

Background color of charts.

This setting can be overridden by defining the background color property on chart-type level.

Example:  

"backgroundColor": "@light"
object

Object styling.

object for more details.

Example:  

"object": { "line": { ... }, "title": { ... }, "label": { ... }, "axis": { ... }, "grid": { ... }, "referenceLine": { ... }, "legend": { ... }, "barChart": { ... }, "boxPlot": { ... }, "distributionPlot": { ... }, "filterpane": { ... }, "kpi": { ... }, "gauge": { ... }, "histogram": { ... }, "lineChart": { ... }, "listBox": { ... }, "mapChart": { ... }, "pieChart": { ... }, "pivotTable": { ... }, "scatterPlot": { ... }, "straightTable" : { ... }, "textImage": { ... }, "treemap": { ... }, "waterfallChart" : { ... } }
dataColors

Data color properties.

  • primaryColor: Primary color property.

  • othersColor: Others color property.

  • errorColor: Error color property.

  • nullColor: Null color property.

  • selected: Color property for selected values. This property appears in the selection bar and all listboxes. It also appears when making selections in the Straight table and Pivot table charts in the Visualization bundle.

  • alternative: Color property for alternative values. This property appears in the selection bar and all listboxes.

  • excluded: Color property for excluded values. This property appears in the selection bar and all listboxes.

  • selectedExcluded: Color property for selected excluded values. This property appears in the selection bar and all listboxes.

  • possible: Color property for possible values. This property appears in the selection bar and all listboxes.

Example:  

"dataColors": { "primaryColor": "#0000FF", "othersColor": "#808080", "errorColor": "#FF0000", "nullColor": "#FFFF00", "selected": "#ff9900", "alternative": "#D9D9D9", "excluded": "#4B4B4B", "selectedExcluded": "#888888", "possible": "#ffffff" }
palettes

Customized color palette properties.

palettes for more details.
scales

Color scheme properties.

scales for more details.
sheet

Properties for the background color of the sheet title.

sheet for more details.

object

These are the common properties of the object structure.

title

Title properties. This setting can be overridden by defining the title property on chart-type level.

title properties
Property Description
main

Main title properties.

  • color: Font color.

    Example:  

    "color": "@default"

  • fontSize: Font size.

    Example:  

    "fontSize": "@font-normal"

  • fontFamily: Font (typeface)

    Example:  

    "fontFamily": "sans-serif"
subTitle

Subtitle properties.

  • color: Font color.

    Example:  

    "color": "@default"

  • fontSize: Font size.

    Example:  

    "fontSize": "@font-normal"

  • fontFamily: Font (typeface)

    Example:  

    "fontFamily": "sans-serif"
footer

Footer properties.

  • color: Font color.

    Example:  

    "color": "@default"

  • fontSize: Font size.

    Example:  

    "fontSize": "@font-normal"

  • fontFamily: Font (typeface)

    Example:  

    "fontFamily": "sans-serif"

  • backgroundColor: Background color.

    Example:  

    "backgroundColor": "@light"

Example:  

"title": { "main": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "subTitle": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "footer": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif", "backgroundColor": "@light" } }

label

Label properties. This setting can be overridden by defining the label property on chart-type level for charts that have labels.

Label properties are supported for the following chart types:

Chart types and label support
Chart type label.name.color label.name.fontSize label.value.color label.value.fontSize
barChart - - Yes Yes
bulletChart - - Yes Yes
gauge - - Yes - (calculated)
histogram - - Yes Yes
kpi Yes - (calculated) - - (calculated)
lineChart - - Yes Yes
mapChart - - - Yes
pieChart Yes Yes - (calculated) Yes
pieChart (donut) Yes Yes Yes Yes
scatterPlot - - Yes Yes
waterfallChart - - - Yes

Note that label.name.fontFamily and label.value.fontFamily are supported by all chart types.

label properties
Property Description
name

Label name properties.

  • color: Font color.

    Example:  

    "color": "@default"

  • fontSize: Font size.

    Example:  

    "fontSize": "@font-normal"

  • fontFamily: Font (typeface)

    Example:  

    "fontFamily": "sans-serif"
value

Label value properties.

  • color: Font color.

    Example:  

    "color": "@default"

  • fontSize: Font size.

    Example:  

    "fontSize": "@font-normal"

  • fontFamily: Font (typeface)

    Example:  

    "fontFamily": "sans-serif"

Example:  

"label": { "name": { "color": "@default", "fontSize": "10px", "fontFamily": "sans-serif" }, "value": { "color": "@default", "fontSize": "10px", "fontFamily": "sans-serif" } }

axis

Axis properties. This setting can be overridden by defining the axis property on chart-type level for charts with axes (bar charts, box plots, combo charts, distribution plots, gauges, histograms, line charts, scatter plots, and waterfall charts).

For pie charts, axis.title can be overridden and is used for styling the dimension label.

axis properties
Property Description
title

Axis title properties.

  • color: Font color.

    Example:  

    "color": "@default"

  • fontSize: Font size.

    Example:  

    "fontSize": "@font-normal"

  • fontFamily: Font (typeface)

    Example:  

    "fontFamily": "sans-serif"

 
label

Axis label properties.

  • name: Properties.

    • color: Font color.

      Example:  

      "color": "@default"

    • fontSize: Font size.

      Example:  

      "fontSize": "@font-normal"

    • fontFamily: Font (typeface)

      Example:  

      "fontFamily": "sans-serif"
line

Axis line properties.

  • major: Axis title properties.

    • color: Font color.

      Example:  

      "color": "@default"

  • minor: Axis label properties.

    • color: Font color.

      Example:  

      "color": "@default"

Example:  

"axis": { "title": { "fontSize": "@font-normal", "fontFamily": "sans-serif", "color": "@default" }, "label": { "name": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" } }, "line": { "major": { "color": "@default" }, "minor": { "color": "@default" } } }

grid

Grid properties. This setting cannot be overridden on chart-type level.

grid properties
Property Description
line

Line properties.

  • highContrast: High contrast property.

    • color: Font color.

      Example:  

      "color": "@default"

  • major: Major property.

    • color: Font color.

      Example:  

      "color": "@default"

  • minor: Minor property.

    • color: Font color.

      Example:  

      "color": "@default"

Example:  

"grid": { "line": { "highContrast": { "color": "@default" }, "major": { "color": "@default" }, "minor": { "color": "@default" } } }

referenceLine

Reference line properties. This setting cannot be overridden on chart-type level.

referenceLine properties
Property Description
label

Label properties.

  • name: Name properties.

    • color: Font color.

      Example:  

      "color": "@default"

    • fontSize: Font size.

      Example:  

      "fontSize": "@font-normal"

    • fontFamily: Font (typeface)

      Example:  

      "fontFamily": "sans-serif"
outOfBounds

Out of bounds properties.

  • color: Font color.

    Example:  

    "color": "@default"

  • backgroundColor: Background color.

    Example:  

    "backgroundColor": "@light"

  • fontSize: Font size.

    Example:  

    "fontSize": "@font-normal"

  • fontFamily: Font (typeface)

    Example:  

    "fontFamily": "sans-serif"

Example:  

"referenceLine": { "label": { "name": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" } }, "outOfBounds": { "color": "@default", "backgroundColor": "@default", "fontSize": "@H6", "fontFamily": "sans-serif" } }

legend

Legend properties. This setting can be overridden by defining the legend property on chart-type level for charts with legends (bar charts, combo charts, line charts, map charts, pie charts, scatter plots, treemaps, waterfall charts).

legend properties
Property Description
title

Legend title properties.

  • color: Font color.

    Example:  

    "color": "@default"

  • fontSize: Font size.

    Example:  

    "fontSize": "@font-normal"

  • fontFamily: Font (typeface)

    Example:  

    "fontFamily": "sans-serif"
label

Legend label properties.

  • color: Font color.

    Example:  

    "color": "@default"

  • fontSize: Font size.

    Example:  

    "fontSize": "@font-normal"

  • fontFamily: Font (typeface)

    Example:  

    "fontFamily": "sans-serif"

Example:  

"legend": { "title": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" }, "label": { "color": "@default", "fontSize": "@font-normal", "fontFamily": "sans-serif" } }

{chart-type}

See Chart types for more details.

Chart type can be:

  • barChart
  • boxPlot
  • comboChart
  • distributionPlot
  • filterpane
  • gauge
  • histogram
  • kpi
  • lineChart
  • listBox
  • mapChart
  • pieChart
  • pivotTable
  • scatterPlot
  • straightTable
  • textImage
  • treemap
  • waterfallChart
Information noteMost global object properties can also be defined on chart-type level. If done, this overrides the properties set on the global object level.

Chart types

These are the common chart type properties that can exist within the object structure. The properties listed for each chart are specific to them.

Information noteMost global object properties can also be defined on chart-type level. If done, this overrides the properties set on the global object level.

barChart

Bar chart properties.

barChart properties
Property Description
outOfRange

Out of range properties.

  • color: Font color.

    Example:  

    "color": "@default"

boxPlot

Box plot properties.

boxPlot properties
Property Description
box

Box properties.

  • whisker: Properties.

    • stroke: Stroke color.

      Example:  

      "stroke": "@default"

  • line: Properties

    • stroke: Stroke color.

      Example:  

      "stroke": "@default"

  • box: Properties

    • fill: Fill color.

      Example:  

      "fill": "@default"

    • stroke: Stroke color.

      Example:  

      "stroke": "@default"

bulletChart

Bullet chart properties.

bulletChart properties
Property Description
outOfRange

Out of range properties.

  • color: Font color.

    Example:  

    "color": "@default"

comboChart

Combo chart properties.

distributionPlot

Distribution plot properties.

distributionPlot properties
Property Description
box

Box properties.

  • fill: Fill color.

    Example:  

    "fill": "@default"

filterpane

Filter pane properties.

gauge

Gauge properties.

histogram

Histogram properties.

kpi

KPI properties.

lineChart

Line chart properties.

lineChart properties
Property Description
outOfRange

Out of range properties.

  • color: Font color.

    Example:  

    "color": "@default"

listBox

List properties. Used to style filter panes and the list boxes in the selections tool.

listBox properties
Property Description
content

List box content properties.

  • color: Font color.

    Example:  

    "color": "@default"

  • fontSize: Font size.

    Example:  

    "fontSize": "@font-normal"

  • fontFamily: Font (typeface)

    Example:  

    "fontFamily": "sans-serif"
dataColors

Data color properties for list boxes.

  • selected: Color property for selected values. This color property appears in all listboxes, including in filter panes, the selection tool, and when searching values in charts.

    Example:  

    "selected": "#ff9900"

  • alternative: Color property for alternative values. This color property appears in all listboxes, including in filter panes, the selection tool, and when searching values in charts.

    Example:  

    "alternative": "#D9D9D9"

  • excluded: Color property for excluded values. This color property appears in all listboxes, including in filter panes, the selection tool, and when searching values in charts.

    Example:  

    "excluded": "#4B4B4B"

  • selectedExcluded: Color property for selected excluded values. This color property appears in all listboxes, including in filter panes, the selection tool, and when searching values in charts.

    Example:  

    "selectedExcluded": "#888888"

  • possible: Color property for possible values. This color property appears in all listboxes, including in filter panes, the selection tool, and when searching values in charts.

    Example:  

    "possible": "#ffffff"

mapChart

Map chart properties.

mapChart properties
Property Description
label

Map chart label properties.

  • value: Properties.

    • dark.color: Dark font color.

    • light.color: Light font color.

Example:  

"label": { "value": { "dark": { "color": "@grayscale-20" }, "light": { "color": "@grayscale-70" } } }

pieChart

Pie chart properties.

pieChart properties
Property Description
axis

Pie chart axis properties.

  • title: Properties.

    • color: Font color.

      Example:  

      "color": "@default"

    • fontSize: Font size.

      Example:  

      "fontSize": "@font-normal"

    • fontFamily: Font (typeface)

      Example:  

      "fontFamily": "sans-serif"
label

Pie chart label properties.

Information noteOnly applicable for pie charts presented as a donut.

  • value: Properties.

    • color: Font color.

      Example:  

      "color": "@default"

pivotTable

Pivot table properties.

pivotTable properties
Property Description
header

Pivot table header properties.

  • color: Font color.

    Example:  

    "color": "@default"

  • fontSize: Font size.

    Example:  

    "fontSize": "@font-normal"

  • fontFamily: Font (typeface)

    Example:  

    "fontFamily": "sans-serif"
content

Pivot table content properties.

  • color: Font color.

    Example:  

    "color": "@default"

  • fontSize: Font size.

    Example:  

    "fontSize": "@font-normal"

  • fontFamily: Font (typeface)

    Example:  

    "fontFamily": "sans-serif"

  • hover: Properties.

    • backgroundColor: Background color when hovering.

      Example:  

      "backgroundColor": "@light"

    • color: Font color when hovering.

      Example:  

      "color": "@default"
scrollbar

Pivot table scroll bar properties.

  • size: Scroll bar width.

    Example:  

    "size": "small"

scatterPlot

Scatterplot properties.

straightTable

Table properties.

straightTable properties
Property Description
header

Straight table header properties.

  • color: Font color.

    Example:  

    "color": "@default"

  • fontSize: Font size.

    Example:  

    "fontSize": "@font-normal"

  • fontFamily: Font (typeface)

    Example:  

    "fontFamily": "sans-serif"
content

Straight table content properties.

  • color: Font color.

    Example:  

    "color": "@default"

  • fontSize: Font size.

    Example:  

    "fontSize": "@font-normal"

  • fontFamily: Font (typeface)

    Example:  

    "fontFamily": "sans-serif"

  • hover: Properties.

    • backgroundColor: Background color when hovering.

      Example:  

      "backgroundColor": "@light"

    • color: Font color when hovering.

      Example:  

      "color": "@default"
scrollbar

Straight table scroll bar properties.

  • size: Scroll bar width.

    Example:  

    "size": "small"

textImage

Text & image properties.

treemap

Treemap properties.

treemap properties
Property Description
branch

Branch properties.

  • backgroundColor: Background color property.

  • label: Branch label properties.

    • color: Font color.

      Example:  

      "color": "@default"

    • fontSize: Font size.

      Example:  

      "fontSize": "@font-normal"

    • fontFamily: Font (typeface)

      Example:  

      "fontFamily": "sans-serif"
leaf

Leaf properties.

  • label: Leaf label properties.

    • fontSize: Font size.

      Example:  

      "fontSize": "@font-normal"

    • fontFamily: Font (typeface)

      Example:  

      "fontFamily": "sans-serif"

waterfallChart

Waterfall chart properties.

waterfallChart properties
Property Description
value

Value properties.

  • color: Properties.

    • default: Default color.

      Example:  

      "default": "@default"

    • dark: Dark color.

      Example:  

      "dark": "@dark"

    • light: Light color.

      Example:  

      "light": "@light"
shape

Line chart label properties.

  • positiveValue: Properties.

    • fill: Fill color.

      Example:  

      "fill": "@default"

  • negativeValue: Properties.

    • fill: Fill color.

      Example:  

      "fill": "@default"

  • subtotal: Properties.

    • fill: Fill color.

      Example:  

      "fill": "@default"

  • bridge: Properties.

    • stroke: Stroke color.

      Example:  

      "stroke": "@default"

{extension-name}

Extension properties for this specific extension.

palettes

These are the common color palette properties.

palettes properties
Property Description
data

Properties for data palette. These are used for Color by dimension in the properties panel.

  • name: Name of the palette. Optional.

  • othersColor: Display name for the color palette in the UI.

    Example:  

    "translation": "12 colors",

  • propertyValue: Identifier of the palette. Must be unique in the system.

  • type: Type of color palette.

    • pyramid
    • row

  • scale: Definition of all colors used in the palette. Scales from top to bottom, and left to right.
ui

Properties for the UI palette. You can define several palettes but the first palette defined in ui is used in the color picker for example when coloring by single color.

  • name: Name of the palette.

  • colors: Colors used in the UI palette. Should always be unique colors defined.

scales

These are the common color scheme properties. The scales are used for Color by measure in the properties panel.

scales properties
Property Description
name

Name of the color scheme.

Example:  

"name": "Custom Sequential Gradient"
translation

Display name for the color scheme in the UI.

Example:  

"translation": "Custom Sequential Gradient"
type

Type of the color scheme.

  • gradient
  • class

Example:  

"type": "gradient"
propertyValue

Property value of the color scheme.

  • sg for Sequential Gradient
  • sc for Sequential Classes
  • dg for Diverging gradient
  • dc for Diverging Classes

Example:  

"propertyValue": "sg"
scale

Colors included in the color scheme, scaled from left to right.

Example:  

"scale": [ "#1A2980", "#26D0CE" ]

sheet

These are the sheet title background color properties.

sheet properties
Property Description
title

Properties for sheet title background color.

  • private: Private sheets that have not been shared.
    • titleBackgroundColor: Defines the background color of the sheet title.
    • titleBackgroundGradientColor: Defines the color of the gradient within the sheet title.
  • approved: Published and approved sheets.
    • titleBackgroundColor: Defines the background color of the sheet title.
    • titleBackgroundGradientColor: Defines the color of the gradient within the sheet title.
  • published: Published by you or others and not approved.
    • titleBackgroundColor: Defines the background color of the sheet title.
    • titleBackgroundGradientColor: Defines the color of the gradient within the sheet title.

Example

Did this page help you?

If you find any issues with this page or its content – a typo, a missing step, or a technical error – let us know how we can improve!

Leave your feedback here