Creating a dynamic dark and light mode report in Power BI
Step-by-Step Guide (no bookmarks)
Adding a dark and light mode to your Power BI dashboards allows your audience to choose the viewing experience that works best for them. If you’re curious about the advantages of dark mode, I’ve covered this in more detail in an article about dark mode design.
In this tutorial, I’ll use a technique for dynamically changing colors in Power BI. This method isn’t just for dark and light modes—you can also use it for other color schemes. It’s simple to implement since all color choices rely on a separate table. There’s no need to use bookmarks or edit the JSON theme file, a significant advantage.
Using a separate color table to change between light and dark mode
The Power BI dashboard I create uses standard visuals, shapes for backgrounds, and headers – no extra tools or custom visuals are needed. It’s a straightforward design that keeps things simple and accessible.
When creating two color schemes to switch between, storing the color information in a structured way is essential. One option is to use DAX measures, where each measure represents a specific color (e.g., background, borders, text, etc.). However, I prefer using a separate table. Why? It’s easier to maintain. By storing the colors in a table, you can update them quickly in Power Query by simply changing the HEX codes—no need to rewrite measures.
Whichever approach you choose, the stored color information becomes your visuals’ input for conditional formatting. This flexibility lets you dynamically switch between color schemes while keeping the process efficient and manageable.
Step 1: The color table for dark and light mode dashboard
| Mode | Mode Icon | Canvas | Visual | Main Color | Font | Border |
|---|---|---|---|---|---|---|
| Light | ☀️ | #e5eaf2 | #f8fafc | #0b3669 | #576c8c | #323447 |
| Dark | 🌙 | #474c5b | #212337 | #78afec | #de9742 | #dce2e2 |
Step 2 : A Slicer to select dark or light mode
Now, we can create a new slicer.
- Add the Tile Slicer visual to the canvas in Power BI.
- Use the Mode Icon as the Field. In this example, this can be either the sun icon ☀️ or the moon icon 🌙. (Tip: Press Windows + . (dot) to see a list of all available icons.)
- Style the slicer as you like; for instance, you can remove the background and adjust the transparency of the unselected icon.
How does this work? Currently, when you click on the slicer and select one of the emoticons, nothing happens visibly. However, in the background, selecting one of these icons will filter the corresponding row in our newly created table. In that row, we have all the HEX codes we need for the next steps using conditional formatting in Power BI.
Step 3: Using conditional formatting to change the color scheme
After implementing the table and slicer with the icon, we can now change all our visuals and shapes, using conditional formatting, to create a dark and light mode design in Power BI.
When you see the fx icon in Power BI, this means you can use conditional formatting to change for example the background color (press the fx button -> Conditional formatting based on the field value -> choose the corresponding column from the color table).
Since our slicer selects one row when we click on the icon, Power BI will use the HEX code from the corresponding column.
If you want a step-by-step explanation of how to do this, please have a look at this article about dynamically changing colors in Power BI.
In our dashboard I changed the conditional formatting for the following:
- Header (Shape, background)
- Background Canvas (Shape, background)
- Background of each visual
- Color of the Bar charts
- Color of the error bars (the dots)
- Font color
- Border of each visual
Limitations of a dark and light mode dashboard design
- Columns and row headers in a table or matrix cannot change color using conditional formatting.
- Additionally, when there is more than one column in a column chart, the conditional formatting feature is disabled.
- Furthermore, the line color in a combined column and line chart cannot be altered.
Final Thoughts
This method provides a straightforward and effective way to switch between light and dark mode in Power BI. While it may require some initial effort to set up the conditional formatting for each component of the dashboard, it will simplify design changes in the long run. You can easily modify the appearance by just changing the HEX codes in the table.
Video: Creating a dynamic dark and light mode report in Power BI (step by step)
To help you get a feel for the process, I created a dark and light mode Power BI dashboard from scratch and recorded it.