Getting started building custom themes
In this example, you will create a basic theme extension where we modify the font size and the primary colors.
Custom themes contains the following elements:
- A definition (QEXT) file
- A main JSON file. This file must be named theme.json.
- Optional assets
Creating the container
Create a folder that will contain your assets. The folder should be created in the following location: ..\Users\[UserName]\Documents\Qlik\Sense\Extensions\.
Example:
C:\Users\[UserName]\Documents\Qlik\Sense\Extensions\my-custom-theme
Creating the definition file
The definition file defines how custom themes are loaded in Qlik Sense.
JSON validator: http://jsonlint.com
The following properties are mandatory for a valid custom theme definition file:
Property | Description |
---|---|
name | The name of the custom theme. |
type | Extension type. Should always be theme for custom themes. |
Example:
Create a QEXT file in the folder we just created and name it my-custom-theme.qext.
It should contain the following information:
{
"name": "Custom theme",
"description": "My first custom theme",
"type": "theme",
"version": "1.0.0",
"author": "Qlik"
}
Creating the main JSON file
In the JSON file you define the style for the individual visualization types. Create a main JSON file and place it in the same folder as the QEXT file. The file must be named theme.json. Paste the following code into the JSON file, and then save it:
{
"_inherit": true,
"_variables" : {
"@greenColor" : "#61a729",
"@text": "#4c4c4c"
},
"color": "@text",
"fontSize": "12px",
"object" : {
"title": {
"main": {
"fontSize" : "16px"
}
}
},
"dataColors": {
"primaryColor": "@greenColor"
}
}
See Custom theme JSON properties for more details on creating the JSON file and its properties.
Prefixing custom themes
It is good practice to prefix your custom themes to prevent conflicts with custom themes created by other developers.
Testing the custom theme
Now is a good time to test your custom component.
Do the following:
- Copy the folder containing the theme, including its content, to C:\Users\[UserName]\Documents\Qlik\Sense\Extensions\my-custom-theme.
- Open Qlik Sense Desktop.
- Open an app.
-
Apply the theme.