Centralize styling and font settings in Canvas Apps

#Issue

Business-requested font changes require updates in many controls throughout the Canvas App. This makes styling difficult to maintain and increases the chance that some headers, labels, or confirmation messages will be missed.

The recommended solution is to define the app's visual settings once, then bind related control properties to those settings. Keep separate style records for different purposes while still managing them from one central location.

#Recommended approach

Use these layers together:

1. App named formulas for centralized theme and style definitions.
2. Separate style records for form headers, form labels, and confirmation messages.
3. Reusable components or component libraries for controls that appear on multiple screens or in multiple apps.
4. Accessibility checks to ensure font size, contrast, and focus behavior remain usable after a style change.

For a single app, named formulas are usually the easiest starting point. For multiple apps, place the shared styles and controls in a component library.

#Beginner setup

#Step 1: Choose the supported font

Choose a font that is available and approved for your organization's apps. Record the font name and the minimum font sizes required for readability. Avoid using many different fonts because it makes the app harder to maintain.

Example font choices may include Font.'Segoe UI' or another font available in the Power Apps font list. Select the font from the formula bar instead of typing an unsupported name.

#Step 2: Create named formulas in App.Formulas

Select the App object, choose the Formulas property, and define centralized style records. The exact font names available in an environment may differ, so select the approved font from IntelliSense.

AppStyles = {
    FontFamily: Font.'Segoe UI',
    HeaderColor: ColorValue("#1F2937"),
    BodyColor: ColorValue("#374151"),
    MutedColor: ColorValue("#6B7280"),
    SuccessColor: ColorValue("#166534"),
    ErrorColor: ColorValue("#B91C1C"),
    SurfaceColor: Color.White,
    FocusColor: ColorValue("#005EA8")
};

FormHeaderStyle = {
    FontFamily: AppStyles.FontFamily,
    FontSize: 20,
    FontWeight: FontWeight.Semibold,
    Color: AppStyles.HeaderColor
};

FormLabelStyle = {
    FontFamily: AppStyles.FontFamily,
    FontSize: 14,
    FontWeight: FontWeight.Semibold,
    Color: AppStyles.BodyColor
};

ConfirmationMessageStyle = {
    FontFamily: AppStyles.FontFamily,
    FontSize: 14,
    FontWeight: FontWeight.Normal,
    Color: AppStyles.SuccessColor
}

Named formulas are calculated by Power Apps and can be referenced by controls throughout the app. If your Power Apps authoring experience does not expose App.Formulas, use an app-level style record initialized in App.OnStart as a fallback. Named formulas are preferred when available because they avoid repeatedly setting the same variable.

#Step 3: Connect controls to the style records

Select a control and set each visual property to the matching style value.

#Form header

Font = FormHeaderStyle.FontFamily
Size = FormHeaderStyle.FontSize
FontWeight = FormHeaderStyle.FontWeight
Color = FormHeaderStyle.Color

#Form label

Font = FormLabelStyle.FontFamily
Size = FormLabelStyle.FontSize
FontWeight = FormLabelStyle.FontWeight
Color = FormLabelStyle.Color

#Confirmation message

Font = ConfirmationMessageStyle.FontFamily
Size = ConfirmationMessageStyle.FontSize
FontWeight = ConfirmationMessageStyle.FontWeight
Color = ConfirmationMessageStyle.Color

Repeat this binding pattern for related controls. After that, a font or color change in AppStyles automatically flows to each control that references the shared style record.

#Step 4: Use a reusable styled component

If the same header, label, or confirmation message appears on several screens, create a component instead of styling each control separately.

For example, create a component named cmpFormHeader with:

• A text input property named HeaderText.
• A fill or background property if the header needs a configurable surface.
• A label inside the component whose Text property is cmpFormHeader.HeaderText.
• The label's font properties bound to FormHeaderStyle.

Example component formulas:

// Component label
Text = cmpFormHeader.HeaderText
Font = FormHeaderStyle.FontFamily
Size = FormHeaderStyle.FontSize
FontWeight = FormHeaderStyle.FontWeight
Color = FormHeaderStyle.Color

Use the component on screens like this:

cmpFormHeader.HeaderText = "Request details"

For controls shared by several apps, move the component into a Component Library. Update the library version, then update dependent apps when the organization approves a new style.

#Step 5: Keep styles separate by purpose

Do not use one generic text style for every control. Separate styles make future business changes safer:

FormHeaderStyle.FontSize
FormLabelStyle.FontSize
ConfirmationMessageStyle.FontSize

For example, a request to make form headers larger should change only FormHeaderStyle.FontSize. A request to make confirmation messages more prominent should change only ConfirmationMessageStyle.FontWeight or its color.

#Optional: support light and dark themes

If the app needs multiple themes, define a selected theme once and derive the style records from it:

AppTheme = {
    HeaderColor: If(varDarkMode, Color.White, ColorValue("#1F2937")),
    BodyColor: If(varDarkMode, ColorValue("#F3F4F6"), ColorValue("#374151")),
    SurfaceColor: If(varDarkMode, ColorValue("#111827"), Color.White)
};

Then reference AppTheme.HeaderColor and AppTheme.BodyColor from the style records. Keep the theme switch in one place and do not add separate theme logic to every control.

#What to avoid

• Do not hard-code Font, Size, Color, and FontWeight independently on every control.
• Do not use App.OnStart only to set dozens of unrelated style variables when named formulas are available.
• Do not copy and paste the same style formulas across screens.
• Do not change a shared style without checking all screens and components that use it.
• Do not use color alone to communicate success, warning, or error; include text, icons, or accessible status information.
• Do not use a font size below the organization's accessibility standard just to fit more text on a screen.
• Do not set a fixed width that causes the text to clip on mobile devices.

#Beginner implementation checklist

1. Choose one approved font.
2. Create AppStyles in App.Formulas.
3. Create separate records for FormHeaderStyle, FormLabelStyle, and ConfirmationMessageStyle.
4. Update one header, one label, and one confirmation message to use the records.
5. Confirm that the app still displays correctly.
6. Replace hard-coded style properties on the remaining related controls.
7. Convert repeated headers and messages into components.
8. Test the app on desktop, tablet, and mobile layouts.
9. Test keyboard focus, screen-reader labels, contrast, and readable text size.
10. Change the font in one location and verify that every intended control updates.

#Validation test

After centralizing the styles:

1. Change AppStyles.FontFamily to a second approved font.
2. Save and preview the app.
3. Confirm that form headers, form labels, and confirmation messages update according to their separate style records.
4. Confirm that controls not intended to change remain unchanged.
5. Check that text wraps correctly and is not clipped on a phone-sized screen.
6. Restore the approved production font before publishing.

#Additional information

• Canvas Apps render incorrectly on mobile devices
• Canvas App formulas
• Create and use component libraries
• Create accessible canvas apps