color theme

janruffner — Mon, 09 Jul 2018 13:39:02 GMT

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" ]

}

]

}

topic color theme in Integration, Extension & APIs

color theme