The Dark mode is probably one of the most popular features in the modern user interface. From apps to operating systems, Apple to Google, smartphones to laptops, many of the products that we use today have dark mode integrated into the user interface.
Dark Mode means that, instead of the default dark text showing up against a light screen (known as 'light mode'), a light color text (like white or grey) is presented against a dark or black screen.
This feature has been added to the Power BI mobile apps, and in this blog post, I explain how to add this feature to your Power BI Report step by step.
I created a simple report in Power BI Desktop, and now I want to add a toggle button to switch between Dark and Light mode. In this article, I don't want to use Bookmark because I want to change the theme of all report pages with one click on each page of the report, so I need to create some measures with DAX expressions and use those measures to change the font and background colors.
The desired output:
First, let's group the report items (Page and Visuals) which will be affected by Dark or Light mode to find out how many measures are required.
I grouped all report items which need to be affected by Dark or Light mode into 5 categories (Page Background, Font, Visual Background, Title Background, and visual border and shadow), each of them covers some items as follow:
Page Background: Page Background or Shape Fill Color
Visual Background: Visual Background Color
Font: Text Box font, Visual Title Font, X-axis, Y-axis font, and Legend font
Title Background: Visual title Background Color
Visual Border and Shadow: Visual border and shadow Color
Some measures and a toggle visual need to be added to the report to cover these categories and toggle between Light and Dark modes.
***Note: In this article, I used the New Format Pane in the Power BI Desktop (Some features which are used in this article are not available in the old Format Pane). For more information click on this link: https://powerbi.microsoft.com/en-us/blog/introducing-the-new-format-pane-preview/
Add and Configure a Toggle
To have a toggle visual to switch between Dark and Light modes, I used the Advanced Toggle Switch by TME AG, it's a custom visual, and you can download that from Microsoft AppSource, download link: https://bit.ly/3KZPSmM
After adding the toggle visual to the report, a table with one column and 2 rows needs to be added to the report.
Table name: Color Mode
Column Name: Light/Dark
Rows Value: Light - Dark
To configure the toggle visual, first, add the Light/Dark column to the Data Filed of the visual and then in the Format Visual →Switch section, type Light in the Value(s) for ON and Dark in the Value(s) for OFF.
Make sure the Show header option under the Switch Title and Background under the General → Effects are off for the toggle visual.
You can add two text boxes at the left and right side of the toggle to show 🌞 for the Light and 🌘 for the Dark mode (you can copy and paste the icons from here to the Text box).
After adding the toggle and icons, you can copy and paste them to each page of the report. For this action, select the toggle and icons and create a group, then you can copy the group and past that on each page.
Page Background
The background color is the first and most important item (based on the size of the area) in adding a dark mode to the report. Unfortunately, even in the new update of the Power BI desktop (Dec-21 Update), it's not possible to add conditional formatting to the Canvas Background or Wallpaper color.
The solution to add conditional formatting to the page background is to add a shape (Rectangle) to the page and set the shape's size to cover the whole page; then, you can create a measure and use that in the shape's fill color.
**NOTE 1: This shape should be the last item in the Selection Pane of the report page, so the other page items, like visuals, will be in front of the shape item.
**NOTE 2: Make sure the Maintain layer order is on for the shape you added to cover the background. you can find that option under the General->Advanced option
The measure for the Page Background or the Shape fill colour:
Page Background =
IF ( SELECTEDVALUE ( 'Color Mode'[Light/Dark] ) = "Dark", "#403F3F", "#FFFFFF" )
I used #403F3F for the Dark mode and #FFFFFF for light mode; you can use any code from this ☛ image or change that to any HEX color.
After adding a shape to the report, the Page Background measure needs to be used to format the shape's fill color. Select the shape on the report, then click on the FX icon in Format Shape → Shape → Style → Fill.
In the Fill Style window, open the format style dropdown and select Field Value, then select the Page Background measure in the What field should we base this on?
Now the color of the shape will change by toggle.
**Note: These actions for page background need to be done for each page of the report (Add shape and assign measure).
Visual Background
The next item that needs to be changed in the Dark and Light modes is the Visual Background. Fortunately, the visual background has the ability to use measure in the color conditional formatting, so a measure for this item needs to be added to the report:
Visual Background = IF( SELECTEDVALUE('Mode'[Light/Dark])="Dark","#808080","#FFFFFF")
I used the #808080 color that is lighter than the page background in the Dark mode to make a difference between those two colors.
After adding this measure to the report, you need to select visuals on all report's pages one by one and assign this measure to the visual background (in the conditional formatting).
Font
To keep the text of visuals visible in the Dark and Light modes, a new measure needs to be added to the report to use that in the text color conditional formatting of Text Box, Visual Title, X-axis, Y-axis, and Legend for changing the text color to a contrasting color in the dark mode and vice versa.
Measure for font:
Font Color =
IF( SELECTEDVALUE('Mode'[Light/Dark])="Dark","#FFFFFF","#000000")
In the Text Box, you can not assign the measure to change the font color of the text (current version Dec-21), but you can type your text in the title section of the Text Box and then assign the Font measure in the conditional formatting of the Text Colour:
**Note: Make sure the background is OFF for the Text Box.
Visual Title, X-axis, Y-axis, and Legend have the ability to use a measure in the conditional formatting of the text/value color. Select all visuals on all report's pages one by one and assign the font measure to the text/values color (in the conditional formatting).
Title Background - Visual Border and Shadow
Our report is almost ready with Dark and Light modes, but to make the title of the visual clear and easy to read, you can use Page background measure to change the title color to a darker color and split the title section and visual background.
For adding a border and shadow with contrasting colors to the visuals in Dark and Light modes, you can use the Font Color measure, in this case, you need 3 measures to add Dark and Light modes to your Power BI report, however, you can add more measures for Title background, Visual border, and shadow in your Power BI report.
**Note 1: All steps need to be done on all pages and for all visuals.
**Note 2: After adding measures and configuring all pages and visuals, you can switch between Dark and Light modes (for all pages and visuals of the report) with a toggle on each page.
**Note 3: Fo the Table and Matrix visuals, you can use the Font measure in the conditional formatting of values, and unfortunately in the current version (Dec-21), there is no option to assign conditional formatting for column headers!
Output:
Download the PBIX file: