Having a Light and Dark version of your Power BI Reports.
Updated: Feb 1
“It was the possibility of darkness that made the day seem so bright.” — Stephen King.
For a couple of years, we’ve seen a boom in applications supporting dark versions of their interfaces. Creating a dark, light version of analytics reports can benefit business intelligence developers:
Accessibility: dark versions of reports can facilitate reports consumption and improve accessibility for those with visual impairments to consume reports more efficiently
Users' preference: dark mode can also provide a more aesthetically pleasing experience for users, making it more enjoyable to interact with the report.
Create a modern and attractive UI/UX for users with a range of preferences
In Power BI, there are three main approaches for creating these two versions of your reports, and, like almost everything in this life, choosing any method means opportunities and compromises; let's dive through them:
First (preferred) approach: JSON Themes.
By applying report themes, you can achieve your report's dark and light versions. Using a theme is very easy and doesn’t take more than a couple of seconds and clicks to apply one.
Two different JSON themes and two PBIX files need to be created, each with a different theme applied. In this case, the toggle button has a Web URL action that directs the user, in a new tab, to the other version of the Power BI report.
Creating a reusable JSON report theme is easier said than done, as it requires lots of fine-tuning, which is done in a code editor; additionally, it is vital to apply themes to a report that has not been manually formatted because theme formatting through JSON files does not override formats applied manually.
As you may notice, the downside is that creating themes may appear challenging for some users as it requires good knowledge of the JSON file structure and can be very time-consuming; on the bright side, once you have some functional templates, these can be reused with minor modifications.
More information about themes: Use report themes in Power BI Desktop - Power BI | Microsoft Learn
Pros:
Applying themes is quick as a finger snap.
No need for complex bookmarks.
Replicable approach.
Fine control of elements
Cons:
Requires JSON knowledge.
Format changes need to be done twice in both JSON files’ themes.
Change between modes happens by navigating to a different report.
Second approach: DAX
Since the first time I wrote this article, there has been a lot of exploration of creating Power BI files with both modes, and one method has been gaining traction: the DAX one.
The DAX method uses conditionally formatting Power BI visuals based on DAX formulas; the measures created require switching the HEX colours based on a selected parameter. As with all DAX subjects, there is no single approach, and different DAX functions can be used to achieve the result.
This method is very time-consuming and not bulletproof, as many visuals have properties that cannot be conditionally formatted.
Below, you will find some good resources about how to achieve this DAX method:
Creating a dark and light theme for your Power BI report – Side Quests
Power BI Guy - Create reports with a light and dark mode in Power BI
Captain Platform - Create a Dark/Light mode switcher in Power BI!
Pros:
DAX is straightforward and not complicated.
Switch between modes in the same report.
Cons:
Not easily replicable.
Conditional formatting needs to be applied to every visual.
Time-consuming.
Third approach: Duplicate items.
You will need to make two versions, dark and light, of almost every element and visual on your report. Also, you have to add a box covering all the report’s areas acting as the alternative background; then, these elements need to be hidden and unhidden through bookmarks, which need to be assigned to buttons.
This approach is suitable for newbies in Power BI as there is much learning potential in the Visual formats and Bookmarks management area.
Similar to the DAX approach, I would not recommend this one for the busy BI professional, mainly because it is time-consuming.
For more information about making buttons and bookmarks, refer to this great video from Guy in a Cube: Power BI Bookmarks, Selections and Toggles - YouTube
Pros:
You can do it all within Power BI desktop.
No need to learn JSON structures.
Quicker to make changes on the fly.
The transition between modes happens within the same report.
Cons:
Not easily replicable.
Challenging if you have many bookmark interactions.
The transition between modes happens to navigate to a different report.
Time-consuming.
Extra approach: HTML, CSS and JS.
While refreshing this article and tinkering about how to show the contrast between dark and light modes, I had the idea of using a before-after image slider. I found on Codepen some nice slider code that works for images, and then I thought: what about replacing images with Power BI iframes? You can see the result below:
The trick for adapting the code is to change the images for the Power BI iFrames; for this you need to get the iframes from the Power BI Service.
Once you have the iframe codes, for each version, you need to adapt this part of the code:
<div class="before">
<img class="content-image" src="https://farm2.staticflickr.com/1638/26145024230_06acd55d1b_b.jpg" draggable="false"/> </div>
<div class="after">
<img class="content-image" src="https://farm2.staticflickr.com/1663/25814974803_d4c55ff708_b.jpg" draggable="false"/>
</div>
<div class="scroller">It needs to be replaced by this one:
<div class="before">
<iframe title="Report Section" width="740" height="416"
src="https://app.powerbi.com/view?r=eyJrIjoiNDk4OTM1NmEtYjViYi00YjlkLWJiMjEtMjU5MzQ5YmM4YWMxIiwidCI6ImNmYTVmNTI3LWM4MjEtNGE5MC1iNTUyLWNlODZmOGY5NDE1MiJ9"
frameborder="0" allowFullScreen="true"></iframe>
</div>
<div class="after">
<iframe title="Report Section" width="740" height="416"
src="https://app.powerbi.com/view?r=eyJrIjoiMjhlNjIzYjMtNDM5NS00MjkwLWIyODAtYWEyOTAwMDU2NmViIiwidCI6ImNmYTVmNTI3LWM4MjEtNGE5MC1iNTUyLWNlODZmOGY5NDE1MiJ9"
frameborder="0" allowFullScreen="true"></iframe>
</div>Finally, to make the PowerBI interactive, you need to remove the “pointer-events” line from the CSS; this will make your Power BI reports clickable but also a bit buggy depending on the browser.
The importance of this approach applies to more than dark and light themes as it can be used for comparing designs or data scenarios.
Conclusion
It is probably not hard to guess that my preferred option is the second one; regardless of your chosen method, my only suggestion is that when creating your reports, always keep your end-users in mind and always make your best effort to make the experience of using your report a pleasant one.
