|
| 1 | +--- |
| 2 | +title: "Use modern themes | MicrosoftDocs" |
| 3 | +description: Learn how to change the colors of the app header in model-driven apps with the modern look. |
| 4 | +ms.custom: "" |
| 5 | +ms.date: 10/11/2023 |
| 6 | +ms.reviewer: "matp" |
| 7 | +ms.suite: "" |
| 8 | +ms.tgt_pltfrm: "" |
| 9 | +ms.topic: "how-to" |
| 10 | +author: "jasongre" |
| 11 | +ms.subservice: mda-maker |
| 12 | +ms.author: "jasongre" |
| 13 | +search.audienceType: |
| 14 | + - maker |
| 15 | +--- |
| 16 | + |
| 17 | +# Use modern themes |
| 18 | + |
| 19 | +Model-driven apps with the [modern, refreshed look for model-driven apps](../../user/modern-fluent-design.md) provide updated styling aligned to the Microsoft Fluent 2 design system. As part of the updated styling, makers can modify the colors used by the app header. Because this modern refreshed look comes with a new theming system, [classic theming](create-themes-organization-branding.md) isn't honored. In this article, you learn about the styling overrides available with the modern, refreshed look and how to implement them for your organization. |
| 20 | + |
| 21 | +> [!NOTE] |
| 22 | +> Modern themes currently only support customizing the app header. |
| 23 | +
|
| 24 | +## Modify the app header colors |
| 25 | + |
| 26 | +With the [modern, refreshed look enabled](../../user/modern-fluent-design.md#turn-on-the-new-look) in the app, makers can modify the colors used by the app header to align with their personal or organizational branding. To accomplish this, you encapsulate the desired colors into an XML resource, use an app setting to point to this web resource, and then verify the color changes match expectation. |
| 27 | + |
| 28 | + > [!NOTE] |
| 29 | + > This functionality is available in build 9.4.23094 or later version. |
| 30 | +
|
| 31 | +### Overview of the XML resource to use for app header colors |
| 32 | + |
| 33 | +The first step to modifying the app header styling is to create an XML file with your various color selections. Later, you'll create a web resource using the XML file. |
| 34 | + |
| 35 | +The following styling options for the app header are available: |
| 36 | + |
| 37 | +- `Background` – The background color of the app header. This element must be defined for any changes to take effect. |
| 38 | +- `Foreground` – The text color of the app header. If this isn't specified, the system attempts to calculate an appropriate color that has sufficient contrast to the provided background color. |
| 39 | +- `BackgroundHover` – The background color of buttons on the app header when they're hovered over. If no value is specified, the system calculates a color based on the background color. |
| 40 | +- `ForegroundHover` – The text color of buttons on the app header when they're hovered over. If no value is specified, the system attempts to calculate an appropriate color that has sufficient contrast to the backgroundHover color. |
| 41 | +- `BackgroundPressed` – The background color of buttons on the app header when they're pressed. The defaulting logic is the same as backgroundHover. |
| 42 | +- `ForegroundPressed` – The text color of buttons on the app header when they're pressed. The defaulting logic is the same as foregroundHover. |
| 43 | +- `BackgroundSelected` – The background color of buttons on the app header when they're selected. The defaulting logic is the same as backgroundHover. |
| 44 | +- `ForegroundSelected` – The text color of buttons on the app header when they're selected. The defaulting logic is the same as backgroundHover. |
| 45 | + |
| 46 | +Your XML file should be formatted as follows: |
| 47 | + |
| 48 | +```xml |
| 49 | +<AppHeaderColors |
| 50 | +// Required color |
| 51 | +background=”000000” |
| 52 | + |
| 53 | +// Optional colors |
| 54 | +/> |
| 55 | +``` |
| 56 | + |
| 57 | +### Example XML for a modern theme |
| 58 | + |
| 59 | +As an example, this XML specifies a green background color for the app header with white text, with darker background colors for the various button interaction states. For optimal usability, we recommend specifying different color values for each state. |
| 60 | + |
| 61 | +```xml |
| 62 | +<AppHeaderColors |
| 63 | +//Required color |
| 64 | + background="#12783F" |
| 65 | + |
| 66 | + //Optional colors |
| 67 | + foreground="#FFFFFF" |
| 68 | + backgroundHover="#165A31" |
| 69 | + foregroundHover="#FFFFFF" |
| 70 | + backgroundPressed=”#0F1C12” |
| 71 | + foregroundPressed="#FFFFFF" |
| 72 | + backgroundSelected="#153D23" |
| 73 | + foregroundSelected="#FFFFFF" |
| 74 | +/> |
| 75 | +``` |
| 76 | + |
| 77 | +### Create the web resource |
| 78 | + |
| 79 | +1. Using a text or XML editor, save the XML that is used to create the web resource. [Example XML for a modern theme](#example-xml-for-a-modern-theme) |
| 80 | +1. Sign into [Power Apps](https://make.powerapps.com/), select **Solutions** on the left navigation pane, and then create a **New solution**. |
| 81 | +1. Select **Solutions** on the left navigation pane, and then create a **New solution**. |
| 82 | +1. Select **New** > **More** > **Web resource**. |
| 83 | +1. In the New web resource property pane, enter the following values: |
| 84 | + - **Display name**: Enter a display name, such as *XML for modern theming*. |
| 85 | + - **Name**. Enter the unique name for the web resource. |
| 86 | + - Type: **Data (XML)** |
| 87 | +1. Select **Choose file**, browse to and select the XML file you created earlier with the theme. |
| 88 | +1. Select **Save**. |
| 89 | + |
| 90 | +### Apply custom app header colors to apps in your environment |
| 91 | + |
| 92 | +After you’ve selected your colors and created the XML resource, follow these steps to enable this app header styling for all the apps in your environment that have the “New look” enabled. |
| 93 | + |
| 94 | +1. In the solution you used to [create the web resource](#create-the-web-resource), select **Add existing** > **More** > **Setting**. |
| 95 | +1. Type *Override* in the **Search** box, select **Override app header color**, select **Next**, and then select **Add**. |
| 96 | +1. In the solution, select **Override app header color**, and then select **Edit** on the command bar. |
| 97 | +1. On the right **Edit Override app header color** properties pane, select **Setting environment value** and enter the unique name of your web resource you created earlier. |
| 98 | +1. Select **Save**. |
| 99 | +1. Select **Publish all customizations** on the command bar. (This command appears when no components in the solution are selected). |
| 100 | + |
| 101 | +With the example colors above, the app header should look like this after refreshing or playing the app. |
| 102 | +:::image type="content" source="media/greenappheader-oct2023.png" alt-text="Green app header in a model-driven app" lightbox="media/greenappheader-oct2023.png"::: |
| 103 | + |
| 104 | +### Verifying new app header colors |
| 105 | + |
| 106 | +After publishing your new app header colors, you'll want to validate the app header visuals, including all the button states, to ensure everything appears as you expect and there are sufficient contrast ratios for accessibility. You should verify the following color choices: |
| 107 | + |
| 108 | +- The desired colors are shown for the app header at rest and for each button interaction state. |
| 109 | +- There's a minimum of a 4.5:1 contrast ratio between foreground and background colors for the rest state and each button interaction state. |
| 110 | + |
| 111 | +## See also |
| 112 | + |
| 113 | +[Modern refreshed look](../../user/modern-fluent-design.md) |
| 114 | + |
| 115 | +[!INCLUDE[footer-include](../../includes/footer-banner.md)] |
0 commit comments