Qlik Custom Themes: Overview, Tips, and Tricks - Qlik Community

Ouadie

Customizing your Qlik Sense apps not only enhances their visual appeal but also ensures consistency with your organization's branding guidelines. With custom themes you can modify colors, fonts, and layouts on both global and granular levels, giving you complete control over the look and feel of your analytics.

In this blog post, we'll dive into the essentials of building a custom theme, dissect the anatomy of the theme's JSON file, and share some tips and tricks to help you create themes easily.

Bonus: along the way, we will be creating a Netflix inspired theme. We'll go from this:

to this:

Getting Started: The Essentials of Building a Theme

A custom theme in Qlik Sense is a collection of files stored in a folder.

It typically includes:

Definition File (.qext): This file defines the theme's metadata, such as its name, description, type, and version.

{
  "name": "Netflix Theme",
  "description": "A custom theme inspired by Netflix's branding.",
  "type": "theme",
  "version": "1.0.0",
  "author": "Ouadie Limouni"
}

Main JSON File (.json): The core of your theme where you define styles, colors, fonts, and other visual properties.
Optional Assets:
- CSS Files: For additional styling that can't be achieved through the JSON file alone.
- Font Files: Custom fonts to enhance typography.
- Images: Logos or background images to incorporate into your theme.

Folder structure example:

netflix-theme/
├── netflix-theme.qext
├── theme.json
├── netflix.css (optional)
├── BebasNeue-Regular.ttf (optional)
└── images/ (optional)
    └── background.jpg

Anatomy of the `theme.json` File
(The full theme code is attached at the end of this blog post)

Variables Section (_variables)

Variables allow you to define reusable values (like colors and font sizes) that can be referenced throughout your theme. Variables must be prefixed with `@`.

Example:

"_variables": {
      "@primaryColor": "#E50914",   
      "@backgroundColor": "#141414", 
      "@ObjectBackgroundColor": "#3A3A3A", 
      "@fontColor": "#FFFFFF",     
      "@secondaryColor": "#B81D24",  
      "@fontFamily": "\"Bebas Neue\", Arial, sans-serif",
      "@fontSize": "14px"
    }

Global Properties

These properties set the default styles for your entire app.
- Color: Sets the default font color.
- Font Size: Sets the default font size.
- Font Family: Sets the default font family.
- Background Color: Sets the default background color for visualizations.
Sheet Styling

Customize the appearance of sheets, including the title backgrounds.
Object Styling

Control the styling of various objects (charts, tables, etc.) in your app.
Data Colors

Define how data appears in your visualizations, including primary data color, colors for null values, and colors for different selection states.
Learn more here.

Palettes and Scales

Palettes are arrays of colors used for dimensions (categorical data). You can define custom palettes for data and UI elements.

    "palettes": {
      "data": [
        {
          "name": "Netflix Data Palette",
          "scale": [
            "#E50914", 
            "#B81D24", 
            "#221F1F", 
            "#FFFFFF" 
          ]
        }
      ],
      "ui": [
        {
          "name": "Netflix UI Palette",
          "colors": [
            "#FFFFFF",
            "#B3B3B3", 
            "#333333", 
            "#000000"  
          ]
        }
      ]
    },

Scales are used for measures (numerical data) and can be gradients or classes.

    "scales": [
      {
        "name": "Netflix Red Gradient",
        "type": "gradient",
        "scale": ["#B81D24", "#E50914"]
      },
      {
        "name": "Netflix Grey Gradient",
        "type": "gradient",
        "scale": ["#333333", "#B3B3B3"]
      }
    ],

Custom Fonts and Styles
To achieve the Netflix-style typography, we can use a font similar to Netflix's branding.
For this example, we'll use "Bebas Neue", a free font that's close in style.

Extended Object Styling

You can apply specific styles to individual chart types, overriding global settings.

Example for a Bar Chart:

      "barChart": {
        "label": {
          "value": {
            "color": "@fontColor",
            "fontSize": "12px",
            "fontFamily": "@fontFamily"
          }
        },
        "bar": {
          "fill": "@primaryColor"
        },
        "outOfRange": {
          "color": "#404040"
        }
      },

Tips and Tricks

Creating custom themes can be a rewarding experience, and here are some tips to help you along the way:

1. Use Variables for Consistency

Defining colors, font sizes, and other reusable values as variables ensures consistency across your theme and makes updates easier.

"_variables": {
  "@primaryColor": "#E50914",
  "@fontSize": "14px"
}

2. Leverage Inheritance

The `_inherit` property allows your theme to inherit properties from the default theme, reducing the amount of code you need to write.

{
  "_inherit": true,
  // Your custom properties here
}

3. Test Incrementally

Apply your theme during development and test changes incrementally. This approach helps you catch errors early and see the immediate impact of your changes.

4. Organize Your Theme File

Keep your `theme.json` file organized by grouping related properties. This practice makes it easier to navigate and maintain your theme.

5. Prefix Your Variables and Themes

To avoid conflicts with other themes or variables, use unique prefixes.

"_variables": {
  "@netflix-primaryColor": "#E50914",
}

6. Validate Your JSON Files

Always validate your JSON files to prevent syntax errors. Use online tools like JSONLint.

7. Utilize Custom Fonts Carefully

Don't overuse custom fonts and ensure that any custom fonts you use are properly licensed for use in your application.

8. Use High-Quality Images

If you're incorporating images (like backgrounds or logos), make sure they are high-quality and optimized for web use.

-> Stay up-to-date with the latest on qlik.dev

Applying the Netflix Theme to Your App

Once you've created your custom theme, you can apply it to your Qlik Sense app:

1. Upload the Theme: Upload the zipped folder to the Themes section in your Console.
2. Apply the Theme: In your app, go to the App options menu, select Appearance, and choose your custom theme from the list.

📌 If you are an advanced developer, checkout the following blog posts that tackle theming in an embedded context:

- Theming with Picasso.js
- Qlik Embed (theming section towards the end)

Happy theming!