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.