Light & Dark theme together in Power BI

[Migasuke]

Initial Setup

First I will introduce my report, which is a basic report based on covid data. The theme we see at this moment is the default one:

As we can see, the report contains all kind of visuals like cards, donut charts, slicer etc.

Problem Solving

1. Creating "Switch"
In the first step we need to think what kind of color combinations we want to have and what kind of themes we want to offer to our end users. In my case I will use only two color combinations but of course more can be added. My themes will be called „Light“ and „Dark“.
After the first step I need to create a switch, which will change the colors. The easiest solution is to create a new table.

I will call my new table as „Themes“.
Since I want to use those two values in my report, I will use them in a new slicer with a single select option:

2. Creating measures

Next step requires to write few DAX measures. Before we write any measure we need to think what elements we want to change in our report. Do we want to change visual background? Do we want to change color of the titles or legends? All those questions must be answered first.
In my case I will change following:

• Canvas background.
• Visual background.
• All visible text in the report.

With my goals above I will create three measures. Let’s start with the very first one.
Measure needs to return different value based on Color Theme slicer, for that I am going to use SWITCH statement with SELECTEDVALUE. Measure bellow basically says „If the selected theme is Light, give me hex color code of #F3F2F1 (which is light gray color) or in the case of Dark , give me #020202 (which is dark shade of gray). Those color codes can be adjusted of course.

             Canvas Background =

             SWITCH( SELECTEDVALUE( Themes[Color Theme]), "Light"," #f3f2f1", "Dark", "#020202" )

With the same logic I will create my two other measures, only the color codes will be different.

             Visual Background =

             SWITCH( SELECTEDVALUE( Themes[Color Theme]), "Light", "#e6e6e6", "Dark", "#041C32" )

             Text Color =

             SWITCH( SELECTEDVALUE( Themes[Color Theme]), "Light", "#000000", "Dark", "#FFFFFF" )

3. Setting up the visuals
Now we have everything prepared and we need to use those measures in our visuals.
As a first example we can use Card visual. We need to go to formatting option and search for a background color and hit „fx“ option:

New window will open and we need to change Format style to Field value and select our measure, which changes visual Background. We just confirm with Ok.

In the next step we need to do the same only this time we will set up our Callout value and Category label. Don’t forget we are setting up text, because of that we will  use Text Color measure:

Once we are done, we can just use format painter and copy formatting to other cards in our report.

Since cards visuals are set up, we can move on to other visual. I will not go to every single visual I use in my report in this article since the steps are very similar, but I will describe one more – Canvas Background

Setting up canvas background is not so straight forward like in other cases. Problem occurs that canvas does not support (yet) color based on DAX expressions. Here we can see a current formatting options of the canvas background:

As we see above, „fx“ button is missing. You might find in some visuals the same problem, but majority of colors can be adjusted. In case you can’t use DAX expressions for the color to change, you need to either keep fixed color or find visual which supports it.

Back to our problem with canvas. Since we can’t change the color directly in cavas background settings we are forced to use some workaround. In our case the workaround is having shape, which will serve the same way as the background. I am going to use rectangle as we see below:

I will expand the rectangle on the whole canvas area and do few formatting changes:

 I) First we need to make fill dynamic. So I will apply in „fx“ Canvas Background measure.

 II) I will turn off any borders and outlines of the shape.
 III) I need to send shape to the back of my canvas. This can be done in top Format pane.

Now we should have some basic understanding of the set up. If we spend some time and adjust all other visuals with the same logic, we can see following results:

Light theme:

Dark theme: