Unlock a world of possibilities! Login now and discover the exclusive benefits awaiting you.
Hello everyone.
I have a question regarding the color themes in qlik. I want to upload a new color theme. I have created now two files, namely a qext file and json file. And then have created a zip file out of the two and then imported them.
In general this works fine and the colors of my files change. Unfortunately the background is always grey. I want to have a white background. How can I change the background from grey to white?
Thanks a lot for your help.
qext file:
{ "name": "theme_basic",
"description": "red and blue color changed",
"type":"theme",
"version": "1.0.0",
"author": "jru" }
json file:
{
"_inherit": false,
"_variables" : {
"@default": "#555555",
"@dark": "#333333",
"@light": "#eeeeee",
"@H1": "24px",
"@H2": "18px",
"@H3": "14px",
"@H4": "13px",
"@H5": "12px",
"@font-normal": "12px"
},
"customStyles": [
{
"cssRef": "theme.css",
"classRef": "my-theme"
}
],
"color": "@default",
"fontSize": "@normal",
"backgroundColor": "@light",
"dataColors": {
"primaryColor": "blue",
"othersColor": "grey",
"errorColor": "red",
"nullColor": "yellow"
},
"object": {
"title": {
"main": {
"color": "@default",
"fontSize": "@font-normal"
},
"subTitle": {
"color": "@default",
"fontSize": "@font-normal"
},
"footer": {
"color": "@default",
"fontSize": "@font-normal",
"backgroundColor": "@light"
}
},
"label": {
"name": {
"color": "@default",
"fontSize": "10px"
},
"value": {
"color": "@default",
"fontSize": "10px"
}
},
"axis": {
"title": {
"fontSize": "@font-normal",
"color": "@default"
},
"label": {
"name": {
"color": "@default",
"fontSize": "@font-normal"
}
},
"line": {
"major": {
"color": "@default"
},
"minor": {
"color": "@default"
}
}
},
"grid": {
"line": {
"highContrast": {
"color": "@default"
},
"major": {
"color": "@default"
},
"minor": {
"color": "@default"
}
}
},
"referenceLine": {
"label": {
"name": {
"color": "@default",
"fontSize": "@font-normal"
}
},
"outOfBounds": {
"color": "@default",
"backgroundColor": "@default",
"fontSize": "@H6"
}
},
"legend": {
"title": {
"fontSize": "@font-normal",
"color": "@default"
},
"label": {
"fontSize": "@font-normal",
"color": "@default"
}
},
"barChart": {
"outOfRange": {
"color": "@default"
}
},
"boxPlot": {
"box": {
"whisker": {
"stroke": "@default"
},
"line": {
"stroke": "@default"
},
"box": {
"fill": "@default",
"stroke": "@default"
}
}
},
"distributionPlot": {
"box": {
"fill": "@default"
}
},
"filterpane": {
"title": {
"main": {
"color": "@default",
"fontSize": "@font-normal"
}
}
},
"kpi": {
"title": {
"main": {
"color": "@default",
"fontSize": "@font-normal"
}
}
},
"gauge": {
"label": {
"value": {
"color": "@default",
"fontSize": "@font-normal"
}
}
},
"histogram": {
"label": {
"value": {
"color": "@default",
"fontSize": "40px"
}
}
},
"lineChart": {
"outOfRange": {
"color": "@default"
},
"label": {
"value": {
"color": "@dark",
"fontSize": "@font-normal"
}
}
},
"listBox": {
"title": {
"main": {
"color": "@default",
"fontSize": "@font-normal"
}
},
"content": {
"color": "@default",
"fontSize": "@font-normal"
}
},
"mapChart": {
"backgroundColor": "cyan",
"label": {
"value": {
"color": "@default",
"fontSize": "@font-normal"
}
},
"legend": {
"title": {
"color": "@default"
},
"label": {
"color": "@default"
}
}
},
"pieChart": {
"axis": {
"title": {
"fontSize": "@font-normal"
}
},
"label": {
"name": {
"color": "@default",
"fontSize": "@font-normal"
},
"value": {
"color": "@default",
"fontSize": "@font-normal"
}
}
},
"pivotTable": {
"header" : {
"fontSize" : "@font-normal",
"color": "@default"
},
"content": {
"fontSize": "@font-normal",
"color": "@default"
}
},
"scatterPlot": {
"label": {
"value": {
"color": "@default",
"fontSize": "@font-normal"
}
}
},
"straightTable" : {
"header" : {
"fontSize" : "@font-normal",
"color": "@default"
},
"content": {
"fontSize": "@font-normal",
"color": "@default"
}
},
"treemap": {
"branch": {
"backgroundColor": "@default",
"label": {
"color": "@light",
"fontSize": "@font-normal"
}
},
"leaf": {
"label": {
"fontSize": "@font-normal"
}
}
},
"waterfallChart": {
"label": {
"value": {
"fontSize": "20px"
}
},
"value": {
"color": {
"default": "@default",
"dark": "@dark",
"light": "@light"
}
},
"shape": {
"positiveValue": {
"fill": "#FFFFFF"
},
"negativeValue": {
"fill": "#FF00FF"
},
"subtotal": {
"fill": "#008000"
},
"bridge": {
"stroke": "#0000FF"
}
}
}
},
"palettes": {
"data": [
{
"name": "First data palette",
"translation": "12 colors",
"propertyValue": "data-palette-1",
"type": "pyramid",
"scale": [
[ "#cc6677" ],
[ "#4477aa", "#cc6677" ],
[ "#4477aa", "#ddcc77", "#cc6677" ],
[ "#4477aa", "#117733", "#ddcc77", "#cc6677" ],
[ "#332288", "#88ccee", "#117733", "#ddcc77", "#cc6677" ],
[ "#332288", "#88ccee", "#117733", "#ddcc77", "#cc6677", "#aa4499" ],
[ "#332288", "#44aa99", "#88ccee", "#117733", "#ddcc77", "#cc6677", "#aa4499" ],
[ "#332288", "#44aa99", "#88ccee", "#117733", "#999933", "#ddcc77", "#cc6677", "#aa4499" ],
[ "#332288", "#44aa99", "#88ccee", "#117733", "#999933", "#ddcc77", "#cc6677", "#882255", "#aa4499" ],
[ "#332288", "#44aa99", "#88ccee", "#117733", "#999933", "#ddcc77", "#661100", "#cc6677", "#882255", "#aa4499" ],
[ "#332288", "#6699cc", "#44aa99", "#88ccee", "#117733", "#999933", "#ddcc77", "#661100", "#cc6677", "#882255", "#aa4499" ],
[ "#332288", "#6699cc", "#88ccee", "#44aa99", "#117733", "#999933", "#ddcc77", "#661100", "#cc6677", "#aa4466", "#882255", "#aa4499" ]
]
},
{
"name": "Second data palette",
"translation": "4 Colors",
"propertyValue": "data-palette-2",
"type": "row",
"scale": [
"#ff00ff",
"#00ff00",
"#0000ff",
"#000000"
]
}
],
"ui": [
{
"name": "Palette",
"colors": [
"#cccccc",
"#aaaaaa",
"#111111",
"#999999",
"#acacac",
"#dddddd",
"#eeeeee",
"#ffffff",
"#000000"
]
}
]
},
"scales": [
{
"name": "Custom Sequential Gradient",
"translation": "Custom Sequential Gradient",
"propertyValue": "sg",
"type": "gradient",
"scale": [ "#a11c36", "#C4B300" ]
},
{
"name": "Custom Sequential Classes",
"translation": "Custom Sequential Classes",
"propertyValue": "sc",
"type": "class",
"scale": [ "#a11c36", "#C4B300" ]
},
{
"name": "Custom Diverging gradient",
"translation": "Custom Diverging gradient",
"propertyValue": "dg",
"type": "gradient",
"scale": [ "#a11c36", "#FFFFFF", "#26D0CE", "#C4B300" ]
},
{
"name": "Custom Diverging Classes",
"translation": "Custom Diverging Classes",
"propertyValue": "dc",
"type": "class",
"scale": [ "#a11c36", "#EF0107", "#DB0007", "#FFFFFF", "#C4B300" ]
}
]
}