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:

[woofdog]

This looks solid.  I will need to test.

THANK YOU  The Light - Dark theme capability option is needed.  I prefer dark theme, some of my users do not, while other user do.  Hopefullly, I will be able to give them the option.  It will add a bit more work for each PBI I create using this.  Wouldn't be nice if our friends at Microsoft PBI had a LIGHT/DARK theme option built in:  DARK Theme palet and a LIGHT theme palet and a Button for the user to select the option.

[JRA_is_stuck]

Very interesting.

think this is solution many will benefit from. As in most companies there are two styles dark/white, and with increase of users viewing reports this topic  gains on importance. 

Especially considering powerBI integration to PowerPoint, where this would allow easy adjustment to style of presentation 

thank you 

[technolog]

Thank you @Migasuke! I've been thinking about implementing this functionality for a long time now. Of course, it would be cool if it was built into the theme.

[Endiii]

It is great solution! however... applying it on Table and Matrix  is an issue as RowHeaders, Totals, Rows background does not support Function(FX) on it. 
Wish Microsoft provide some function that would support switching themes on reports 

[SaloniPande]

Hi @Migasuke , Thank you so much for sharing this solution. Can you explain how you changed the color for slicer's value color as there is no conditional formatting. 

Thank you so much for your time.

[Migasuke]

Hi @SaloniPande ,

unfortunatelly, it's not possible to change value colors if "fx" function is not available. We need to wait for Microsoft to implement it first.