In a previous blog post, we looked at how to get started with custom Power BI themes. We created a custom color palette and defined the basic JSON theme file. In this blog post, we will look at how to change the background colors of Power BI reports.
There are two types of backgrounds in Power BI reports. The first is the Page Background, which is the background of the report itself. The second is the Wallpaper, which is the outer color surrounding the report.
Original Report
To keep things simple and consistent in my posts, I will use the Power BI sample reports by Microsoft and obviEnce. This way, I can test my themes on existing reports with several different visualizations.
(And, uh, I prefer to use existing sample reports because I tend to get hung up on details. If I work with my own reports, I will most likely get distracted building new visualizations or moving things around. So! Sample reports it is.)
In this post, I will use the Human Resources sample. The page Actives and Separations looks like this:

The Page Background is white, while the Wallpaper (showing as bars on the top and bottom) is gray.
Let’s change some colors!
Page Background Colors
In the basic JSON theme file, we defined a background color. Unfortunately, this is a table color. It won’t affect the report background colors at all. Aww. That would have been so easy.
Instead, we need to dig into… well, just a little more JSON code :)
First, we add the visualStyles section to our theme. Then, we define the page visual and use the asterisk * to apply the settings to all page styles. Finally, we define the background properties color and transparency:
{
"name": "Yellow Page Background Color",
"visualStyles": {
"page": {
"*": {
"background": [
{
"color": {
"solid": {
"color": "#ffff00"
}
},
"transparency": 0
}
]
}
}
}
}
If we save and apply this theme, our report will get a bright yellow background:

(Ouch, my eyes! Don’t hurt yourself. This is for illustration purposes only :) )
Wallpaper Colors
To change the wallpaper, we use almost the same code as in the example above. The only difference is that we define the outspace instead of the background:
{
"name": "Yellow Wallpaper Color",
"visualStyles": {
"page": {
"*": {
"outspace": [
{
"color": {
"solid": {
"color": "#ffff00"
}
},
"transparency": 0
}
]
}
}
}
}
If we save and apply this theme, our report will get a bright yellow wallpaper instead:

Cathrine’s Full Theme File
When I merge the code from my getting started post and this post, I end up with the following theme file:
{
"name": "Cathrine Wilhelmsen - Light Theme",
"dataColors": [
"#980249",
"#a95295",
"#a78cd4",
"#a8c3ff",
"#6fb5e7",
"#38a6c6",
"#02949f",
"#cccccc"
],
"background": "#ffffff",
"foreground": "#980249",
"tableAccent": "#980249",
"visualStyles": {
"page": {
"*": {
"background": [
{
"color": {
"solid": {
"color": "#eeeeee"
}
}
}
],
"outspace": [
{
"color": {
"solid": {
"color": "#999999"
}
}
}
]
}
}
}
}
When I apply my theme to the sample report, it will get a light gray background color and a darker gray wallpaper color. In addition, the visualizations will use my custom color palette:

(Recognize these colors from somewhere? :) Personal branding is pretty easy in Power BI as well!)
Summary
In this blog post, we looked at how to change the page background colors of Power BI reports using a custom theme. We defined the Page Background and the Wallpaper colors. In my next post, I show you a trick (or a hack?) to apply background images using a custom theme :)
Thanks for shedding some light on Json themes in Power BI.
I know the documentation is not the greatest in this area.
I was just wondering if you know the syntax to “turn off” the Background Button (under title options) on most of the visuals like matrix, table, charts etc?
Thank you for sharing this info! I’ve implemented your theme code in my Power BI pbix file, but unfortunately only the outspace color is appearing (the page background color isn’t showing up). It’s worth noting that I’m using the December 2019 version of Power BI Desktop (version 2.76.5678.782 64 bit). Do you have any insight into this?
Thank you!
I take it back! I had a page background color applied over top of the theme-defined page background color. Upon visiting the ‘Page Background’ section of Power BI Desktop and reverting to the default style, my changes were applied.