#PowerPlatformTip 22: 'Change Fill & Color'

TL;DR: With modern controls, create a custom theme in the Themes pane and reference App.Theme.Colors.Primary. For classic controls, define your palette once as a named formula in App.Formulas and reference it everywhere. Replace existing hardcoded colors with the Search pane’s replace function.

💡 Challenge

You want to change the colors of a canvas app, but they are hardcoded as RGBA(...) or ColorValue(...) in dozens of Fill, Color and BorderColor properties. Changing them control by control is slow, and the next color change starts all over again.

✅ Solution

Keep colors in one place and reference that place everywhere. Modern themes do this for you. For classic controls, a named formula holds the palette. The Search pane replaces the colors that are already hardcoded.

🔧 How It’s Done

1. Modern controls: use a theme

🔸 Turn on Settings > Updates > New > Modern controls and themes.

🔸 On the app authoring menu, select Themes > Add a theme > Create custom theme. Pick the primary (seed) color, a font and, if needed, palette overrides. Select Create: the theme is applied and sets App.Theme.

🔸 Modern controls follow the theme automatically. In classic controls or custom formulas, reference the theme’s color slots:

// Button.Fill (classic control)
App.Theme.Colors.Primary

🔸 Copy a theme as YAML (More options > Copy theme) and paste it in another app (Add a theme > Paste theme) to reuse your brand colors.

2. Classic controls: one named formula for the palette

🔸 Select App in the tree view and open the Formulas property:

Brand = {
    Primary: ColorValue("#2dd4bf"),
    Accent:  ColorValue("#0f766e"),
    Text:    ColorValue("#1f2937")
};

🔸 Use Brand.Primary, Brand.Accent and Brand.Text in Fill, Color and BorderColor. A named formula needs no App.OnStart, is available on every screen and can’t be changed by a Set somewhere in the app.

3. Replace the colors that are already hardcoded

🔸 Open the Search pane (Search icon on the app authoring menu) and search for the hardcoded value, for example RGBA(0, 120, 212, 1).

🔸 Use the pane’s replace option to swap all matches for Brand.Primary (or App.Theme.Colors.Primary) in one step.

🔸 For a single property, the formula bar has its own find and replace.

🎉 Result

The color scheme of the whole app comes from one place. A rebrand is one change in the theme or in App.Formulas, not a hunt through every control.

🌟 Key Advantages

🔸 One source for all colors, for every screen and control.

🔸 Themes as YAML make the palette reusable across apps.

🔸 Named formulas need no startup code and can’t be overwritten by accident like a variable.

ℹ️ Note: Power Fx has no ReplaceAll function. Substitute(text, old, new) replaces text inside a string at runtime, it doesn’t change your app’s formulas. For swapping colors in formulas, use the Search pane.

🎥 Video Tutorial

🛠️ FAQ

1. Is there a ReplaceAll function to swap all colors at once?

No. To change colors in your formulas, use the replace function of the Search pane. At runtime, colors should come from App.Theme or a named formula, so a single change updates the app.

2. Can I apply a modern theme to an app that uses classic controls?

Yes. When you select a modern theme in an app with classic controls, Power Apps asks whether to apply it to them and sets formulas on their color properties that reference the theme. Select Undo if you don’t like the result. Classic controls won’t look exactly like modern ones, because they aren’t based on Fluent UI v9.

3. Can I save my palette for use in other apps?

Yes. Copy a custom theme as YAML and paste it into the other app, or copy your Brand named formula into that app’s App.Formulas.

🔗 Related Tips

🔸 #PowerPlatformTip 55: ‘Picking Colors’ - practical picks for the actual color values you’ll put into your theme.

🔸 #PowerPlatformTip 86: ‘Free Power Apps Icons’ - pair your new theme colors with free, recolorable SVG icons.