Day: August 21, 2019

I was recently given a JSON file that contained a theme that a customer wanted updating into their reports.

I already have lots of reports

Here is a small example of what the report looks like

To look at the built in themes click on Switch theme from the home ribbon.

I have been using the default theme for the reports

I have lots of colours already tied into my report.

I have a grey background on all the pages. All my visuals contain white images. Text Boxes and cards contain a dark red background and white text

Labels have white text and a slightly lighter red background. All the visuals have standard clours taken from the theme.

My first thoughts are, what will the new JSON theme change as this is being applied AFTER the reports have been created.

First of all lets have a look at the JSON File

{

        “name”: “New Theme 1”,

        “dataColors”: [“#C4122F”, “#808080”, “#231F20”, “#00B0F0”, “#FF0000”, “#FFC000”, “#92D050”, “#7030A0”],

        “background”:”#FFFFFF”,

        “foreground”: “#3A6108”,

        “tableAccent”: “#568410”

    }

The JSON file is easy to understand. We can see that the dataColors will be the colours of the bar charts (Etc)

Background, foreground and table accents have also been provided.

The foreground relates to textbox text, KPI Goal Text, Multi Row card text, Card values, Gauge call out text, Vertical slicer text, Table and Matrix total and text.

Background relates to button fill and combo chart labels.

I first wanted to look at the colours provided before I attempt to update the style

https://www.color-hex.com/color/000000

Is a great way of checking and creating the colours that you want

The first thing I do is check each data colour to make sure that Im happy with the Colours

Data Colours

Background Foreground & Table Accent

Once I’m happy, its time to change the Theme.  I go back to Power BI Desktop > Switch Theme > Import Theme and choose the new theme.

Before

After

I don’t like the way all my headers have turned black. This needs resolving and I don’t want to have to change everything by hand

Lets revert back to standard and try and work out how best to deal with this issue

Looking at my button I can see which colour I chose from ‘Theme colours’

Switch Theme > Import Theme and choose the new theme.

Its clear from this that the colour is in the same place in the grid. It is the 5th column in the list. This doesnt match the JSON file. If I can move theme 3 (Red) to theme 5 (Grey) this will resolve.

Does the Json File relate to the theme colours at all?

Starting from the Left, this actually does match the Theme grid leaving the White and Black (Columns 1 and 2). Therefore if we move the colours around slightly in the JSON file, We could get the  red in the column 5 instead.

The JSON script is changed to

{

        “name”: “NPg”,

        “dataColors”: [“#C4122F”, “#808080″,”#FF0000”, “#231F20″,”#00B0F0”, “#FFC000”, “#92D050”, “#7030A0”],

        “background”:”#FFFFFF”,

        “foreground”: “#3A6108”,

        “tableAccent”: “#568410”

    }

And thankfully this resolves the issue. Our headers are red instead of black. No need to change everything manually to match the JSON colours.

If you add in a JSON file after you have created your reports, be aware that you need the order of colours to work with the colours that have already been selected.