.jpg)
When did you not associate FedEx with the Castaway, a capital M with McDonald’s or an apple with the corporate giant? Poor Newton, he really did try but there we go. Branding, whether personal or professional, is very important. It empowers an identity and socializes its purposes. And if you do it right, it outlasts the test of time. Branding is a fine art really, combining principles of Marketing, Communications, UX, Design and many others.
Just like that, in Model-Driven Apps, we also need a sense of identity. Firstly, this drives the business brand as uniform across the Power Platform solution ecosystem. Secondly, it communicates to the user how important a consistent experience is. No eyerolls for User Experience, it is not only for the worthy. We must always remember that it does not magically appear by divine intervention.
This step-by-step guide came to life because I could not find, for the life of me, simple explanations to what each of the theme elements meant. There are plenty of guides to show you generally how to change themes, but this detail is Loki-missing for the new look. So hopefully these helps some other tortured souls out too.
So, get your hammers out, and let’s dig out that Asgardian theme hero that lies in you!
I'm sorry, but Earth is not closed today for basic questions
How many themes can I have?
Create as many as you want, you are the god of your app universe. However, only one theme can be active across the whole environment at a time. This will be called your default theme. You can switch to another theme whenever you wish. Always remember though, themes are not solution aware.
Where do I make these changes to themes?
There are a few different ways. We will cover here the Themes area which does not require custom code and is part of the old UI. Whilst there are modern themes for Model-Driven Apps, they are limited to the app header. The latter method uses XML web resources.
I am getting anxious, why does everything look so old?
Relax my fellow Asgardian, what you will see below is indeed part of the old UI. Whilst some of its components are not even making any difference (e.g. past Dynamics 365 V9), this still has some golden nuggets. Let’s focus on that god nectar for now.
What colors do I even use?
You will need to use hex codes for your preferred colors. If you are not familiar with hex codes, no worries! Many websites can help, like w3schools.com for general color-picking plus understanding some font and color contrast. Alternatively, you can also use hcolorcodefinder.com, where you can upload your own brand image and find the colors you need there. The most important matter is to consider the right contrasts so you are also championing accessibility and not just your brand.
Are there other use cases apart from branding?
Absolutely! Customizing your theme can also help you separate between environments e.g. DEV, SIT and PROD. This easy contrast separation could serve as another line of defense for human error potential in entering data to the wrong environment, or editing production by accident.
Tell me about all the theme goodness, my hammer is ready to forge
Go to the maker portal make.powerapps.com
Click on the Settings wheel at the top right and then click on Advanced Settings.
Expand the Settings dropdown in the ribbon and click on Customizations.
Click on Themes.
You will now see the Themes page. It includes all the existing themes in your environment and will indicate which has been chosen as the default one.
You can either clone an existing theme by selecting it and clicking CLONE to amend it. Alternatively, create + NEW to start from scratch.
With the clone method, you will see the copied theme’s title starting with “Copy of”. Select it and click EDIT.
Update the Theme Name e.g. Asgardians Theme.
There are two sections for the Navigation Bar and the UI Elements.
Whilst there is a lot going on with these elements, I will show you the 4 key ones which you will need in every Model-Driven App.
Navigation Bar Fill Color: This is the most distinct app element as it is at the top of every screen. In this case, I used #ffccff which is a light pink. You can check the color by clicking PREVIEW at the top. Some interesting behaviour to note here. When you set this element up, Title Text Color and Link and Button Text Color change too. You will have to change the latter manually after if needed.
Link and Button Text Color: This will change the color of your clickable record links e.g. the value for Account Name or Company in a lookup. For this one, I chose #cc9900 as a gold tone.
Accent Color: Another super important one for Model-Driven Apps. This element defines the colors for your Business Process flow. Let’s choose #9900ff which is a neon dark purple.
Main Color: It will show up when you select a line in a grid for example. For demonstration purposes, I set this one to the olive green #669900.
Once you have finished with your updates, click on PUBLISH THEME, and that you also PUBLISH your app in the maker portal.
Let’s see what we got by opening our model-driven app. This screen is an example of the fruit of our labour all in one go.
And that's it. You have successfully customized the theme of your Model-Driven App like a Valhalla boss! And do not worry, this is no sorcery. Just some simple tricks to get you started.
Comments