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

42 Comments
tellmalaika17
New Contributor II

Hi Supritha,

Any luck with changing the font size and font type in css or json.. I am able to create custom theme however want to set a fixed font size and font family ="arial' but didn't work.. Tried everything that is possible it doesn't work.. Can you assist if you could fix this.

0 Likes
287 Views
tellmalaika17
New Contributor II

Hi

Thanks for sharing this information regarding custom themes. Works really well, however I am unable to change the font size and font type in the sheet. I am using the same json and css that you have attached in this ie colorbrewer.  Doesn't work at all.. Qliksense help states that we can change the fonts however I am not sure if that works for the values inside the objects. Any help in this will be highly appreciated.

0 Likes
287 Views
MVP & Luminary
MVP & Luminary

Does anyone know how to un-bold the object headers? I managed to change size and color, but it remains bold no matter what I do. Any clues are highly appreciated!

0 Likes
287 Views
Employee
Employee

Oleg you can target the object headers class via CSS:

.qv-object .qv-object-title { font-weight: 300; }

287 Views
MVP & Luminary
MVP & Luminary

Thank you, I'll give it a try!

0 Likes
287 Views
kenphamvn
Contributor III

Hi

i'm trying to apply Qlik Theme to my application but i found some issue

i want to change text color of Filter Caption and i'm using this code

"filterpane": {

  "title": {

"main": {

      "color": "#002bf9",

      "fontSize": "20px"

    }

}

},

"listBox": {

  "title": {

    "main": {

      "color": "#f69c37",

      "fontSize": "16px"

    }

}

},

and here my result

8-7-2018 4-06-01 PM.png

when Filter in small size (1 block), theme not apply, but when i resize filter to larger,  it's work like a charm

Is there a way of adjusting these settings?

i think the style settings are hidden somewhere that I haven't yet found or it's a limitations of Qlik theme?

i'm Using Qlik Sense June 2018

Regards

An Pham

0 Likes
287 Views
ken4runner
New Contributor III

Hi @ArturoMuñoz thanks for this post, very helpful.  I have a question for you. How do you work backward from the item in the Qlik user interface of the app to determine how that item can be referenced in the css in a custom theme?   For example, A navigation button from the dashboard bundle, how would one determine how to reference this specif item with css in a custom theme? This item is not mentioned in the product documentation about custom themes at all.  thanks - Ken

0 Likes
174 Views
Dair_Junior
New Contributor II

Hi @ArturoMuñoz ! Great post! 😀

I'm developeing a custom theme where I set the background color to black.

But the values of measures are almost invisible, because their color is gray, by default.

I'm realy getting in trouble when trying to change the color of measures values in a bar chart to white, and I don't know what property of json or CSS configuration I need to change.

Can you help me, please?

0 Likes
144 Views
rarpecalibrate
New Contributor II

Hi @Dair_Junior ,

The following example is for a bar chart: 

"axis": {
"title": {
"fontSize": "@ChartTitleSize",
"color": "@ChartTitleColor"
},
"label": {
"name": {
"color": "@LabelColor",/// --- color of the labels on the axis
"fontSize": "@LabelSize"
}
},

Take note of @LableColor. Each chart should have a axis section with label.

0 Likes
137 Views
Dair_Junior
New Contributor II

Hi, @rarpecalibrate ! Tks so much for your prompt answer, but I've already tried to change the property you mentioned and it didn't work.  ☹️

0 Likes
129 Views
rarpecalibrate
New Contributor II

Hi,

That's weird because I changed it to red in my example and it worked. I remember there being an error in the qlik doc, which had the wrong structure for the axis. Make sure it's exactly the same and try it on the bar chart.

0 Likes
122 Views
Bevilaqua
New Contributor

Hi,
I believe many already know but there is a website called Sense Theme  that allows you to do all the configuration you need by viewing the results and downloading the files when you are done.

105 Views