Choosing A Perfect Dark Mode Color Palette For Your Power Apps Projects

Dark mode is becoming increasingly popular amongst users and is highly sought after. Users choose to enable dark mode for a number of reasons including:

• Increased Battery Performance on OLED displays

• Reduced eye strain in low light conditions

• Aesthetically pleasing

For me, its a personal preference. I just love the aesthetic and clean style that most dark mode color palettes offer.

Whether you are a dark mode user or not, its often overlooked when building desktop and mobile applications in Power Apps. Granted, Microsoft has not made it easy to implement but with a bit of forward planning and pre-setup, you can build solid foundations to accommodate dark mode at the beginning of your project.

Light Mode vs. Dark Mode

Before building a dark mode application, remember that flexibility is key! Users often like to switch between light and dark mode, depending on the conditions they are in - or maybe they just fancy a change. Giving users the option to switch between themes is equally important as defining one or the other (I will be creating an article soon on implementing a theme framework that you can define for your Power Apps soon).

With this in mind, it's important to take all themes in to account when designing your app ensuring that both light and dark themes look elegant, and flow seamlessly no matter which theme is active.

Dark Mode Tips

Avoid Using Black!

It's very easy to think of a dark mode theme as black, and light mode as white, but this shouldn't be the case. Black can often be reflective, especially on modern mobile devices where OLED displays are ever more popular. These types of displays can completely switch off pixels in dark scenarios leaving the entire reflective screen layer glaring into the users eyes.

You'll often also find that lighter (white) text radiates with a glow making some characters indistinguishable to the user.

In this example you can see 3 variations of "Black" where the first is pure black and the other 2 examples are slightly lighter, but give good tonality for a dark mode design.

Utilize Your Primary Color

Your primary color is usually your main color for your app, typically a brand color or color that is identifiable in your app.

Take your primary color and reproduce a much darker version of it, keeping the tone and shade but adjusting the luminosity. You'll want to manipulate this quite heavily to bring it to an almost black/dark grey level but keeps the tint or hue of your brand within your app.

In this example you can see my "green" primary color, followed by 2 darker variants of that color.

Create Depth With Contrast

Choosing a dark color scheme isn't just about picking a dark color for your app. Creating depth with contrast to make important aspects of your app stand out is just as important. This is where you should consider how your text, buttons and borders sit with your theme. This is where you can accent certain controls with your brand colors, by choosing bold and vibrant variations of your brand. If your brand colors clash with your dark mode, consider raising the luminance or choosing a lighter variation of your color.

'But what about my brand?'.

You'll find that big companies do this all the time to suit their marketing and placement formatting needs. Let's take Coca Cola for example... Their red is always vibrant and recognisable but studying their advertisements and placements over the years, it's actually quite difficult to find the exact red that they use.

Create A Color Palette Application

Once you are happy with your dark mode primary color, we can work with it to create a palette that we can use for different elements in our app. I recommend choosing 3 dark colors (usually with different shades of your primary dark color) and 2 light colours (near white) to accent text elements, borders, buttons or other elements which need to be clearly visible to the user.

A useful practice is to create your own brand guidelines application, consisting of rectangles and text where you can can try out and finalize your dark mode theme. Here you will be able to change a test out various color palettes by changing how text appears on different shades until you find a palette that fits.

Always remember to make sure no matter what color you choose, your other visual elements stand out and maintain good contrast.

Test On Multiple Devices

Now you have defined your color palette its worth deploying your brand guidelines application to multiple devices. Review and compare how they look on desktop, mobile displays and tablets... or maybe a TV you might have in the office for dashboards. Every display is configured and manufactured differently, more modern displays utilizing OLED technology which can make darker colors look even darker.

I will be sharing some fantastic dark mode themes on my site so be sure to check them out!