Almanac
Microsoft/power-appsPower Platform

Consultant KB for Microsoft Power Apps: canvas apps, model-driven apps, Power Fx, data and connections, controls and UI, code and extensibility, mobile and offline, ALM and solutions, governance and security, licensing and performance, plus cross-cutting decision guides. Implementation notes, configuration decisions and the gotchas that bite on real projects. Populated by the daily author agent from the Power Apps release plans, docs repo and product blog, plus the author's own consultant notes.

power-apps/05-controls-and-ui/feature-themes-and-branding.md
feature-themes-and-branding.mdv1 · history
CurrentApplies to CanvasUpdated last monthSource Microsoft Learn ↗

What it does

Modern themes are style sets that drive colour, typography, borders and shadows across a canvas app from one place. You pick a seed colour and the platform generates a sixteen-slot palette from it; the active theme is exposed to formulas as App.Theme.

Key facts

  • Themes come with modern controls. They're behind the same Modern controls and themes app setting, and turning it on removes access to the classic theme picker unless you also enable Keep classic themes under Retired.
  • A custom theme is defined by a primary (seed) colour, a font, a hue torsion value, a vibrancy value, and optional per-slot colour overrides. Torsion and vibrancy both run from -100 to 100.
  • By default the sixteen-slot palette is generated with accessibility in mind. The Lock primary color toggle (preview) puts your exact seed colour in the middle slot instead and generates lighter and darker steps around it — Microsoft states the result might not meet contrast requirements.
  • Themes are copied and pasted as YAML. The structure is Font, BasePaletteColor, HueTorsion, Vibrancy and an optional ColorOverrides block with named slots like Lighter30 and Darker10.
  • Built-in themes can't be edited or deleted. Custom ones can.
  • Applying a theme sets App.Theme. In formulas you can reference App.Theme.Colors.Primary and similar, including on classic controls, to style them from the active theme by hand.
  • Font is a CSS font-family string, so the font has to actually be available and licensed wherever the app runs.

When to use / skip

Use a theme on anything that will exist for more than a quarter. The alternative is a hundred hardcoded hex values across screens, which is what you'll find in almost every inherited app and which nobody ever wants to change afterwards. Where themes fall short is estate-wide brand governance: there's no central theme library, no managed theme artefact, no push mechanism. If the client expects "update the brand once, all forty apps change", say plainly that the product doesn't do that yet.

Configuration decisions

  • Whether you build one house theme from the client's primary brand colour, or one per business area.
  • Whether to lock the primary colour for exact brand fidelity and take the contrast risk, or let the palette be generated for accessibility and accept a colour that's slightly off-brand.
  • Which colour slots you override by hand versus letting torsion and vibrancy do the work — fewer overrides is easier to maintain.
  • Where the canonical theme YAML lives: a repo, the solution documentation, or somewhere it will be lost.
  • Whether classic controls in existing apps get styled from App.Theme in formulas, or left alone.

Gotchas

  • Distribution is copy-paste YAML. Every app holds its own copy, so a brand change means opening every app. Treat the YAML file as the source of truth and the apps as copies.
  • Delete a custom theme and any Power Fx formula referencing it needs fixing by hand. Nothing tells you which formulas those are.
  • Applying a modern theme when classic controls are present writes formulas onto those controls' properties. The result won't match the modern controls exactly, because classic controls aren't Fluent v9.
  • Fonts specified in a pasted theme may not exist in the target tenant or on the user's device. Test the theme where it will actually run, not just in Studio.
  • Paste a theme whose name already exists and it gets renamed automatically rather than replacing the original. You end up with "Contoso Brand 1", "Contoso Brand 2" and no idea which is live.

Consultant notes

  • Get the brand hex values, the font and any accessibility commitment out of the client's marketing team before you build anything. Reworking a theme after screens are laid out is fine; reworking it after sign-off is a conversation about scope.
  • Manage the theme YAML in source control from day one. It's a small text file and it's the only artefact that makes an estate-wide brand refresh survivable.
  • Push back gently on exact brand-colour matching. The generated palette exists to keep contrast usable, and locking the seed colour trades that away.
  • If the client has a Microsoft 365 design language already, start from the closest built-in theme rather than from their print brand guide.

Worth revisiting if Microsoft ships a shared or solution-aware theme artefact, or when Lock primary color leaves preview.

Was this accurate?
Related
Modern controls05-controls-and-uiClassic and modern controls side by side05-controls-and-uiMobile Modern Look for Model-Driven Apps07-mobile-and-offlineModel-driven app designer02-model-driven-appsCanvas component libraries06-code-and-extensibilityAccessibility in canvas apps05-controls-and-ui