Custom Altus Theme

To learn more about this feature please review the Microsoft instructions.

Selecting Colours

Clients often have one or two primary brand colours that align with their logo. These are usually good choices for a header colour. For a simple theme, you can select one colour, and the system will generate additional palette colours that ensure readability and contrast.

To find the right colour to use, consider these options:

• Ask the client if they have a preferred header and content colour scheme, or request a brand document for guidance.
• If you have access to their intranet, check for a brand document.
• Use a tool like the eyedropper in Paint to pick a colour from their logo or website.

Sometimes, the client may prefer the default theme, or a neutral colour such as black, white, or grey.

For more advanced theming, you can apply multiple colours and even different fonts. If you select just one colour, you can preview the generated palette using the Fluent Theme Designer.

---

Applying the Theme

Microsoft provides a detailed guide for applying custom themes here.

Here are the high-level steps:

Creating the Theme Definition

The theme definition is an XML file that holds configuration options for theming. One theme definition is applied to the whole environment, including all model-driven apps. Each environment can have its own theme definition if needed.

Example XML:

 <CustomTheme basePaletteColor="#604878" lockPrimary="true" vibrancy="2" hueTorsion="13" font="Inter, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif">
 <AppHeaderColors background="#604878" foreground="#FFFFFF" backgroundHover="#4D4C4C" foregroundHover="#FFFFFF" backgroundPressed="#2F2D2D" foregroundPressed="#FFFFFF" backgroundSelected="#616161" foregroundSelected="#FFFFFF"/>
 </CustomTheme>

• The basePaletteColor is used to generate colours for UI elements like buttons and links.
• The background value in AppHeaderColors sets the app's header colour.

For a full list of options, see the Microsoft documentation.

Give this file a name relevant to the client and save it.

---

Setting the Theme

1. Create a solution in the development environment called Environment Theme.
2. Select Add Existing → More → Web Resource and choose the OOTB web resource Altus Custom Theme (sensei_CustomTheme.xml). Add it to the solution.
3. Apply your changes to the XML file and save it as a new file.
4. Edit the web resource, select Choose file, and upload your custom XML file.
5. In the solution, select Publish or Publish all customisations to apply the changes.

Note: For a simple header colour change, you only need to modify the AppHeaderColors background value. For a full experience, also update basePaletteColor.

You should now see Altus in the new theme colours!

Each environment can have a different colour scheme by using a separate XML file for each. The Environment Theme solution should be unmanaged in all environments. An unmanaged layer will be applied on top of the OOTB item.

---

Adding a Logo

To complete the look, you can add a logo to replace the “Power Apps” branding text.

Acquiring the Logo

Supported formats include PNG and SVG. To get a suitable logo:

• Ask the client for an image file, ideally with a transparent background.
• Use the client’s website and inspect element to save a copy of their logo.

For best results, ensure the image has some empty space around the border. For SVGs, you can adjust the viewBox attribute.

Applying the Logo

1. Add the logo as a web resource to the environment theme solution.
2. Open the environment's advanced settings.
3. Go to Customisations → Theme.
4. Select the CRM Default Theme and create a copy.
5. Select the web resource for the logo and set the logo tooltip (e.g., “Altus”).
6. The colour values here apply to the classic theme, which is no longer used after the 2025 Wave 1 release of Power Apps. To set colours, use the steps in the previous section.
7. Select Publish Theme to set this as the default, displaying the logo for all apps in the environment.