By the end of this publication, you will learn not only how to create a custom theme, but also how to allow your users to choose one at will.

As you may have noticed, the purple and pink are custom themes that I have previously created.

Introduction

Since Microsoft introduced Themes, we can only choose one and enjoy the ride. We all have the following questions:

Can we create our own theme?
Can our users choose which theme they want?

The answer is, yes we can.

As we did in the DarkMode post, we are going to create a new set of colours to assign them dynamically.

Since the application is created incrementally this Custom Theme will have Custom Theme + DarkMode

Requirements

Before implementing the custom theme, you should understand separately the DarkTheme explained at DarkMode

Also in case you download the App from Github remember that I always use a SplashScreen to ease the data loading and user experience.

You can see in more detail how I implement the SplashScreen and how to manipulate it.

Hands On

In 5 steps we can start using our Custom Theme.

Decide theme colors
Extra theme colors (optional)
Set MyTheme variant
Use the variant into the App
Switch theme button

Decide Theme Colors

ClearCollect (colCustomThemes, 
  {Name: "PowerAppsTheme", Primary: "#0f6cbd", Light:"#92cef6",  Medium:"#208fe1", Dark: "#004e9e"} ,
  {Name: "GreenTheme", Primary: "#2d8028", Light:"#a6d8a3",  Medium:"#48a33e", Dark: "#154412"} ,
  {Name: "OrangeTheme", Primary: "#e05606", Light:"#fbbf9d",  Medium:"#f77426", Dark: "#a04008"},
  {Name: "RedTheme", Primary: "#BD3133", Light:"#ff9d92",  Medium:"#e94f4c", Dark: "#842826"},
  {Name: "SteelTheme", Primary: "#287086", Light:"#96c0d0",  Medium:"#5390a4", Dark: "#005164"}, 
  {Name: "PlatinumTheme", Primary: "#6a7a7f", Light:"#c2cccf",  Medium:"#8b9a9f", Dark: "#4f5a5e"},
  {Name: "PinkTheme", Primary: "#f31b99", Light:"#f6b9dd",  Medium:"#f38ac6", Dark: "#e3007e"},
  {Name: "PurpleTheme", Primary: "#913db5", Light:"#ddc1e9",  Medium:"#c799db", Dark: "#7033a5"}
);

As you can see I only define the Hexadecimal. Later on, using the ColorValue() funciton we will set the RGB into our variant to use.

Extra Theme Clours (opcional)

As you can see, pink & purple are extra custom themes. If you want to add new ones it is now.

Let's say we want the following green #008D6C based theme color.

The easiest way is to choose the desired colour and look at its contrasts in material.io

The colour should ideally have a score between 600-800 This will be the Primary colour.

The most important is the Light which will be the one that contrasts in the DarkTheme. You should choose between 200 and 100.

For Dark we will use 800-900 and for Medium something in between under 300-400.

 {Name: "MateGreenTheme", Primary: "#008d6c", Light:"#b3e1d4",  Medium:"#50b99e", Dark: "#006d4f"}

Here how it looks for the user to select:

Set MyTheme Variant

Define the function that will change the colours dynamically. We are creating 2 Variant/Objects to hold the current theme colors:

varCurrentTheme Here we keep the App.Theme.Name during inicialization. From there on we will use varCurrentTheme instead of App.Theme.Name
XMyThemeX Here we keep the selected/active Theme Colour. This is the function that will change our active theme colours dynamically, every time based on varCurrentTheme

Set(varCurrentTheme,App.Theme.Name);
Set(XMyThemeX, {
  Colors: {
  Name:varCurrentTheme,
    RGB: {
      Primary: If(varDarkMode,ColorValue(LookUp(colCustomThemes, Name= varCurrentTheme).Light),ColorValue(LookUp(colCustomThemes, Name= varCurrentTheme).Primary)),
      Light: If(!varDarkMode,ColorValue(LookUp(colCustomThemes, Name= varCurrentTheme).Light),ColorValue(LookUp(colCustomThemes, Name= varCurrentTheme).Dark)),
      Medium: ColorValue(LookUp(colCustomThemes, Name= varCurrentTheme).Medium),
      Dark: If(!varDarkMode,ColorValue(LookUp(colCustomThemes, Name= varCurrentTheme).Dark),ColorValue(LookUp(colCustomThemes, Name= varCurrentTheme).Light))
    },
    Hex: {
      Primary: If(varDarkMode,LookUp(colCustomThemes, Name= varCurrentTheme).Light,LookUp(colCustomThemes, Name= varCurrentTheme).Primary),
      Light: If(!varDarkMode,LookUp(colCustomThemes, Name= varCurrentTheme).Light,LookUp(colCustomThemes, Name= varCurrentTheme).Dark),
      Medium: LookUp(colCustomThemes, Name= varCurrentTheme).Medium,
      Dark: If(!varDarkMode,LookUp(colCustomThemes, Name= varCurrentTheme).Dark,LookUp(colCustomThemes, Name= varCurrentTheme).Light)
    }
}})

Notice colors betweeen Light and Primary Switch based on varDarkMode. This means we use the light color in case we are in DarkMode. If you are not interested on DarkMode. You can remove the code or leave varDarkMode = false. Also notice there is RGB and Hex version of the Theme. This is usefull in case you want to use SVG Icons like I recommend to do on my SVG Icons post.

Use the variant into the App

Apply Theme colours from now using XMyThemeX variant

MatteGreen Color Palette for PowerApp explained

A very common is the Header element Fill property which you could set it as XMyThemeX.Colors.RGB.Primary

Switch Theme Button

You just have to update varCurrentTheme for the user selection and run again the function that updates Mytheme

At the Theme Gallery .OnSelect property, you can use the following code:

Set(varCurrentTheme,ThisItem.Name);
Set(XMyThemeX,{
  Colors: {
    Name:varCurrentTheme,
      RGB: {
        Primary: If(varDarkMode,ColorValue(LookUp(colCustomThemes, Name= varCurrentTheme).Light),ColorValue(LookUp(colCustomThemes, Name= varCurrentTheme).Primary)),
        Light: If(!varDarkMode,ColorValue(LookUp(colCustomThemes, Name= varCurrentTheme).Light),ColorValue(LookUp(colCustomThemes, Name= varCurrentTheme).Dark)),
        Medium: ColorValue(LookUp(colCustomThemes, Name= varCurrentTheme).Medium),
        Dark: If(!varDarkMode,ColorValue(LookUp(colCustomThemes, Name= varCurrentTheme).Dark),ColorValue(LookUp(colCustomThemes, Name= varCurrentTheme).Light))
      },
      Hex: {
        Primary: If(varDarkMode,LookUp(colCustomThemes, Name= varCurrentTheme).Light,LookUp(colCustomThemes, Name= varCurrentTheme).Primary),
        Light: If(!varDarkMode,LookUp(colCustomThemes, Name= varCurrentTheme).Light,LookUp(colCustomThemes, Name= varCurrentTheme).Dark),
        Medium: LookUp(colCustomThemes, Name= varCurrentTheme).Medium,
        Dark: If(!varDarkMode,LookUp(colCustomThemes, Name= varCurrentTheme).Dark,LookUp(colCustomThemes, Name= varCurrentTheme).Light)
      }
}})

Next Step

Would you like to go further and be able to replicate 99% of any website or application? Check SVG Icons post, adapted to your own Theme Colors.

And remember that no application is perfect without the right icons.

Conclusion

With the help of the post and the application on Github you have the basis to maintain your own Design System.

Not just for you as power user but for your user to select their favorite theme colors.

Custom Themes for PowerApps