🔹 Implementing Themes in Canvas Apps – A Complete Guide

📌 Introduction

A theme in Power Apps ensures consistent colors, fonts, and styles across all screens and components. By implementing themes, you can:

✅ Enhance User Experience (UX)
✅ Ensure Consistency Across Screens
✅ Easily Modify the Look and Feel of the App

---

🔹 Step 1: Defining a Theme Using Variables

Instead of manually setting colors and fonts for each component, define a global theme using variables.

✅ Create a Global Theme on App Start

1️⃣ Select the App object in the Tree View
2️⃣ Set the OnStart property to define a theme variable:

Set(AppTheme, {
    PrimaryColor: RGBA(0, 122, 255, 1),  // Blue
    SecondaryColor: RGBA(255, 204, 0, 1), // Yellow
    BackgroundColor: RGBA(240, 240, 240, 1), // Light Gray
    TextColor: RGBA(0, 0, 0, 1), // Black
    FontFamily: "Segoe UI"
});

3️⃣ Click Run OnStart to apply the theme.

📌 Now, the theme variables are available throughout the app!

---

🔹 Step 2: Applying the Theme to Components

✅ Set Button Colors Dynamically
1️⃣ Select a Button
2️⃣ Set the Fill property:

AppTheme.PrimaryColor

3️⃣ Set the Color (Text Color) property:

AppTheme.TextColor

📌 Now, all buttons will use the theme color!

✅ Set Screen Background Color
1️⃣ Select a Screen
2️⃣ Set the Fill property:

AppTheme.BackgroundColor

📌 Now, all screens will have a consistent background!

✅ Set Font for All Labels
1️⃣ Select a Label
2️⃣ Set the Font property:

AppTheme.FontFamily

📌 Now, text across the app follows the same font!

---

🔹 Step 3: Creating a Theme Selection Feature

To allow users to switch themes dynamically, use a Dropdown or Toggle control.

✅ Add a Dropdown for Theme Selection

1️⃣ Insert a Dropdown (Insert → Dropdown)
2️⃣ Set Items property to:

["Light Theme", "Dark Theme"]

3️⃣ Set the OnChange property:

If(
    Dropdown1.Selected.Value = "Dark Theme",
    Set(AppTheme, {
        PrimaryColor: RGBA(33, 33, 33, 1), // Dark Gray
        SecondaryColor: RGBA(200, 0, 0, 1), // Red
        BackgroundColor: RGBA(20, 20, 20, 1), // Black
        TextColor: RGBA(255, 255, 255, 1), // White
        FontFamily: "Arial"
    }),
    Set(AppTheme, {
        PrimaryColor: RGBA(0, 122, 255, 1), // Blue
        SecondaryColor: RGBA(255, 204, 0, 1), // Yellow
        BackgroundColor: RGBA(240, 240, 240, 1), // Light Gray
        TextColor: RGBA(0, 0, 0, 1), // Black
        FontFamily: "Segoe UI"
    })
)

📌 Now, selecting “Dark Theme” will apply dark colors dynamically!

---

🔹 Step 4: Using Collections for Multiple Themes

For more flexibility, store themes in a collection.

✅ Define Theme Collection on App Start

ClearCollect(ThemeCollection, 
    { Name: "Light Theme", PrimaryColor: RGBA(0, 122, 255, 1), BackgroundColor: RGBA(240, 240, 240, 1), TextColor: RGBA(0, 0, 0, 1) },
    { Name: "Dark Theme", PrimaryColor: RGBA(33, 33, 33, 1), BackgroundColor: RGBA(20, 20, 20, 1), TextColor: RGBA(255, 255, 255, 1) }
);
Set(CurrentTheme, First(ThemeCollection));

✅ Allow Users to Select a Theme Dynamically
1️⃣ Insert a Dropdown
2️⃣ Set Items property:

ThemeCollection.Name

3️⃣ Set OnChange property:

Set(CurrentTheme, LookUp(ThemeCollection, Name = Dropdown1.Selected.Value))

4️⃣ Apply theme variables:

Button1.Fill = CurrentTheme.PrimaryColor
Screen1.Fill = CurrentTheme.BackgroundColor
Label1.Color = CurrentTheme.TextColor

📌 Now, users can select themes from a dropdown!

---

🔹 Step 5: Storing User Theme Preferences

✅ Save the Selected Theme in PowerApps Storage

Set(CurrentUserTheme, Dropdown1.Selected.Value);
SaveData(CurrentUserTheme, "UserTheme");

✅ Load User Preferences on App Start

Set(LoadedTheme, LoadData("UserTheme", true));
Set(CurrentTheme, LookUp(ThemeCollection, Name = LoadedTheme));

📌 Now, the app remembers the user’s last selected theme!

---

🔹 Step 6: Implementing Themed Components

✅ Creating a Reusable Themed Button Component

1️⃣ Click Insert → Select Component
2️⃣ Add a Button inside the component
3️⃣ Set the Fill property:

AppTheme.PrimaryColor

4️⃣ Save and reuse the Themed Button in multiple screens!

📌 Now, updating the theme will automatically update all buttons!

---

🔹 Step 7: Best Practices for Theming

✅ Use Global Variables for Easy Theme Management
✅ Ensure High Contrast for Readability
✅ Store User Preferences for a Personalized Experience
✅ Test the Theme on Different Devices
✅ Use Components to Apply Themes Consistently

---

🔹 Conclusion

Theming in Power Apps enhances branding, improves consistency, and makes UI management easier.

💡 Key Takeaways:
✅ Define global theme variables using Set().
✅ Apply themes dynamically to buttons, screens, and labels.
✅ Allow users to switch themes using dropdowns.
✅ Store and load user preferences for a personalized experience.
✅ Use components to ensure consistent theming.

Now, you’re ready to implement a professional theme in your Power Apps!

---