Skip to main content
Announcements
Introducing Qlik Answers: A plug-and-play, Generative AI powered RAG solution. READ ALL ABOUT IT!
cancel
Showing results for 
Search instead for 
Did you mean: 
hudam
Contributor II
Contributor II

Theme Sheet for Qlik SaaS

Good day,

I had previously developed a theme sheet following the guidance of Qlik documentation. This sheet is working and is used across many apps.  Let us assume too, that in the creation of these apps, colors of objects and such were not designated within the sheet, because the theme sheet was to be used. 

I am currently having issues with KPI label font colors. 

Although multiple apps are using the same theme sheet, some apps are contributing the color from my code in the "object":{} to the kpi, while other apps are designating an unfortunately light yellowish color to the kpi label. This light yellowish color is not found within my theme sheet code. 

I have since attempted to implement code specific to the kpi, "kpi":{},  within my .json file , per Qlik documentation.  But this does not work either.

Below is my .json code :  (note I am bringing in my own font,  if you try to run this for yourself)


{
"_inherit": true,
"_variables": {
"@TitleSize": "16px",
"@SubtitleSize": "15px",
"@TextSize": "12px",
"@FooterSize": "10px",
"@TitleColor": "#0b1f15",
"@SubtitleColor": "#0b1f15",
"@TextColor": "#888888",
"@FooterColor": "#888888",
"@BackgroundColor": "#ffffff",
"@AxisMajorColor": "#eeeeee",
"@AxisMinorColor": "#eeeeee"
},
"customStyles": [
{
"cssRef": "theme.css",
"classRef": "theme-style"
}
],
"color": "@TextColor",
"fontSize": "@TextSize",
"fontFamily": "CabinMed",
"backgroundColor": "@BackgroundColor",
"dataColors": {
"primaryColor": "#527059",
"othersColor": "#84a899",
"errorColor": "#ffcebc",
"nullColor": "#dfd8d2"
},
"object": {
"title": {
"main": {
"color": "@TitleColor",
"fontSize": "@TitleSize"
},
"subTitle": {
"color": "@SubtitleColor",
"fontSize": "@SubtitleSize"
},
"footer": {
"color": "@FooterColor",
"fontSize": "@FooterSize",
"backgroundColor": "#ffffff"
}
},
"label": {
"name": {
"color": "@TextColor",
"fontSize": "@TextSize"
},
"value": {
"color": "@TextColor",
"fontSize": "@TextSize"
}
},
"axis": {
"title": {
"color": "@TextColor",
"fontSize": "@TextSize"
},
"label": {
"name": {
"color": "@TextColor",
"fontSize": "@TextSize"
}
},
"line": {
"major": {
"color": "#eeeeee"
},
"minor": {
"color": "#eeeeee"
}
}
},
"grid": {
"line": {
"highContrast": {
"color": "#eeeeee"
},
"major": {
"color": "#eeeeee"
},
"minor": {
"color": "#eeeeee"
}
}
},
"referenceLine": {
"label": {
"name": {
"color": "@TextColor",
"fontSize": "@TextSize"
}
},
"outOfBounds": {
"color": "@TextColor",
"backgroundColor": "#ffffff",
"fontSize": "@TextSize"
}
},
"legend": {
"title": {
"color": "@TextColor",
"fontSize": "@TextSize"
},
"label": {
"color": "@TextColor",
"fontSize": "@TextSize"
}
}
},
"palettes": {
"data": [
{
"name": "New dimension colors",
"translation": "New dimension colors description",
"propertyValue": "tpb8zz",
"type": "row",
"scale": [
"#527059",
"#706553",
"#b4ab99",
"#dfd8d2",
"#ffcebc"
]
}
],
"ui": [
{
"name": "New color picker color",
"colors": [
"#527059",
"#706553",
"#b4ab99",
"#dfd8d2",
"#ffcebc"
]
}
]
},

"kpi": {
"backgroundColor": "@BackgroundColor",
"title": {
"main": {
"color": "@TitleColor",
"fontSize": "@font-normal",
"fontFamily": "@font-family"
},
"subTitle": {
"color": "@TitleColor",
"fontSize": "@font-normal",
"fontFamily": "@font-family"
},
"footer": {
"color": "@TitleColor",
"fontSize": "@font-normal",
"fontFamily": "@font-family",
"backgroundColor": "@light"
}
},
"label": {
"name": {
"color": "@TitleColor",
"fontFamily": "@font-family"
},
"value": {
"fontFamily": "@font-family"
}
}
},

"scales": [
{
"name": "New measure colors",
"translation": "New measure colors description",
"type": "class",
"propertyValue": "zi4xdb",
"scale": [
"#527059",
"#706553",
"#b4ab99",
"#dfd8d2",
"#ffcebc"
]
}
]
}




I have been through many Qlik community articles on this topic.  I have found suggestions for code to go into the .css file.  I had no luck with those.  

I also have found this Qlik Support Knowledge article , that indicates to me the above implementation of the "kpi":{} section will not even work. 


Is the solution here to control these details on a Qlik sheet level, object by object?   I would prefer to have a scalable solution like getting my theme sheet to work across all aps.   Would there be any other potential causes to my problem?

Labels (2)
1 Solution

Accepted Solutions
hudam
Contributor II
Contributor II
Author

I resolved this using the following syntax in the .css file :

.sn-kpi-value {
color: #black;
}

View solution in original post

1 Reply
hudam
Contributor II
Contributor II
Author

I resolved this using the following syntax in the .css file :

.sn-kpi-value {
color: #black;
}