Brand a control

Completed

If a built-in Microsoft Power Apps theme doesn’t match your app’s intended look and feel, you can customize many control properties. Adjusting properties such as Fill, HoverColor, and BorderColor significantly alters a control’s appearance. Additionally, Power Apps supports custom font configuration.

Power Apps allows multiple color input methods. You can specify color using RGBA values, hexadecimal codes, or standard HTML color names via Color.[your selected color]. These custom color values can then be reused across your app. The following lists describe the most common color-related properties for controls.

Typical properties

These apply when the control isn't being interacted with:

• Fill - the control’s background color

• Color - the text color

• BorderColor - the color of the control's border

• BorderStyle - the border style (solid, dashed, dotted, or none)

Hover properties

These properties take effect when a user hovers over the control with a mouse:

• HoverFill - the background color on hover

• HoverColor - the font color on hover

Disabled properties

These apply when a control’s DisplayMode is set to Disabled. By default, Power Apps uses a light gray color scheme to indicate the control exists but isn't currently interactive.

• DisabledFill - the background color when disabled

• DisabledColor - the text color when disabled

Theme-controlled color settings

There are some color settings that can't be altered and are specific to the theme that you select. For example, there's the Date picker control.

If you add a Date picker control to your app, you'll notice that you have the option to change the Color property of the font, the BorderColor, BorderStyle, BorderThickness, and also the Fill color. All these options are available in the command bar interface.

You can adjust these and other properties via the formula (fx) input field. A couple that you'll find in the changeable properties include the IconBackground and IconFill (the color of the calendar icon and font). However, internal calendar colors remain theme-controlled in Preview mode.

In the image of the Date picker control shown below, we've set the Color to display red text, adjusted the BorderColor to green, made the BorderStyle dashed, and changed the IconBackground to green. When we placed the app in Preview mode, the calendar color still shows the blue theme that is currently applied to our app.

Font property

Any control that displays text supports the Font property. The command bar provides a dropdown of 14 standard fonts supported in Power Apps. You can also enter the name of any supported font manually. For example, to use the Algerian font, type "Algerian" into the Font property.

Apply custom branding across your app

Power Apps recognizes color as a data type. You can define colors or fonts as variables and reference them throughout your app. A recommended approach is to use named Formulas, accessible when selecting App in the Tree view panel.

To define branding colors for the Contoso Coffee Machines app:

1. From the Home Screen, select App in the Tree view panel. The StartScreen property appears in the formula drop-down.

   

2. Open the property dropdown and find/select Formulas.

   

3. Contoso Electronics has three primary colors including a dark teal color and a light teal color along with white. Since Power Apps has already defined white, we only need to define the other two colors. These colors can be defined for Power Apps as:

   nfBrandingLight = RGBA(3, 131, 135, 1);

   nfBrandingDark = ColorValue("#334A5F");

   Here, nf stands for "named formula". These values can now be used across your app wherever color is specified.

   

4. In our app, set the Fill property of your header rectangles to nfBrandingDark.

5. Set the Fill property of button controls to nfBrandingLight.

To simplify reuse, once a control’s appearance matches your branding, copy it to a hidden screen and use it as a template throughout your app.