Qlik Community

Qlik Design Blog

All about product and Qlik solutions: scripting, data modeling, visual design, extensions, best practices, etc.

Employee
Employee

How to create a custom theme in Qlik Sense

Custom Themes is one of the new features shipped with February release so make sure you are updated before trying to come up with your own.

To create a new theme, first we need to understand what exactly is a theme and what it can do for us. A custom theme is a collection of files stored in a folder, it must contain a definition (QEXT) file, a main JSON file, and optionally any other assets you might need to support the custom theme such as CSS files, custom font files, images, etc.

Custom themes let users to quickly apply different levels of customization to their apps, some of you might be interested in having your custom color palletes, while someone else might just need bigger font size, both can be achieved with Custom Themes. Theme authors can target individual visualization objects via JSON and/or use a custom CSS to modify the sheet styles.

From Qlik Help

The custom styles can be defined in two ways:

  • In the JSON file you define the style for the individual visualization types, for example bar charts and line charts.
  • CSS styling is more general and flexible. You can, for example, style sheets, visualizations and extensions.

Creating a simple custom theme

I'll be using Qlik Sense Desktop for this example, please check the help page for instructions on how to install a Custom Theme in Qlik Sense Server.

  • Go to your extensions folder: C:\Users\[username]\Documents\Qlik\Sense\Extensions
  • Create a new folder, I'll call mine theme-helloworld
  • Create a new file and rename it to theme-helloworld.qext. The QEXT file is a definition file that contains a few lines, where only name and type are the only mandatory lines.

{

  "name": "Hello World theme",

  "description": "My first custom theme",

  "type": "theme",

  "version": "1.0.0",

  "author": "Arturo Muñoz"

}

  • Now, it's time for the JSON file. Create a new file, name it theme.json
  • Edit the theme.json file with your favorite text/code editor
  • My advice is to start your theme with the sample code you can find in Qlik Help so you can familiarize with JSON and it's properties:

{

  "_inherit": true,

  "_variables" : {

    "@greenColor" : "#61a729",

    "@text": "#4c4c4c"

  },

  "color": "@text",

  "fontSize": "12px",

  "object" : {

    "title": {

      "main": {

      "fontSize" : "16px"

      }

    }

  },

  "dataColors": {

    "primaryColor": "@greenColor"

  }

}

  • The JSON file will change the primary color of your charts from Qlik dark blue to the custom green as defined in the variable at line 4 and will also modify the charts title to a font size of 16 pixels.

    This is a simple example but there are much more you can do with the JSON file, you could for example, define new color schemes for measures, change the axis', labels, legends font size and color and much more.

    Actually you could even load your custom CSS through the JSON file so you can target and hack any predefined style within your app, so you could modify object paddings, change font family, and so forth.

If you've followed the steps above you should have something like:

Custom-Themes.png

How to activate a Custom Theme?

Check how to apply a Custom Theme to your app in the animation below

CT.gif

Tips from the expert... and theme sharing!

I've asked my colleague Nabeel Asif for some tips since he created the Custom Theme based on Color Brewer that we are sharing  today (check the attachements). This is what he said:

All of our standard themes just give one sequential and one diverging gradient for measures, and two color schemes for dimensions. But you can actually define as many options as you like through the “scale” and “palettes” properties in the theme’s JSON.

For sequential and diverging gradients, Qlik uses seven colors to define a scheme. But you don’t actually need to specify all seven colors. Just define the two colors at the extremes, and Qlik does a nice job of calculating the rest. Of course, if you want very specific colors you can define them yourself.

Often apps will be designed with red representing something bad or dark colors representing higher values. To maintain this look as the user switches themes, you should follow these conventions in the JSON:

  • Diverging scales should be ordered from reddish hues to bluish hues.
  • Sequential scales should be ordered from dark to light. 

Please don't forget to always check Qlik Help for the most recent specifications.

Enjoy

36 Comments
kkkumar82
Valued Contributor III

Hi Arturo,

I think the heading "How to activate themes?" missed what it has to say .

One question regarding the 16px things, How it is taken for charts font size, or will take for all the sheet objects like Text objects etc, as it is mentioned under the "Object" property.

New to Json , excuse me if my question is silly.

406 Views
Employee
Employee

Hi Kiran,

Thanks for the heads up, I hope is more clear now.

Regarding the example, that JSON section will change all object font-size, it can be overwritten with specific settings if you apply object styling to a chart type in the JSON file. Check this out: https://help.qlik.com/en-US/sense-developer/February2018/Subsystems/Extensions/Content/CustomThemes/...

0 Likes
406 Views
Employee
Employee

QlikDork (aka drr ) did a quick video of this enhancement and how to kick it up a notch by "Doing the Dew": (view full screen:  https://youtu.be/NTEVKXmLxvg )

406 Views
dineshsingh
New Contributor III

Hi,

This is one of the most awaited features in Qlik Sense. How can we apply custom created theme in mashups & single configurator?

Regards

Dinesh

0 Likes
406 Views
dineshsingh
New Contributor III

Got an option for single configurator but not sure about mashups..

SingCongTheme.png

0 Likes
406 Views
erik_wetterberg
Valued Contributor III

Hi,

You need to apply your theme with the new theme.apply method.  Though in a mashup you can always load your own CSS styling, use your own HTML structure etc. What's new in mashups with themes is mainly the possibility to style canvas-based visualizations.

Erik Wetterberg

Extending Qlik – Use Qlik in your own apps and sites

406 Views
jordigonz
Contributor

Hi,

Didn't work for me. I followed the steps but when I tried to change it in the app nothing happens.

Any idea?

My version of Qlik Sense is February 2018 (qliksensedesktop 12.5.2)

0 Likes
406 Views
dineshsingh
New Contributor III

Thanks, Worked for me. :-)

406 Views
dineshsingh
New Contributor III

Dear Jordi,

Please add the below code in you JS file with correct theme name.

qlik.theme.apply('my-theme-id').then(function(result){ alert('theme applied with result: ' + result); });


Also, please have a look at this post as well.  Chaning Qlik Sense Mashup's theme?



Thanks

Dinesh

0 Likes
406 Views
supritha_collie
New Contributor II

.qv-client.qv-dense #sheet-title.sheet-grid {

font-size: 30px; /* Default: 22px */

color: #737373; /* Default: #b0afae */

/* font-weight: bold; */

}

I have above script which changes the font size of the Title of the chart but need another set of script to change the font size of the text within the chart.Any help is appreciated.

Thank you.

0 Likes
406 Views
dineshsingh
New Contributor III

Hi Supritha,

I haven't used CSS theme yet but achieved the same requirement using the JSON method (https://help.qlik.com/en-US/sense-developer/February2018/Subsystems/Extensions/Content/CustomThemes/...) provided in custom themes (https://help.qlik.com/en-US/sense-developer/February2018/Subsystems/Extensions/Content/custom-themes...).

A snippet of the code to control label values/data is here:

"label": {

  "name": {

"color": "#ffffff"

  },

  "value": {

"color": "#ffffff"

  }

}

I hope this helps.

Thanks

Dinesh

0 Likes
406 Views
supritha_collie
New Contributor II

Thanks dinesh.Do you have a JSON  file which you can share ?

I have below script as is in my JSON file and nothing works...can you please assist ?

"label": {

"name": {

  "color": "#ffffff",

   "fontSize": "20px" },

    "value": {

     "color": "#ffffff",

      "fontSize": "20px" } }

0 Likes
406 Views
dineshsingh
New Contributor III

Hi Supritha,

Sorry, I didn't try before sharing the code with you as I was expecting it to work but for some reason it's not working for me as well. Please try the below.

filename: theme.json

Sample.jpg

Thanks,

Dinesh

0 Likes
406 Views
supritha_collie
New Contributor II

Thank you for your time dinesh...didnt work this time too..below is my folder structure and I have the below script as is in theme.JSON file....and then I picked Custom theme in App overview...not sure what am I missing here...thank you for your time and help...highly appreciated

Custom.JPG

theme.JSON file script as is below:

"_inherit": true, 

  "fontSize": "20px",

   "object":{

    "label": {

     "name":  {

      "Color" : "#61a729", 

       "fontSize": "20px" 

},

   "vale":{

    "Color" : "#61a729", 

     "fontSize": "20px"

}

},

"barChart":{

"label":   {

  "name":    {

   "color": "#61a729",

    "fontSize": "20px"

},

    "value": {

     "color": "#61a729",

      "fontSize": "20px"

}

   }

  }

}

}

App Overview:

Custom2.JPG

0 Likes
406 Views
zuruprem2
New Contributor II

Hi Supritha,

Same issue happened to me. Kindly advise if you have any solution.

0 Likes
406 Views
dineshsingh
New Contributor III

Hi Supritha,

Please share your theme in a zip file so that I can have a look at the same.

Regards

Dinesh

0 Likes
406 Views
barryharmsen
Contributor II

A bit late to the party, but we've built a visual, online editor for Qlik Sense Themes. Check it out here: SenseTheme

Looking forward to hearing your feedback, and if you've built a cool theme we'll gladly include it in the gallery

406 Views
apthansh
New Contributor III

This is really amazing !!  Great Work !!

0 Likes
406 Views
kkkumar82
Valued Contributor III

All,

Can we change have different colors for different sheets, I was just checking a extension from "SenseThemes", in that the css file contains the sheet background color, just want to know is this possible to change background color for each sheet.

0 Likes
406 Views
erik_wetterberg
Valued Contributor III

Sorry, that's not covered by the current version.

Erik Wetterberg

0 Likes
406 Views
kkkumar82
Valued Contributor III

Thanks Erik for the quick update, one last think can we customize two charts of same time with different parameters like font size color etc

0 Likes
406 Views
kkkumar82
Valued Contributor III

It's same type not same time

0 Likes
406 Views
jordigonz
Contributor

Wow!!! Just, awesome.

Good work! Thank's and congrats

0 Likes
406 Views
erik_wetterberg
Valued Contributor III

For the JSON parameters that's not possible. For CSS styling it might be possible, but tricky. But that's really not what themes are for, if you want different settings for different bar charts etc that's properties.

Erik Wetterberg

0 Likes
406 Views
edrichbotha
New Contributor

Hi


Anyone still struggling with JSON file?

I get the option in qliksense to select my theme but its not working.

  "_inherit": true, 

  "_variables" : { 

    "@greenColor" : "#61a729", 

    "@text": "#4c4c4c" 

  }, 

  "color": "@text", 

  "fontSize": "12px", 

  "object" : { 

    "title": { 

      "main": { 

      "fontSize" : "16px" 

      } 

    } 

  }, 

  "dataColors": { 

    "primaryColor": "@greenColor" 

  } 

}

0 Likes
406 Views
litalrok7
New Contributor III

Hi,

Thanks for this it was very helpful.

I imported my theme to Qlik Sense and i need to make some changes.

Where can i find the themes files on the Qlik Sense server version?

I didn't find it in the dev-hub\extensions folder.

0 Likes
406 Views
MVP
MVP

Hi Lital!

Long time no talk... Read through the help articles about the custom themes, they describe the process and the locations for all the components. The explanations are so good that even a web development dummy like myself could use them:

https://help.qlik.com/en-US/sense-developer/February2018/Subsystems/Extensions/Content/custom-themes...

cheers,

Oleg Troyansky

406 Views
litalrok7
New Contributor III

Hi Oleg,

Thanks for your reply. It was very helpful!

406 Views
qvbitech
New Contributor II

Hi,

Is it possible to apply the specific theme for the specific user on the published app?

Br,

0 Likes
406 Views
dverbeke
Contributor III

If you have a mashup there is a function to apply a theme. You can have it linked to a userid.

0 Likes
406 Views