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

Announcements
We are aware of an issue with the Product Downloads page and looking into it.
cancel
Showing results for 
Search instead for 
Did you mean: 
janruffner
Contributor
Contributor

color theme

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

    }

  ]

}

0 Replies