🎨 Modern Theming in Model-Driven Apps: Customize Your App’s Look!

The modern, refreshed look in Power Platform model-driven apps comes with a sleek Fluent 2 design system, bringing a fresh user experience. While classic theming is no longer supported, Microsoft has introduced modern themes, allowing makers to customize the app header with their own branding colors.

Although the customization options are limited to the app header, this small change can make a big difference in aligning apps with your organization’s branding! 🎨

---

🚀 Why Customize the App Header?

A custom theme in Power Apps enables you to:

✔ Align branding with corporate colors
✔ Improve user experience with consistent UI
✔ Make navigation easier with clear contrasts

Since this only affects the app header, it doesn’t interfere with business process flows, forms, or other UI components.

---

🛠️ Steps to Apply Custom Header Colors

To modify the app header, you need to:
✅ Create an XML resource with color definitions
✅ Upload it as a web resource
✅ Apply it to your environment settings

Let’s walk through the setup step by step! 🏗️

---

📝 Step 1: Create the XML Theme File

You need to define your color scheme in an XML file using the <AppHeaderColors> tag.

Example XML for a Green Theme 🌿

This XML defines a green app header with white text and custom button interaction colors.

<AppHeaderColors 
  background="#12783F"
  foreground="#FFFFFF" 
  backgroundHover="#165A31" 
  foregroundHover="#FFFFFF"
  backgroundPressed="#0F1C12"
  foregroundPressed="#FFFFFF"
  backgroundSelected="#153D23" 
  foregroundSelected="#FFFFFF"
/>

📌 Explanation:

• background: Main app header color
• foreground: Text color
• backgroundHover: Button hover background
• foregroundHover: Button hover text
• backgroundPressed: Button press background
• foregroundPressed: Button press text
• backgroundSelected: Active button background
• foregroundSelected: Active button text

---

📂 Step 2: Upload as a Web Resource

Now, let’s upload the XML theme to Power Apps.

1️⃣ Go to Power Apps → Solutions
2️⃣ Click New Solution → Give it a name
3️⃣ Click New > More > Web resource
4️⃣ Enter a display name (e.g., XML for modern theming)
5️⃣ Choose Type: Data (XML)
6️⃣ Upload your XML file
7️⃣ Click Save & Publish

🚀 Your theme XML is now stored as a web resource in Dataverse!

---

🎯 Step 3: Apply the Custom Theme to Your Environment

Once the web resource is uploaded, we need to apply it as a setting.

1️⃣ Open your solution in Power Apps
2️⃣ Click Add existing > More > Setting
3️⃣ Search for: Override app header color
4️⃣ Click Next > Add
5️⃣ Select Override app header color → Click Edit
6️⃣ Enter the unique name of your XML web resource (e.g., contoso_xmlfor-modern-theme)
7️⃣ Click Save
8️⃣ Publish all customizations

---

🔍 Step 4: Verify & Test the Theme

After publishing, refresh your browser tab to see the new header colors!

✅ Check all button states (hover, pressed, selected)
✅ Ensure text contrasts well with the background
✅ Make adjustments if necessary in the XML

---

📌 Real-World Example: Corporate Branding

Scenario: A company wants to align its CRM app with its branding.

✔ Brand Colors: Dark Blue Background, White Text
✔ Action Buttons: Lighter Blue when hovered, Gray when pressed

<AppHeaderColors 
  background="#0A3D91"
  foreground="#FFFFFF" 
  backgroundHover="#3366CC" 
  foregroundHover="#FFFFFF"
  backgroundPressed="#1C2E4A"
  foregroundPressed="#FFFFFF"
  backgroundSelected="#003366" 
  foregroundSelected="#FFFFFF"
/>

📌 Before & After:
🔵 Default: Light Blue Theme
🔵 Custom: Dark Blue, Consistent with Branding

---

🎨 Modern Themes: The Limitations

🚫 You cannot customize:
❌ Business Process Flows
❌ Buttons, Grids, or Forms
❌ Font Sizes or Text Alignment

⏩ Only the App Header is customizable for now.

---

🚀 Final Thoughts: Small Change, Big Impact

Although modern themes in Power Apps only affect the app header, it’s a powerful way to differentiate apps visually!

✔ Adds corporate branding
✔ Enhances user experience
✔ Requires no coding

📌 Future Expectations: Microsoft may expand theming beyond the header to include buttons, process flows, and other UI elements.

🔹 Try it now & brand your app today! 🎨