Dark mode, a user interface that leverages a dark background and light colors for text and visual elements, has become so popular that it now exists as a display setting on most applications. Proponents claim that dark mode helps limit blue light exposure which can help reduce eye strain. In fact, many software developers prefer to code with a darker background for this very reason.
Aside from eye fatigue, constant exposure to light reduces the amount of melatonin our bodies produce and can inhibit our ability to get a good night’s rest. Dark mode can help reduce some of the light intake we receive from our various computer, television and phone screens and help quiet our brains at the end of a long day.
In the context of analytics dashboards, dark mode can have many benefits compared to light mode BI dashboard design. Layering colorful visualizations on top of a dark background helps data stand out and provides immediate insights. Many users find that reports are easier to read and interpret in dark mode.
When designing an analytics dashboard in dark mode, it’s important to maintain design best practices to ensure that your data is readable and accessible. This article will explore some of our top considerations for designing BI dashboards in dark mode.
While dark mode is offered as a setting on many applications and operating systems, it can still be foreign to users as almost everything we look at on screen (this article, emails, text messages) typically utilizes dark text on lighter backgrounds. Before designing a dark mode dashboard, it’s important to know your audience’s familiarity and level of comfort with the display setting.
It can be helpful to create both a light and dark mode version of a dashboard that can be viewed by different audiences or at different times of day. You can analyze the usage history of each dashboard and gauge how often dark mode dashboards are being leveraged by users.
While your primary background color should be dark, avoid using a pure black color (#000000) which can actually be harsh on the eyes. Most UI designers will choose a dark gray as the background color as this can provide more dexterity in the dashboard’s overall design. For example, shadows are more easily perceived on gray than black and a wider range of colors can be layered on a gray canvas vs one that’s purely black.
"Less saturated colors from your color palette improve legibility and reduce visual vibration” - Material design
Highly saturated colors can be difficult to read on a dark background, so we recommend using bright, contrasting colors that will pop off the page. Just keep in mind that you can scale back a particular color’s saturation if it feels harsh on the eye once applied to a dark background.
A simplified color palette is best for dark mode dashboards as too many colors can overwhelm the eye and prevent users from receiving the main benefit of dark mode—focused eyesight on key visualizations. If you have reports that showcase various data points in a pie chart or bar graph, choose contrasting colors to help improve readability and easily distinguish between each subset of data.
Four to five contrasting colors tend to be best for reports on a dark background.
Considering that most books, newspaper articles, and blog posts are written with black text on a white background, our eyes are trained to do most of our reading in light vs dark mode. This can make reading text on a dark background foreign and difficult for some users.
When designing an analytics dashboard in dark mode, keep the use of text to a minimum and leverage visualization options that clearly illustrate the trends in your data.
With limited text use, focus on visualization options that tell a story without words. Bar charts, line graphs, and pie charts are preferable visualization options over text-heavy data tables. These can be difficult to scroll through and read in dark mode.
One of the largest benefits of dark mode is that it can help draw the user’s eye to certain elements of a dashboard. Creating a dark mode dashboard that showcases KPIs and other key metrics can help improve a user’s comprehension of key data as the information has been designed to stand out and showcase insights.
It may not always make sense to present a dark mode dashboard. If a meeting is being held in the middle of a room with a lot of natural lighting, dark mode can sometimes be more difficult to read. However, if you are in a space with lower light where a white background would be distracting and harsh on the eyes, showcasing a dark mode dashboard can help your team better understand and comprehend the analysis being shown.
Designing Power BI reports and dashboards in dark mode can be fun but is not without challenges. By following each of the aforementioned steps, you can create beautiful reports that your stakeholders will love.
It can be challenging to visually conceptualize how each of these steps can be followed to create a Power BI report. Feel free to check out a few of our dark mode sample templates below to serve as inspiration for your next dark mode design!
.png)
.png)
Check out our video for more tips on designing dark mode dashboards in Power BI
.png)
.svg){kind=small}
