Qlik Community

Qlik Sense Documents & Videos

Documents & videos about Qlik Sense.

Announcements
Qlik Analytics Tour 2020 Online. Begins August 10th. Register Today

More Qlik Sense Themes (updated with 3.2)

Employee
Employee

More Qlik Sense Themes (updated with 3.2)

I uploaded a new version "highvis32.zip" compatible for Sense 3.2


Although Qlik Sense themes are not officially documented yet, they can be changed. A theme consists of one or two .css files and a .json file.


On Sense Server themes are found here

  • C:\Program Files\Qlik\Sense\Client\themes

On Sense Dekstop (>= 2.2 and <=3.1) themes are found here

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

Earlier versions of Sense Desktop (<2.2) didn't expose the theme files under \AppData\..., they were a hardcoded reply from QlikSenseBrowser.exe.

On Sense >= 3.1.2 and >=3.2 the themes folders are

  • server environment: C:\Program Files\Qlik\Sense\Client\themes\old
  • desktop environment: C:\Users\<your_user_id>\AppData\Local\Programs\Qlik\Sense\Client\themes\old


Hint: Hit [Windows]+ keys and paste this to open the folder: %USERPROFILE%\AppData\Local\Programs\Qlik\Sense\Client\themes


HighVis Theme (as an example)

Screenshot 2015-11-07 10.09.07.png

The highvis theme is not perfect, there are chart types and sub-pages (like the filters and search) which will not look very nice. See this as a starting point and use Browser inspection to understand where different styling information is coming from. Then make your own enhancements to the .css. For example filter panes with their green/white/grey shading dont fit well to a dark theme.

Download the attached highvis2.zip file (for Sense versions 2.2 - 3.x) and put it in the appropriate folder (either the one for Server or for Desktop).

  • Keep the subfolder structure (the 2 files within the "highvis2" folder).
  • The subfolder name matches the theme name, under which you later call it via the URL

Screenshot 2016-08-19 15.44.40.png


How to call a theme (other than the default)

Go to the hub and add add "/theme/highvis2" to the url. This means, any app you will open will use that theme from now on. Note that the parameters "/theme/highvis2" are sticky to any page you navigate to.

Example:

http://localhost:4848/hub/theme/highvis2

http://localhost:4848/sense/app/Helpdesk%20Management.qvf/sheet/1ff88551-9c4d-41e0-b790-37f4c11d3df8...

Qlik Sense Desktop users: There is no way to choose a custom theme in Qlik Sense Dekstop (since the URL is not editible). The only ones Switch to the browser instead.

How to change the default theme (not recommended)

The default themes are found in the same folders as above in the subfolder "sense". If you modify those all the standard colors/fonts graph width may be changed or even messed up. In the newer versions, where there is another folder structure with "old" and "modern" on the folder level of "themes", the default setting can only be changed by modifying both "themes\modern\sense" and "themes\old\sense" 

However, themes are cached from both sides the (browser) clients and even from the Sense webserver, so you will never see the change instantly, may have to restart QS Desktop or QS Server.

A trick to test changes instantly is to rename the theme subfolder all times after a change ... like "highvis2" "highvis3" "highvis4" ... and call it from an app making the same change in the url ( .... /theme/highvis3 ...)

Attachments
Comments
Partner
Partner

Regarding the modern folder, I suppose that it will be used in future releases (3.2 and above?) to manage new themes.

To make it clearer: I've seen that the theme.json structure of themes created for QS < 3.0 is quite different, so maybe in the old folder we will be able to use old themes or themes created for generally speaking older versions of QS (basically a legacy mode), while in the modern we will put the new ones (created by Qlik or from us, with the latest template).

Unluckily I have no idea about what the card and sense are used for at the moment...

Thanks for the workaround, nice one!

Employee
Employee

Hey everyone,

Although themes are not yet a officially supported part of sense, we do have improvements in the works as you might have guessed from the "old" folder renaming. I can possibly shed some light on a few questions you've had here. Note that nothing is set in stone until released, and no time frame is given.

- "modern" folder: future releases with a new json structure. Old themes will stop working at some point.

- json vs css: Json is currently used to manipulate non-css things, such as chart colors which are drawn using canvas. Css has been used for a few additional things outside of this, such as sheet backgrounds. We aim to make it work with only json, so that managing css selectors won't be necessary.

Partner
Partner

Many thanks Tobias, this is really useful to know

Not applicable

Hi, Tobias.

Is this method still valid?

I got this to work a short while ago, but now I can't get it to work.

I'm not sure if the server was upgraded, from 3.1SR3 to SR4, before or after my previous test.

0 Likes
Employee
Employee

It is still valid (but unsupported).

Note the switch of folders. The currently used themes resides in "themes/old".

Not applicable
We aim to make it work with only json, so that managing css selectors won't be necessary.


Thanks for your explanation. I did have an intuition about why JSON and CSS; why they are separate. I think it's a good idea.

For example, since my own extension may want to use d3 to apply some kind of color palette, my extension can GET theme.json and check its values and use those!I couldn't ask the CSS for that palette, and since my data may programatically manipulate colors (lighten, darken), it's more dynamic to use JS, rather than to enumerate all the rules in CSS.


I still think CSS has its place, so I hope "managing css selectors won't be necessary" doesn't mean you will stop including CSS! Maybe I can be convinced it's unnecessary...  or I have another means of injecting CSS.


For example, I can easily modify background images for the entire sheet with CSS. It seems unnecessary to have an extension or mashup do this; it seems like the perfect job for a theme.

Employee
Employee

We will continue to inject a css file from each theme. We just don't want that to be a necessity to adjust most settings. Currently we use the css to get the "cards" look in sense-modern theme. It adjusts things like paddings and add borders, which currently would be troublesome in json (as we need to translate in to css anyway).

Long term plan is of course a theme editor or similar, so that most attributes can be changed without knowing css OR json. And for extension builders etc, we want to leave as much open as possible for you to re-use and adapt.

Partner
Partner

Hello

Do  themes work with the newest Qlik Sense version 3.2?

For me it does not unfortunately work after the update to 3.2.

theme.JPGtheme2.jpg

Could anybody help me to solve this ussue?

Thank you in advance.

0 Likes
Not applicable

Install themes here:

C:\Users\ignasdukynas\AppData\Local\Programs\Qlik\Sense\Client\themes\old

See "...\themes\old" vs "...\themes"

0 Likes
Partner
Partner

Hello Nathaniel

Then I put files to the old folder I get exactly the same rezults.

Any other reasons?

Version history
Revision #:
1 of 1
Last update:
‎2015-11-07 04:13 AM
Updated by: