Custom Power BI Themes: Page Background Colors

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 :)