Create A Performance Driven Theme Framework For Your Power Apps

We've discussed how to create appealing dark mode themes but how do we implement them in Power Apps.

There are 2 vital development practices we need to consider to implement simple theme switching. The first being, how can we provide a simple interface and framework for the user to use? The second, how can we build theme switching into our apps as developers without having to code every color property in our app?

We'll come back to the user interface side later in this blog, as I believe it is important to get the Power Apps studio side setup correctly to begin with.

The typical way one might go about developing multiple themes for an app is to write conditional statements on every color property in our app:

Do not do this!

If(varDarkMode, ColorValue("#1A1A1A"), ColorValue("#FFFFFF"))

As you can imagine, in complex applications with potentially hundreds of controls, writing this type of condition for every color property can swallow performance and be very time consuming as developers to get this right.

However, with a little forward planning, we can accommodate a much simpler and more efficient approach.

Theme Framework

My method focuses around named formulas, creating a dynamic and modular approach. It consists of creating separation between each of the elements that I want to tie together making each piece changeable without effecting the other.

This diagram explains how to setup your structure. I will manage the entire process inside multiple named formulas. Here's the diagram explained with the formulas below:

1. Create a named formula themes table where multiple records define each theme. Each record should contain a name and color parameters.

2. Create a named formula for the user theme. This should be a string that match a single theme name in your themes table.

3. Create a named formula for the Active theme. This should act as a lookup between your theme table and your user theme variable.

   
   

Theme Table Formula

nfThemes = 
    Table(
        {
            Name: "Default",
            Params: {
                Color1: ColorValue("#F7F7F7"), 
                Color2: ColorValue("#FF00FF"), 
                Color3: ColorValue("#FFFF00"),
                Color4: ColorValue("#FFF000"),
                Color5: ColorValue("#FF5500")
            }
        },
        {
            Name: "Light",
            Params: {
                Color1: ColorValue("#F7F7F7"), 
                Color2: ColorValue("#1E3C54"), 
                Color3: ColorValue("#F412FE"),
                Color4: ColorValue("#222222"),
                Color5: ColorValue("#2A2A2A")
            }
        },
        {
            Name: "Dark",
            Params: {
                Color1: ColorValue("#2A2A2A"), 
                Color2: ColorValue("#4A4A4A"), 
                Color3: ColorValue("#555555"),
                Color4: ColorValue("#F7F7F7"),
                Color5: ColorValue("#EEEEEE")
            }
        }
    );

User Theme Formula

nfUserTheme = 
    "Light";

Active Theme Formula

nfActiveTheme =
    LookUp(nfThemes, Name = nfUserTheme).Params;

What is happening here?

Implementing your theme setup in this way provides maximum flexibility. nfActiveTheme performs a LookUp formula that takes in the value of nfUserTheme (a string variable that matches one of our themes in the nfThemes table).

This will allow you to change your entire theme, just by changing the nfUserTheme value to a different theme name.

Apply Your Theme To Your Controls

This structure allows us to point all color values for our controls to the corresponding color in our theme table using a single variable (nfActiveTheme). It requires no conditions, switches or complex code on the controls themselves.

Here is an example of how to use it:

1. Add a rectangle to your screen.

2. In the Fill property, add the following formula:

nfActiveTheme.Color1

Explore More Dynamics

Now you're Theme framework is in place, you are no longer limited by clunky color formulas. Here is a list of things that you could try:

• Add a dropdown box to dynamically change your nfUserTheme value

• Offload your nfUserTheme value to a User Preferences table (external data source works really well here). This allows each user to set and store their own theme that can be read when opening the app.

• Explore different color palettes in your nfThemes table. Remember you can add as many as you like.