🎵 On the fourth day of Christmas, my true love gave to me...
Custom theme colors,
and
Customize Power BI Report Themes
Today's post is a little fun interlude. If you haven't been following the 12 Days of Christmas blog series, that's okay. We're not actually going to do anything with the data today. We are going to focus on making the report look pretty.
Power BI themes have been around for a long time, but they were previously really inaccessible. You needed to know JSON to be able to edit the theme. I actually taught myself a bit of JSON in order to increase the default font size on all my reports I used in class. Here's my attempt at a JSON larger font size theme that I wrote myself over a year ago:
{
"name": "GlobalLevelTemplate",
"dataColors": ["#107C10", "#A80000", "#0078D7", "#915203", "#D79A12", "#bb7711", "#114400", "#aacc66"],
"background":"#FFFFFF",
"foreground": "#3A6108",
"tableAccent": "#568410",
"visualStyles": {
"*": {
"*": {
"title": [{
"show": true,
"fontColor": { "solid": { "color": "#E0521f" } },
"background": { "no fill": { "color": "#FFFFFF" } },
"alignment": "center",
"fontSize": 12,
"fontFamily": "Arial"
}],
"values": [{
"fontSize": 12,
"fontFamily": "Arial"
}],
"rowHeaders": [{
"fontSize": 12,
"fontFamily": "Arial"
}],
"columnHeaders": [{
"fontSize": 12,
"fontFamily": "Arial"
}],
"categoryAxis": [{
"fontSize": 12,
"fontFamily": "Arial"
}],
"*": [{
"fontSize": 12,
"fontFamily": "Arial"
}],
"background": [{
"show": false,
"color": { "solid": { "color": "#FFFFFF" } },
"transparency": 25
}],
"lockAspect": [{
"show": true
}],
"border": [{
"show": false,
"color": { "solid": { "color": "#565a5c" } }
}],
"visualTooltip": [{
"type": "Default"
}],
"stylePreset": [{
"name": "None"
}]
}
},
"page": {
"*": {
"background": [{
"color": { "solid": { "color": "#FFFFFF" } },
"transparency": 50
}],
"outspace": [{
"color": { "solid": { "color": "#FFFFFF" } },
"transparency": 50
}]
}
}
}
}
Since April 2020, we don't have to waste time messing with JSON code and toiling over syntax errors because custom theme dialog went general availability. Let's look at what Power BI can do for us using the built in interface.
A picture is worth a thousand words, so I'll let you explore and play with this one on your own:
And here's the JSON output:
{"name":"High Contrast","dataColors":["#107C10","#A80000","#0078D7","#5C2D91","#004B50","#0E00D7","#D83B01","#B4009E"],"background":"#FFFFFF","foreground":"#070f25","tableAccent":"#0F1934","textClasses":{"label":{"fontSize":16},"title":{"fontSize":20},"header":{"fontSize":20}},"visualStyles":{"page":{"*":{"outspace":[{"color":{"solid":{"color":"#107C10"}}}]}},"*":{"*":{"outspacePane":[{"checkboxAndApplyColor":{"solid":{"color":"#107C10"}}}]}}}}
Really? That's it?! Much more concise and elegant than what I had attempted, and infinitely easier to use. I'll leave you to tinker with the built in Theme Customizer. Pick some nice Christmas colors, your company brand colors, or your favorite colors. Remember to think about accessibility too. Worldwide, 8% of men and 0.5% of women are color blind, with red-green color blind being the most common. Even though red and green are a great Christmas combo, do not rely on them alone to distinguish data series in a pie or stacked column visual.
Page Formatting
If you haven't discovered the Paint Roller icon in Power BI, find it now. It's in the Visualizations pane of your report and changes depending on what you have selected. If you want to format the report canvas (aka Page) then deselect all visuals and click the paint roller.
Power BI reports default to a 16:9 page size as they are usually viewed from a computer screen, but you can change this (for example if you are creating a custom tooltip page).
Page Background vs Wallpaper
Today we're going add some pizazz to our report with background images, but should we do this with Page background or Wallpaper? Examine the animation below and see if you can spot the difference between Power BI Wallpaper and Page background.
Power BI Wallpaper sits behind the report page. Note that when wallpaper transparency is at 0%, as we resize the page, the wallpaper stays fixed. This means that the slicer visual moves closer to Santa's beard.
Power BI Page background changes the report page itself. Note that when Page background is at 0% transparency, there is a white strip under Santa when we resize the report page, and the slicer stays the same distance from Santa's beard.
I like to think of the Page background like shopping for stationery, whereas Wallpaper is more like shopping for an easel, or as Microsoft put it; wallpaper.
Tune in again tomorrow for the next gift in the 12 Days of Christmas series where we'll delve into DAX and see how the SELECTEDVALUE() function can add meaning and context to your reports in a dynamic way.
