How many times you got the question from your customer “Can we adapt the app colors, fonts and styles to our Corporate Identiy” ? During my Qliksense projects I went through this question several times. And my answer was always JEIN :-). This means in partly YES (through Extensions, Widget, Dimension Colors, Expressions…) and in partly NOT. The suggested alternative was to go for mashup solution, as there you have quite full control about all the UI elements (.css, .html, .js).

Is there an alternative way?
YES there is! Qliksense provides a hidden capability which allows the customization of the app interface using Themes. Although Qlik Sense themes are not officially documented and I think supported yet, they can be changed.

What are themes?
A theme consists baiscally of a .css and a .json file, where you can override all the standard .css classes and .json layout properties. This means you can change the default colors and fonts of all UI elements (.css classes) and even Chart default properties (.json file).

Where themes are placed?

  • On Qliksense Server themes are found here
    C:\Program Files\Qlik\Sense\Client\themes\old
  • On Qliksense Desktop themes are found here
    C:\Users\<your_user_id>\AppData\Local\Programs\Qlik\Sense\Client\themes\old

How to add a custom theme?
Lets assume we would like to add to our Twitter Analytics App the QlikLab theme.
Following steps should be accomplished:

      1. Navigate to
        • Qliksense Desktop: C:\Users\<your_user_id>\AppData\Local\Programs\Qlik\Sense\Client\themes\old
        • Qliksense Server:    C:\Program Files\Qlik\Sense\Client\themes\old
      2. Create YOUR folder (e.g. qliklab)


      3. Add your cutom .css file, e.g qliklab.css. You can copy the .css file from an existing theme, rename and modify it. If you want to modify a particular section of the app and you do not know the referencing .css class you can open the app in the webbrowser and using the Browser DEV tools to inspect the single html elements and see which .css class was used and modified them on the fly. This is what I did during the customization of the qliklab.css
      4. Add theme.json fileYou can copy the .json file from an existing theme, rename and modify it. Basically what you can change here are the default chart styles and colors. Please if you are using a custom .css file (not the standard theme.css) you have to reference it through the theme.json file. It seems that Qliksense has defined also some specific classes, in this case we are using the qv-card one (to achieve the Facebook Look and Feel).
        "customStyles": [{
        "cssRef": "qliklab.css",
        "classRef": "qv-card"
        }]
      5. Finally when you went through your modifications open http://localhost:4848/hub/my/work/theme/qliklab in the webbrowser and you can see that EVERY app in the hub is using your new defined theme with the new colors and styles!

What about if I would like to apply a theme only to one app?
Yes it is possible! There is way to add the own created custom themes to the Standard App Theme dropdownlist of the App Options shown in the screenshot below and choose the desired one in a single app.

What you basically have to do is to modify the default-themes.json (not sure if this step is needed) and  client.js file and add an additional entry in the array dedciated to themes, referencing the desired theme by using the Value (folder name) as Id .

  1. Code snippet Default-themes-json:
    • Qliksense Desktop: => C:\Users\<your_user_id>\AppData\Local\Programs\Qlik\Sense\Client\themes
    • Qliksense Server      => C:\Program Files\Qlik\Sense\Client\themes
       {
      "_description": "List of themes available in the sense client, specified as a value and label.",
      "default": [{
      "value": "sense",
      "label": "Themes.Qlik.Classic"
      },
      {
      "value": "card",
      "label": "Themes.Qlik.Standard"
      },
      {
      "value": "qliklab",
      "label": "Themes.Qlik.Qliklab"
      }]
      }
  1. Code snippet client.js:
    • Qliksense Desktop: => C:\Users\<your_user_id>\AppData\Local\Programs\Qlik\Sense\Client\assets\client
    • Qliksense Server      => C:\Program Files\Qlik\Sense\Client\assets\client

      x.getAvailableThemes = function() {
      return i.resolve({
      default: [{
      id: "sense",
      name: n.get("Themes.Qlik.Classic")
      },{
      id: "card",
      name: n.get("Themes.Qlik.Standard")
      },{
      id: "qliklab",
      name: n.get("Qliklab")
      }]
      })
      }

Conclusion
I am sure Qlik will add this features in the next Qliksense releases, as it is already available in a hidden way something should be on their product roadmap. The integration with a nice theme wizard/editor in Qliksense would round it all up. I think the need of customizing as much as possible the colors and styles of an app to reflect the Corporate Identity of a company is rather high and will bring also a higher customer statisfaction. So looking forward to see it in the next Qliksense releases!

Note: Please note that the following feature is not official supported and I would not recommend you to apply those changes on a PROD environment.
Update: Qlik confirmed that Themes will be introduced and supported in the next Release Feb2018!

Here the final result: