Themes in Qlik Sense 3 and the use in extensions

[Yianni_Ververis]

Qlik Sense is headed to a more flexible and customizable environment regarding the interface. With Qlik Sense 3 and above, we can manually change the default Theme or create a custom one and use it on our apps by just adding /theme/<themename> at the end of the url.

First of all, for those that do not know, once Qlik Sense desktop is running, we can access the hub from a regular browser like http://localhost:4848/hub/my/work. Now if we add our theme at the end of the url, every app that we open, will use that theme. So, if we go to http://localhost:4848/hub/my/work/theme/yianni, this will open the hub. Every app like the "helpdesk Management" that is opened, will use that theme.

I have created a simple theme and I only changed the background color of the sheet container and it looks like this

In Qlik Sense 3.1.2 and above, the theme templates have been moved to C:\Users\<username>\AppData\Local\Programs\Qlik\Sense\Client\themes\old. So we can place our files there.

Some of us, including myself, have used the Theme.palette in our extensions like

define([

     "qlik",

     "jquery",

     "core.utils/theme"

], function (qlik, $, Theme) {

The above would have to change to

define([

     "qlik",

     "jquery",

     "text!themes/old/sense/theme.json"

], function (qlik, $, Theme) {

     Theme = JSON.parse(Theme);

yianni.zip

[anderseriksson]

When do we get control on expression level built into Sense?

Changing the theme is good for overall looks but when doing a graph one might need detailed control per expression like we have in QlikView.

Now we are forced putting the expressions in certain order to get the colour that looks best for the circumstances.

With only one expression one can choose colour but only from a selected few alternatives?

With more expressions in same graph we have a limited choice either to select a set scheme same for the
whole application (even hub) or colour by expression which might not be possible to achieve desired colours.

Have seen those examples when people add dimensions for the x-axis purely to be able to colour by expression.
Is this really progressions? Forcing people to invent ways around the product.
Locking the palette might look good from a consistency aspect but when customers have specific colour preferences it is a pain.
Telling them we have a very modern looking, screen size adaptable program but we don’t have control over the colours, come on!?!

[fheidenstecker]

True Words!
Nothing to add to this post.

[fheidenstecker]

Is there any chance to include custom themes in the Standard dialog?

I tried to add my theme in the default-themes.json, but no luck 😞

[rzenere_avvale]

Hi fheidenstecker,

you can, but with what I consider a temporary workaround.

Currently the themes loaded in the dialog are hardcoded (so you can't simply add new themes modifying the default-themes.json).

In order to show more themes in the dialog, you have to modify the client.js (default position for the Server environment: C:\Program Files\Qlik\Sense\Client\assets\client\) to include your theme (once added to the default-themes.json).

Specifically, you have to modify this piece:

t.getAvailableThemes=function(){

     return d.resolve(

          [

               {value:"sense",label:c.get("Themes.Qlik.Classic")},

               {value:"card",label:c.get("Themes.Qlik.Standard")}

          ]

     )

}

Anyway, I think that this will be modified with the next releases (after all it's a quite recent feature, they're most likely still working on it)

[fheidenstecker]

Thanks Riccardo,

yeah i know this propably isn't upgrade save, but when It comes to theming, i am grateful for every straw i can grasp 🙂

Thanks,

Fabian

[#7]

Why is mine located in C:\Users\{me}\AppData\...,

But yours is located in C:\Program Files\... ?

Specifically mine is here:

C:\Users\nathanielanderson\AppData\Local\Programs\Qlik\Sense\Client\assets\client\client.js

[#8]

Oh, maybe as OP said, the change happened as of Qlik Sense 3.1.2?

In Qlik Sense 3.1.2 and above, the theme templates have been moved to C:\Users\<username>\AppData\Local\Programs\Qlik\Sense\Client\themes\old. So we can place our files there.

[rzenere_avvale]

Hi Nathaniel,

sorry for the misunderstanding but nope, the difference is way easier

The path that points to C:/Program Files/... is the one for the server environment, while the other one (C:/User/...) is the one for the desktop environment

In case you need them, in this post you can find all the paths for the themes folders of basically all the versions (the client.js is just a couple of folders "away"): More Qlik Sense Themes (updated with 3.1.2)

[#10]

What is "Theme.palette"?

Some of us, including myself, have used the Theme.palette in our extensions like

It sounds like a file extension, because of the ".", but I cannot find any such file...

I am now guessing that "theme palette" refers to the concept of a dropdown to choose a theme?

No, I think I'm wrong there...

When I look inside

C:\Users\nathanielanderson\AppData\Local\Programs\Qlik\Sense\Client\themes\old\sense\theme.json

I see this (snippet)

{

    "_themeName": "Qlik Sense Default",

    "_variables": {

        "B20": "#333333",

        "B35": "#595959",

        "B60": "#999999",

        "B80": "#cccccc",

        "B90": "#E6E6E6",

        "B100": "#ffffff",

        "titleColor": "@B20",

        "disabledColor": "@B60",

        "lockedColor": "#6abbdd",

        "labelHighContrast": "@B35",

        "labelLowContrast": "@B90",

        "lineMajor": "@B80",

        "lineMinor": "@B90",

        "lineHighContrast": "@B60"

    },

    "backgroundColor": "#fff",

    "fontFamily": "QlikView Sans",

    "fontSize": "13px",

    "fontWeight": "normal",

    "color": "@labelHighContrast",

    "axis": {

        "title": {

            "fontSize": {

                "default": "12px",

                "xsmall": "12px",

And now I think I understand what you mean by "palette" -- all the _variables defined in there.

What tool can do the "@" variable replacement (almost like $(...)) ?

• For instance, if I write "@labelHighContrast",
• what tool can look at the value of labelHighContrast, which is "@B35",
• so it looks for the value of B35, and finds "#595959"?
  

Is there some Javascript which does that? Some function? Something else?

I also see you've added this:

"text!themes/old/sense/theme.json"

• I think "text!" prefix must tell require.js that the file is not Javascript, it shouldn't try to be interpereted/executed as Javascript which returns a function, it's just plain JSON string...
• Therefore you must provide its actual "*.json" file extension (if it were Javascript file, it could be omitted)
• And finally you must JSON.parse it into a useful Javascript object...
  

Theme = JSON.parse(Theme); 

Thanks for the post!

[#11]

Awesome! Yes the difference between them is a Desktop vs Server issue, not a question of Qlik Sense version:

• Desktop (C:\Users\...)
• Server (C:\Program Files\...)

This also says that:

http://stackoverflow.com/a/39910704/1175496

According to your link, there is a difference caused by which Qlik Sense version of Desktop you use...

That difference is just whether to look inside the "old" folder!

• C:\Users\<your_user_id>\AppData\Local\Programs\Qlik\Sense\Client\themes
• C:\Users\<your_user_id>\AppData\Local\Programs\Qlik\Sense\Client\themes\old

Thanks!