Skip to main content
Announcements
Qlik Connect 2024! Seize endless possibilities! LEARN MORE
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