Qlik Community

Qlik Sense Enterprise Documents & Videos

Documents & videos about Qlik Sense.

Announcements
BARC’s The BI Survey 19 makes it official. BI users love Qlik. GET REPORT

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
arulsettu
Honored Contributor III

Hi Chirs,

               My doubt is can  we change the theme sheet wise or app wise. is it possible?

Employee
Employee

There is no built-in configuration to set a theme, neither from the app level nor from the sheet level. Something is on the roadmap for 3.0+. This means, when the user navigates from the Hub via an app icon into an app, you will always end up with the app using the default theme. Only if you hooked into the browser URL and added the "/theme/something" the app theme would change. Once you did this, the theme is "sticky" even when you change sheets (which constructs a different URL but keeps the theme).

Now it is up to you to control the URL either by "deep links" (tell the user to follow a link which has the "/theme/something" already in) or create an extension which has no other purpose than to modify the document.href location to add above mentioned theme key to the url.

vamsi6116
New Contributor III

Where is default theme. I meant instead of users forcing to enter URL can we change so that these gets automatically adjusted like font , color etc ?

I did test creating new theme and appending to url.

0 Likes
Partner
Partner

I just installed Qlik Sense 3.1.1 and I noticed the theme pick list on the document properties screen.

I also see that the themes which are present in the list don't appear to have a one for one match with the themes that are present in the themes directory(C:\Program Files\Qlik\Sense\Client\themes)

So have they moved? Can I create my own themes and add them to the pick list? Can I customize the default themes?

This is a BIG requirement for some of my customers building mashups.

Thanks

Chris

0 Likes
Not applicable

Hi Qlikers!

One doubt, do you know if it is possible to export in pdf with the custom themes applied?

I've successfully created and used a custom theme and it looks pretty good in screen, but when I export it to PDF the colours used are the regular sense theme ones.

Thanks in advance, cheers!

Azucena

fheidenstecker
Contributor II

Hi, have you ever recieved an answer how to bind in custom themes or find out how to do it?

Honestly, I am a bit frustrated about this topic. I don't understand why Qlik makes this so difficult. In my opinion, it is not matching the approach to offer a Data Viz tool, that should be easy to use for everybody, and expecting people to mess around with css files to implement a most basic requirement -> using company colors. I can do that with Excel 1.0 from 1985

Fabian

Partner
Partner

For those on QS >= 3.1.2:the default folder for custom themes has been changed to:

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


On server, if you leave your theme in the main themes folder, it will not  be picked up (I haven't tried yet on desktop).


Edit. Added also the path for the desktop environment

Partner
Partner

Riccardo,

Thanks. I just experience the same issue, glad someone else had the same problem before, so I was able to fix it based on your recommendations.

0 Likes
nevets22
New Contributor III

This is fantastic! Thanks for sharing.

Not applicable

Extension Idea

or create an extension which has no other purpose than to modify the document.href location to add above mentioned theme key to the url.

Interesting! Has anyone tried this?

Some followup questions:

  1. And if you're going to make an extension, couldn't you just either use extension features to inject your CSS? Or, in a worst case, if your extension uses Javascript, have your Javascript fetch CSS and inject it (like, add a <style> tag to the <head>?) This way I don't need to worry about installing a theme, just focus on my extension.
    • By the way, is there a mechanism for "installing" a themebesides manually adding folders to the correct location? (for example, like installing a *.qar by double-clicking it)
  2. Which kind of extension would you use? Like extension, widget, mashup, etc? I assume you'd use "extension"?
    • Is there a way I can add/apply this extension so that it doesn't take up grid space on my canvas? I just want a styling effect, I don't need any actual extension/widget/mashup

Other Folders

This post describes , for >= 3.1.2

  • ".../themes/old/"

But what about these other folders?

  • ".../themes/modern/"


For instance, there is a "card" subfolder inside both of the above,

So if I access a URL with

  • ".../theme/card"

Then I assume it uses the info from old:

  • ".../themes/old/card"

Not the info from modern:

  • ".../themes/modern/card"


And, do other people have this folder, (which is confusing me?)... or maybe I mistakenly added it myself, so I can ignore it:

  • ".../themes/sense/"

It confuses me because there is also:

  • ".../themes/old/sense"

themes.json Schema

I notice tsm‌ (or the "_owner" of the highvis2 theme, Tobias Åström (tsm)) -- modified the theme.json

I compared to highvis2/theme.json to sense/theme.json (the default theme), to try and understand the differences...)

Two questions:

  1. It seems like the JSON offers one way to style something; for example, the fontSize of the axis title, but the CSS offers an alternative way to style the same thing. When to use CSS vs JSON?
    • Actually I tried changing the JSON;
      • changing the value of "fontFamily" from "Qlikview Sans" to be "Arial",
      • and changing the top-level "backgroundColor" to be "#AAA",
    • and even after restarting Qlik Sense, I couldn't see my changes. ..
    • However, I could see changes I made to the CSS, both in terms of seeing the changes, and inspecting the actual background and seeing that it is the theme.css whose .qvt-sheet rule determines a background color of "#333333", (which is not the same as "#FFF" or "#AAA" from the JSON)
    • This makes me rethink my assumption: Maybe the JSON and CSS aren't actually two ways to do the same thing; maybe JSON is meant to do something differently (i.e. control the style of the Qlik Sense editor widgets, while I am actually building my sheets?)
  2. With the CSS approach, I can find the CSS class I need for a specific object, and apply a standard CSS style. With JSON , is there a way for me to know all my available options?
    • (I can infer I have options like "axis", "legend", "gauge", etc etc... but is there a JSON schema which tells me ALL my options; not just those which are in these theme.json's?)

Cached CSS Workaround

As Christof says:

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 ...)

I find that this is another (faster? safer? I don't know) way to "bust the cache" and get the latest style, if you're using Google Chrome and you're inspecting, find your theme's "theme.css" <link>, edit its href="" attribute, and change any arbitrary parameter (i.e. ending with ?t=2 from ?t=3 in my screenshot, below)

bust cache with timestamp param.png

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