---
source: https://qlik.dev/extend/create-custom-themes/custom-themes-getting-started/
last_updated: 2025-07-08T16:09:30Z
---

# Get started building custom themes

In this example, you will create a basic theme extension where you'll modify
the font size and the primary colors.

Custom themes contain the following elements:

- A definition (QEXT) file
- A main JSON file
- Optional assets

## Creating the container

Create a folder that will contain your assets and name it `my-custom-theme`.

## Creating the definition file

The definition file defines how custom themes are loaded in Qlik Sense.

The QEXT file extension must be in lower case letters, as in `my-custom-theme.qext`.

> **Note:** Make sure your QEXT file is a valid JSON file.

JSON validator: [http://jsonlint.com](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:** Add additional properties to the QEXT file to provide helpful information about the custom component.

Example:

Create a QEXT file in the folder you just created and name it `my-custom-theme.qext`.

It should contain the following information:

```json
{
    "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.

```json
{
  "_inherit": true,
  "_variables" : {
    "@greenColor" : "#61a729",
    "@text": "#4c4c4c"
  },
  "color": "@text",
  "fontSize": "12px",
  "object" : {
    "title": {
      "main": {
        "fontSize" : "16px"
      }
    }
  },
  "dataColors": {
    "primaryColor": "@greenColor"
  }
}
```

For more information on creating the JSON file and its properties, see [Custom theme JSON properties](https://qlik.dev/extend/property-panel-basics/define-properties/themes-properties).

## Prefixing custom themes

It is good practice to prefix your custom themes to prevent conflicts with
custom themes created by other developers.