You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
description: Learn how to change the colors of the app header with the new look.
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
4
ms.custom: ""
5
5
ms.date: 10/11/2023
6
6
ms.reviewer: "matp"
@@ -14,33 +14,33 @@ search.audienceType:
14
14
- maker
15
15
---
16
16
17
-
# Theme overrides
17
+
# Use modern themes
18
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. Because this modern refreshed look comes with a new theming system, [classic theming](create-themes-organization-branding.md) is not honored. In this article, you learn about the styling overrides available with the modern, refreshed look and how to implement them for your organization.
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 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) is not 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
20
21
21
## Modify the app header colors
22
22
23
-
With the modern, refreshed look enabled, you can modify the colors used by the app header to align with your personal or organizational branding. To accomplish this, you will encapsulate your desired colors into an XML resource, use an app setting to point to this web resource, and then verify the color changes match your expectation.
23
+
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.
24
24
25
25
> [!NOTE]
26
-
> This functionality is available in build 9.4.23094 and later.
26
+
> This functionality is available in build 9.4.23094 or later version.
27
27
28
28
### Create an XML resource with your app header colors
29
29
30
30
The first step to modifying the app header styling is to create an XML file with your various color selections and add it as a web resource.
31
31
32
32
The following styling options for the app header are available:
33
33
34
-
-**Background** – The background color of the app header. This element must be defined for any changes to take effect.
35
-
-**Foreground** – The text color of the app header. If this is not specified, the system will attempt to calculate an appropriate color that has sufficient contrast to the provided background color.
36
-
-**BackgroundHover** – The background color of buttons on the app header when they are hovered over. If no value is specified, the system will calculate a color based on the background color.
37
-
-**ForegroundHover** – The text color of buttons on the app header when they are hovered over. If no value is specified, the system will attempt to calculate an appropriate color that has sufficient contrast to the backgroundHover color.
38
-
-**BackgroundPressed** – The background color of buttons on the app header when they are pressed. The defaulting logic is the same as backgroundHover.
39
-
-**ForegroundPressed** – The text color of buttons on the app header when they are pressed. The defaulting logic is the same as foregroundHover.
40
-
-**BackgroundSelected** – The background color of buttons on the app header when they are selected. The defaulting logic is the same as backgroundHover.
41
-
-**ForegroundSelected** – The text color of buttons on the app header when they are selected. The defaulting logic is the same as backgroundHover.
34
+
-**Background** – The background color of the app header. This element must be defined for any changes to take effect.
35
+
-**Foreground** – The text color of the app header. If this is not specified, the system will attempt to calculate an appropriate color that has sufficient contrast to the provided background color.
36
+
-**BackgroundHover** – The background color of buttons on the app header when they are hovered over. If no value is specified, the system will calculate a color based on the background color.
37
+
-**ForegroundHover** – The text color of buttons on the app header when they are hovered over. If no value is specified, the system will attempt to calculate an appropriate color that has sufficient contrast to the backgroundHover color.
38
+
-**BackgroundPressed** – The background color of buttons on the app header when they are pressed. The defaulting logic is the same as backgroundHover.
39
+
-**ForegroundPressed** – The text color of buttons on the app header when they are pressed. The defaulting logic is the same as foregroundHover.
40
+
-**BackgroundSelected** – The background color of buttons on the app header when they are selected. The defaulting logic is the same as backgroundHover.
41
+
-**ForegroundSelected** – The text color of buttons on the app header when they are selected. The defaulting logic is the same as backgroundHover.
42
42
43
-
Your XML file should be formatted as follows:
43
+
Your XML file should be formatted as follows:
44
44
45
45
```xml
46
46
<AppHeaderColors
@@ -51,6 +51,8 @@ background=”000000”
51
51
/>
52
52
```
53
53
54
+
### Example XML for a modern theme
55
+
54
56
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.
55
57
56
58
```xml
@@ -71,30 +73,40 @@ As an example, this XML specifies a green background color for the app header wi
71
73
72
74
### Create the web resource
73
75
76
+
1. Using a text or XML editor, save the XML that will be used to create the web resource. [Example XML for a modern theme](#example-xml-for-a-modern-theme)
74
77
1. Sign into [Power Apps](https://make.powerapps.com/), select **Solutions** on the left navigation pane, and then create a **New solution**.
78
+
1. Select **Solutions** on the left navigation pane, and then create a **New solution**.
79
+
1. Select **New** > **More** > **Web resource**.
80
+
1. In the New web resource property pane, enter the following values:
81
+
-**Display name**: Enter a display name, such as *XML for modern theming*.
82
+
-**Name**. Enter the unique name for the web resource.
83
+
- Type: **Data (XML)**
84
+
1. Select **Choose file**, browse to and select the XML file you created earlier with the theme.
85
+
1. Select **Save**.
75
86
76
87
### Apply custom app header colors to apps in your environment
77
88
78
89
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.
79
90
80
-
1. Select **Solutions** on the left navigation pane, and then create a **New solution**.
1. In the solution you used to [create the web resource](#create-the-web-resource), select **Add existing** > **More** > **Setting**.
82
92
1. Type *Override* in the **Search** box, select **Override app header color**, select **Next**, and then select **Add**.
83
93
1. In the solution, select **Override app header color**, and then select **Edit** on the command bar.
84
-
1. On the right **Edit Override ap header color** properties pane, update **Setting environment value** to the name of your web resource.
94
+
1. On the right **Edit Override ap header color** properties pane, update **Setting environment value** to the unique name of your web resource you created earlier.
85
95
1. Select **Save**.
86
-
1.**Publish all customizations**.
96
+
1.Select **Publish all customizations** on the command bar. (This command appears when no components in the solution are selected).
87
97
88
98
With the example colors above, the header should look like this after refreshing or playing the app.
89
99
:::image type="content" source="media/greenAppHeader-Oct2023.png" alt-text="Green app header in a model-driven app" lightbox="media/greenAppHeader-Oct2023.png"::: <!-- This media file is missing -->
90
100
91
101
### Verifying new app header colors
92
102
93
-
After publishing your new app header colors, you will 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:
94
-
- The desired colors are shown for the app header at rest and for each button interaction state.
95
-
- There is a minimum of a 4.5:1 contrast ratio between foreground and background colors for the rest state and each button interaction state.
103
+
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:
104
+
105
+
- The desired colors are shown for the app header at rest and for each button interaction state.
106
+
- There is a minimum of a 4.5:1 contrast ratio between foreground and background colors for the rest state and each button interaction state.
0 commit comments