Skip to main content
Announcements
Have questions about Qlik Connect? Join us live on April 10th, at 11 AM ET: SIGN UP NOW
cancel
Showing results for 
Search instead for 
Did you mean: 
callmedaddy
Partner - Contributor II
Partner - Contributor II

Change default label color for KPIs in Qlik Sense custom theme

Hello!

I've been working on customizing a new theme in Qlik Sense. The issues is that my sheet background is black and the object background is pretty dark as well (as my client requested), so that every time I add a new KPI / Text & image chart, the labels [measure -> label in KPI] (being grey by default) is hardly noticeable. I disabled the inherit property in the JSON file, but still have this issue. I've also tried modifying it as follows:

"kpi": {
"label": {
"name": {
"color": "@TextColor",
"fontSize": "@TextSize"
},
"value": {
"color": "@TextColor",
"fontSize": "@TextSize"
}
}

Buts still, no success.

kpi label.png

 

So, is there any way of changing it?

Thanks in advance!

7 Replies
y_grynechko
Creator III
Creator III

Hey, 

did you try to inspect the element and check where it takes color from? 

Capture.PNG

After knowing where it takes color from you can try changing it in the theme css file. 

MDIAZ33
Partner - Contributor
Partner - Contributor

Hello,

Have you found a solution?

I have the same problem, and the only property working is  :

"kpi":{
"backgroundColor": "#b0b1a6"
}

When I try label or value, it's not working :

"kpi":{
"backgroundColor": "#b0b1a6",
"label": {
"color": "@TextColor"
}
}

I'm interesting in any solution.

Thanks à lot

MDIAZ33
Partner - Contributor
Partner - Contributor

I found this on Qlik support this morning https://support.qlik.com/articles/000047121 😓:

"KPI object
The label property is not applicable at all here."

I search on measure property but nothing for now.

 

abe786
Contributor III
Contributor III

I'm trying to get rid of gray color text and change it with black. I have converted most of the colors to black with custom theme, however KPI titles can't be customized using the json file it seems (like mentioned by other posters)

Can you please suggest what should be mentioned in theme.css file.I tried below code

 

.qv-card {

color: black;

}

But its not working. If you can suggest what I am missing here, it will be really helpful.

y_grynechko
Creator III
Creator III

Hey, recently I found extension to use to make this changes:

https://developer.qlik.com/garden/5677d80b7f70718900987bff

I survived 2 qlik sense env updates and I didn't have any issues with this extensions. 

abe786
Contributor III
Contributor III

Thanks for the suggestion, but I need to make this change in many existing dashboards as well, so this won't work out.

Anyway I have discovered the solution using the method you had described earlier. By adding below statement in theme.css file I was able to achieve my goal. 


.qv-object-kpi .measure-title.ellips-text {

color: black;
}

This is working in QS April 2018 release.

caiogil1
Contributor III
Contributor III

I am working in QS May 2021 and this was possible changing the label color (to white) in theme.json ( Reference link ).

But I still had a problem because this don't change the color label in the second measure of KPI object like bellow:

caiogil1_0-1628693744369.png

 

This was only possible adding in theme.css one of the solutions bellow. Note that it can change depending on which version of QS you are using. 

/* Version: QS May 2021 */
.sn-kpi-title.sn-kpi-ellips-text {
color: white !important;
}

/*---------*/

/* Version: QS Feb 2020 */
.kpi-title.ellips-text {
color: white !important;
}

 

Result after this using the statement appropriate to each version:

caiogil1_2-1628694648253.png

 

 

I hope to learn a lot here and help if I can