Themes overview

Article
02/15/2022
2 minutes to read

In Power Apps portals, the Enable basic theme feature is set to Off. When you turn on this feature, you can use default themes called Presets. You can also create copies of the preset themes for additional customization.

In this article, you'll walk through the basic themes feature. For advanced theme customization, see Edit CSS.

Enable basic themes for existing portals

Sign in to Power Apps.
Select Apps from the left navigation pane, and then select the portal.
Select More Commands (...), and then select Edit.
Select Themes from the left navigation pane, and then turn on the Enable basic theme toggle.

Change theme for your portal

You can set any existing theme in your portal to a default theme.

Sign in to Power Apps.
Select Apps from the left navigation pane, and then select the portal.
Select More Commands (...), and then select Edit.
Select Theme from the components pane.
Select any default theme from the available presets (in our example, we selected Green).

The selected theme is applied to your portal.

Applied theme.

Note

After changing theme or theme properties such as colors inside the Studio, select Browse website to view the changes in a separate browser tab. If you make multiple changes using this method and switch to different pages inside the browser, the stale browser cache may cause your browser to show theme changes that aren't latest. If this happens, use Ctrl+F5 to reload the page.

Create a new theme

Sign in to Power Apps.
Select Apps from the left navigation pane, and then select the portal.
Select More Commands (...), and then select Edit.
Select Theme from the components pane.
Select New Theme.

Edit theme details

You can update theme name, description, color, and other typography settings in Power Apps Studio.

Sign in to Power Apps.
Select Apps from the left navigation pane, and then select the portal.
Select More Commands (...), and then select Edit.
Select Theme from the components pane.
Select the theme that's currently applied, or select a new theme from the presets. Selecting a theme opens the details pane on the right side of your workspace.

Edit theme details such as name, description, and color for different areas.

Color option	Affected area
Primary	Button and link colors.
Header	Header background color.
Header menu text	Text color for the header menu.
Header menu hover	Background color of menu items when they're hovered over.
Body background	Background color of the body section.
Footer background	Background color for the footer.
Footer text	Footer text color.

Save and publish the changes.

Copy a preset theme

Sign in to Power Apps.
Select Apps from the left navigation pane, and then select the portal.
Select More Commands (...), and then select Edit.
Select Theme from the components pane.
Select the theme from presets that you want to copy, select ..., and then select Customize.
Update the theme details as described in the preceding section, and then save the theme.

Sass variables

Sass is a stylesheet language with fully CSS-compatible syntax. When you enable the basic theme feature, you can use Sass variables instead of values to configure theme colors.

For example, if you want the Header color to be 25 percent lighter than the Primary color, you can use the following value instead of a specific color:

lighten($primaryColor, 25%);

Sass example.

You can use the following Sass variables with basic themes:

Color option	Sass variable name
Primary	`$primaryColor`
Header	`$headerColor`
Header menu text	`$headerMenuTextColor`
Header menu hover	`$headerMenuHoverColor`
Body background	`$bodyBackground`
Footer background	`$footerColor`
Footer text	`$footerTextColor`

Sass variable order

Sass variables work from top to bottom. You can set the Header color to lighten($primaryColor, 25%);. But, you can't set the Primary color to lighten($headerColor, 25%); because Header is below Primary in the list of color options.

Basic theme considerations

You can't have two themes with the same theme name or the same theme file name.
Any color value you enter manually must be for a valid color.
Changing the CSS for preset themes isn't supported.
The recommended theme foreground and background color contrast ratio is 4.5:1, for accessibility.

Next steps

Edit theme CSS