Skip to main content Skip to complementary content

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.

Tip noteThe easiest way to get started building your custom themes is to use Qlik Sense Desktop. This example assumes that Qlik Sense Desktop is being used.

Custom themes contains the following elements:

  • A definition (QEXT) file
  • A main JSON file
  • 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.

Information noteThe QEXT file extension must be in lower case letters, as in my-custom-theme.qext.
Tip noteMake sure your QEXT file is a valid JSON file.

JSON validator: http://jsonlint.com

The following properties are mandatory for a valid custom theme definition file:

Definition file properties
Property Description
name The name of the custom theme.
type Extension type. Should always be theme for custom themes.
Tip noteAdd additional properties to the QEXT file as it can provide helpful information about the custom component.

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. Name it 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.

Tip noteThis section assumes that Qlik Sense Desktop is being used.
  1. Copy the folder containing the theme, including its content, to C:\Users\[UserName]\Documents\Qlik\Sense\Extensions\my-custom-theme.
  2. Open Qlik Sense Desktop.
  3. Open an app.
  4. Apply the theme.

    App Theme selection in the Appearance section of app settings

    Styling an app

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!