Love your battery. Use Dark Mode
We’ve all been there. Furiously working away on our mobile devices when all of a sudden we get the dreaded poorly timed shutdown. Despite the advances in screen technologies from LCD to OLED, screen brightness remain one of the main energy guzzlers. In fact, some studies have shown that bright screens will use up to 30% more battery power than dark screens. So how do we combat this issue? Both Google and Apple have started supporting Dark Mode in their themes and apps and are seeing improvements. So let’s learn from this lesson and do the same when building our Power Apps.
Many companies have specific branding guidelines that will limit their choice of colours to specific ones, and even dictate in what combinations such colours can be used. Ideally, the collection of these colours should allow for creation of applications that are both aesthetically pleasing but also meet accessibility guidelines (large fonts, high contrast, etc.) What we, as Power Apps developers should do is adopt the colour scheme and work with the branding folks to provide us with both light and dark themes for our apps.
Inside the app, we should declare our colour choices in the OnStart() property for the App. The colour definitions may look something like the following:
Set(LightBackground,RGBA(255,255,255,1));
Set(DarkBackground,RGBA(0,0,0,1));
Set(LightButtonBackground,RGBA(56, 96, 178, 1));
Set(DarkButtonBackground,RGBA(199,159,77,1));
Set(DarkTextForeground,RGBA(255,255,255,1));
Set(LightTextForeground,RGBA(0,0,0,1));Set(darkMode,false)
The last light in the above code segment is used to determine whether the app will use the darkMode or not. Now that we have the colours defined, we can set up our controls to set their foreground and background colours using these predefined parameters. For example, the Color property may be set to If(darkMode,DarkForeground,LightForeground) , while the Fill property would be transparent or another choice. Below is a sample of what such an app may look like.
Each control needs to be configured separately. However, this process can be simplified by using Components to render each control type.
BONUS
In my example above, I used a toggle switch to change between the light and dark modes. You can also configure your apps to have an automatic mode that will change the theme from light to dark based on the time of day. Uber cool would be an app that would reach out to a weather service for the region that the user is in to determine the sun set time and adjust the theme accordingly. But that’s way beyond the scope of this article.
Conclusion
Light modes are still the de facto standard for many apps today. However, many app developers (Microsoft, Google, Apple, Twitter, etc.) are recognizing the need for dark mode to prolong battery life. For users who are based in an office, this may be less of an issue as their devices can be plugged in most of the time. But when you are building an app for front line workers, think about the fact that they may be in the field for many hours and use their devices on a regular basis without an opportunity to recharge them.
