Skip to content

Custom Power BI Themes: Page Background Colors

Custom Power BI Themes: 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:

Custom Power BI Themes: Page Background Colors - Original

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:

Custom Power BI Themes: Page Background Colors - Highlighted 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:

Custom Power BI Themes: Page Background Colors - Highlighted Wallpaper

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:

Custom Power BI Themes: Page Background Colors - New Theme

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

Who is Cathrine Wilhelmsen?

Cathrine is a Microsoft Data Platform MVP, BimlHero, Microsoft Certified Solutions Expert, author, speaker, blogger and chronic volunteer who loves teaching and sharing knowledge. She works as a Senior Business Intelligence Consultant in Inmeta, focusing on Azure and the Microsoft Data Platform. She loves sci-fi, chocolate, coffee, craft beers, ciders, cat gifs and smilies :)

Comments

Hi! This is Cathrine. Thank you so much for visiting my blog. I'd love to hear your thoughts, but please keep in mind that I'm not technical support for any products mentioned in this post :) Off-topic questions, comments and discussions may be moderated. Thanks!

Click to Show / Hide Comments