Qlik Community

App Development

Discussion board where members can learn more about Qlik Sense App Development and Usage.

Announcements
Customer & Partners, DEC. 9, 11 AM ET: Qlik Product & Strategy Roadmap Session: Data Analytics REGISTER NOW
cancel
Showing results for 
Search instead for 
Did you mean: 
beaubellamy
Partner
Partner

Custom color palette

I tried to follow these steps  to create a custom color palette, but it did't pick up any change in colors. The color theme is available in the app options. I'm not sure if i have the correct contents in the json file or just an Qlik version that doesn't support it.

I'm using Qlik Sense 13.9.1 (about a year behind now)

The associated files are below. I have only changed the first 7 colors, everything else should be the same as the files in the examples.

Can anyone help me?

custom-theme.qext

{
	"name": "Custom theme",
	"description": "Custom theme",
	"type": "theme",
	"version": "1.0.0",
	"author": "Qlik"
}

 

theme.json:

{
  "_inherit": true,
  "_variables" : {
    "@greenColor" : "#61a729",
    "@text": "#4c4c4c"
  },
  "color": "@text",
  "fontSize": "12px",
  "object" : {
    "title": {
      "main": {
        "fontSize" : "16px"
      }
    }
  },
  "dataColors": {
    "primaryColor": "@greenColor"
  }
  "palettes" : {
  "data" : [
    {
      "name": "Dark colors",
      "translation": "Dark colors",
      "propertyValue": "12",
      "type": "row",
      "scale": [
        "#F2B999",
		"#FF7841",
		"#920024",
		"#3C0C44",
		"#671D9D",
		"#A3CAB8",
		"#LELELE",
        "#333333",
        "#262626",
        "#1A1A1A",
        "#0D0D0D",
        "#000000"
      ]
    },
    {
      "name": "Light colors",
      "translation": "Light colors",
      "propertyValue": "11",
      "type": "row",
      "scale": [
        "#F2B999",
		"#FF7841",
		"#920024",
		"#3C0C44",
		"#671D9D",
		"#A3CAB8",
		"#LELELE",
        "#B3B3B3",
        "#A6A6A6",
        "#999999",
        "#8C8C8C"
      ]
    }
  ],
  "ui": [
    {
      "name": "Custom theme",
      "colors": [
		"#F2B999",
		"#FF7841",
		"#920024",
		"#3C0C44",
		"#671D9D",
		"#A3CAB8",
		"#LELELE",
        "#808080",
        "#737373",
        "#595959",
        "#474747",
        "#404040",
        "#262626",
        "#0D0D0D",
        "#000000"
      ]
    }
  ]
}
}

 

Labels (2)
1 Solution

Accepted Solutions
plu
Employee
Employee

Hi,

If you use a page to validate JSON, like https://jsonlint.com/, you will notice that the row above palettes you are missing a ",".

"dataColors": {
    "primaryColor": "@greenColor"
  }
  "palettes" : {

should be

"dataColors": {
    "primaryColor": "@greenColor"
  },
  "palettes" : {

 

Try to change that and let me know how it goes. 

Regards,

Patrik. 

View solution in original post

1 Reply
plu
Employee
Employee

Hi,

If you use a page to validate JSON, like https://jsonlint.com/, you will notice that the row above palettes you are missing a ",".

"dataColors": {
    "primaryColor": "@greenColor"
  }
  "palettes" : {

should be

"dataColors": {
    "primaryColor": "@greenColor"
  },
  "palettes" : {

 

Try to change that and let me know how it goes. 

Regards,

Patrik. 

View solution in original post