Power Apps  

Implementing Proper Theming in Power Apps Using OnStart (Beginner to Advanced Guide)

Introduction

In real-world Power Apps applications, especially enterprise-level apps, maintaining a consistent UI and branding is crucial.

One of the most common issues developers face is:

  • Inconsistent colors across screens

  • Hardcoded color values everywhere

  • Difficulty in updating UI themes

  • Poor maintainability

To solve this, Power Apps provides a powerful approach using:

👉 Centralized theming via the App OnStart property

In this article, we’ll learn how to implement scalable and reusable theming using variables and formulas.

Why Theming Matters in Power Apps

Without theming:

  • Every control has hardcoded colors

  • UI becomes inconsistent

  • Changes require manual updates everywhere

With theming:

  • Centralized control of UI

  • Easy updates

  • Cleaner formulas

  • Professional design

Real-World Scenario

You are building an enterprise app with:

  • Primary brand color

  • Secondary color

  • Background color

  • Button styles

  • Text styles

Instead of writing this everywhere:

Color: RGBA(0, 120, 212, 1)

We will centralize it.

Step 1: Define Theme in App OnStart

Go to:

App → OnStart

Create global variables for your theme:

Set(varTheme,
    {
        PrimaryColor: RGBA(0, 120, 212, 1),
        SecondaryColor: RGBA(32, 32, 32, 1),
        BackgroundColor: RGBA(245, 245, 245, 1),
        TextColor: RGBA(0, 0, 0, 1),
        ButtonTextColor: Color.White,
        BorderRadius: 8
    }
);

👉 This creates a theme object instead of multiple variables.

Step 2: Apply Theme in Controls

Now use theme variables in properties.

Example: Button Styling

Fill: varTheme.PrimaryColor
Color: varTheme.ButtonTextColor
RadiusTopLeft: varTheme.BorderRadius
RadiusTopRight: varTheme.BorderRadius

Example: Screen Background

Fill: varTheme.BackgroundColor

Example: Label Text

Color: varTheme.TextColor

Step 3: Hover and Pressed Effects

You can enhance UI using ColorFade():

HoverFill: ColorFade(varTheme.PrimaryColor, -10%)
PressedFill: ColorFade(varTheme.PrimaryColor, -20%)

👉 This gives a professional UI feel without extra effort.

Step 4: Dark Mode / Dynamic Theme (Advanced)

You can switch themes dynamically.

Example:

If(
    varDarkMode,
    Set(varTheme,
        {
            PrimaryColor: RGBA(255, 255, 255, 1),
            BackgroundColor: RGBA(30, 30, 30, 1),
            TextColor: Color.White
        }
    ),
    Set(varTheme,
        {
            PrimaryColor: RGBA(0, 120, 212, 1),
            BackgroundColor: RGBA(255, 255, 255, 1),
            TextColor: Color.Black
        }
    )
)

👉 Toggle using a button or switch.

Step 5: Use Theme in Components (Best Practice)

For scalable apps:

  • Create reusable components (buttons, headers)

  • Pass varTheme as input property

This ensures:

  • Consistency

  • Reusability

  • Clean architecture

Step 6: Avoid Common Mistakes

  • ❌ Hardcoding colors in controls

  • ❌ Creating too many individual variables

  • ❌ Not using a structured object

  • ❌ Ignoring hover/pressed states

Before vs After Theming

  • Hardcoded colors → Messy & inconsistent

  • No central theme → Difficult to maintain

  • Using varTheme object → Clean & scalable

  • Dynamic theming → Professional UI

Output

After implementing theming:

  • Consistent UI across app

  • Easy color updates

  • Reusable design system

  • Better user experience

Conclusion

Theming in Power Apps is not just about colors—it’s about:

  • Maintainability

  • Scalability

  • Professional design

Instead of repeating styles, always:

  • ✔ Define theme in OnStart

  • ✔ Use structured variables

  • ✔ Apply across all controls

  • ✔ Extend with dynamic themes

Summary

Centralized theming in Power Apps using the App OnStart property helps eliminate hardcoded styles and ensures a consistent, maintainable, and scalable UI. By defining a structured theme object and applying it across controls and components, developers can easily manage design changes, implement dynamic themes like dark mode, and create a more professional user experience.

Membership not found