In Part 1 of this series, you learned how to use some of Power BI’s built-in themes to change the color themes of your reports. This of course was better than having to manually customize all the elements in your visualizations, but you were limited in the number of themes available.
In Part 2 you learned about Microsoft’s Theme Gallery where 3rd party developers have offered their custom themes, mostly for free, to anyone who wanted to use them. Yes, you had to go through a few more steps, but this opened the doors to dozens of new themes that you could use to add different colors to your reports.
In Part 3, you learned how to use the new Customize the Current Theme feature that was added as a preview feature in December 2019. One of the great things about this feature is that it allows you to start from any theme and customize it to look exactly the way you want. But that is just part of the benefit of customizing a theme.
In Part 4, you learned how to export your customized theme and to use it in your future Power BI report projects. You discovered that you can create custom themes based on your organization’s colors/branding that you can share them within your department or the entire organization. You also learned how to resolve simple issues when your branding does not appear to work due to prior manual customizations to colors or fonts in your visualizations.
In Part 5, you learned how to create a simple JSON theme file for your future Power BI report projects. You saw how to define a set of colors that are used for many chart types and how they augment the default colors. You also learned that colors that you manually change in a visualization cannot be changed by a theme color until you revert those colors back to their defaults.
In part 5, we ended looking at a JSON theme file named CIVIC2.JSON repeated here for your convenience:
{
“name”: “Civic2”,
“dataColors”: [“#D16349”, “#CCB400”, “#8CADAE”, “#FF0000”,
“#8FB08C”, “#D19049”, “#D1A649”, “#81CC00”, “#8C9DAE”,
“#8C8870”, “#8CB09A”, “#CFD149”],
“background”: “#FFFFFF”,
“foreground”: “#8CADAE”,
“tableAccent”: “#D16349”
}
While we talked about the “dataColors” attribute, there were three other attributes that we did not discuss at the time. The first one “background”. This attribute is not what I first expected it to be. It is not the page background. I’ll talk about that a little later. Rather, this attribute is used to define the color for the following areas:
- Labels background color (when inside data points)
- Slicer dropdown items background color
- Donut chart stroke color
- Treemap stroke color
- Combo chart background color
- Button fill color
- Filter pane and available filter card background color
While my goal here is not to show every place where this attribute is used, let me show you a page from one of my long-time SQL Saturday examples using the Contoso database. This is the way the report page looked originally showing a matrix table along with a Hierarchy Slicer and the relatively new style filter pane.
I then used the following theme which has the name “Blue BackGround”, but also goes by the file name: “Deep Blue.json”.
I’ve highlighted the line of code that represents the background color. Using my color picker, you can see that this is a light blue color
When I apply this theme to my Power BI report, the page now looks like the following image. You can see that the filter pane background now has the color of the background attribute.
But wait a minute, notice that the wallpaper which was previously a dark rust red is now a medium blue and the page background which was a turquoise is now a dark blue. What happened?
Well, originally the colors for both the wallpaper and the page background were manually set. I honestly did not expect that they would change. In fact, I went back and set the colors for both the wallpaper and page background to the default, which is white, and reapplied my custom theme. This time, they did not change and remained white. So why would these two attributes have changed color when they previously had a color that was manually set?
I must admit that this is puzzling and deserves more research. At this point, I am going to fall back on a theory that Power BI is somehow using some internal AI-like routines to define a wallpaper color based on other colors in the dataColors array when a theme is applied that does not specifically define page background or wallpaper color. Afterall, Microsoft does state that some secondary colors when not specifically set are calculated based on other colors in the theme. Specifically, the page background color appears to be related to the 8th color in this array. As I changed the 8th color to other colors different from the shade of blue (#000066), such as a shade of green (#006600), the page background displayed a variation of that new color. I am still looking for a correlation with the wallpaper color. If anyone has any insights on this, please let me know. In the meantime, I have an easier solution which I will share later in this post, so let’s move on.
According to Microsoft documentation, the next attribute, “foreground” is used to define the color for the following areas:
- Labels background color (when outside data points)
- Trend line color
- Textbox default color
- Table and matrix values and totals font colors
- Data bars axis color
- Card data labels
- Gauge callout value color
- KPI goal color
- KPI text color
- Slicer item color (when in focus mode)
- Slicer dropdown item font color
- Slicer numeric input font color
- Slicer header font color
- Scatter chart ratio line color
- Line chart forecast line color
- Map leader line color
- Filter pane and card text color
In the prior theme definition, this attribute was set to #005C99 which results in a blue-green color. To get a better view of what this attribute changes, I set the color to fuchsia #FF0099 as shown below:
After saving this theme and applying it to my report, it clearly affected the text in the filter panel. But it also effected the row and column header background colors in the matrix as well as one set of text colors in the matrix.
Finally, I took a look at the attribute tableAccent which Microsoft documentation says affects the following:
- default coloring used by tables and matrix visualizations.
-
Overrides table and matrix grid outline color when present
If you compare the following view of the page with the prior view, you can see that this appears to affect the alternating value lines in the matrix.
Because I was not happy with the automatic change to the page background color, I went into the Customize Current Theme option we examined in an earlier blog post in this series and manually set the page background colors of both the wallpaper and page background. I then exported the theme so I could look at the JSON file that was created. I highlighted the portion in code below that specifically defines the wallpaper color (#09A125) and page background (#AC0808). (Yes, deconstructing code is a time honored way to figure some things out.)
When I applied this change to my report page, the page background is now set exactly as specified. While this code is a little more advanced, there is no reason why you could not use it to set the wallpaper and page background color for other report themes by simply changing the RGB color values. In a future blog post, I will go through the structure of this element to explain how code like this works. By the way, this is what the page would look like with this theme:
One last point. The colors used here were never meant to be good or acceptable colors for a final report page. However, I wanted sufficient contrast in these colors so that you could see the effect of setting colors in each of the attributes we talked about. I hope that worked.
We have much more to examine as we dive deeper into the JSON behind the themes.
C’ya next time.
SharePointMike's Blog 