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”],
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
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
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.
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
“dataColors”: [“#C4122F”, “#808080″,”#FF0000”, “#231F20″,”#00B0F0”, “#FFC000”, “#92D050”, “#7030A0”],
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.