Do not input private or sensitive data. View Qlik Privacy & Cookie Policy.
Skip to main content

Announcements
Want to see what's currently in public preview? We've pulled it all together in one place. Check it out here
cancel
Showing results for 
Search instead for 
Did you mean: 
beaubellamy
Partner - Contributor III
Partner - Contributor III

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 (1)
1 Solution

Accepted Solutions
Patrik_Lundblad
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
Patrik_Lundblad
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.