Revised for style and Acrolinx

Author: Mattp123

powerapps-docs/maker/model-driven-apps/create-themes-organization-branding.md

@@ -2,7 +2,7 @@
 title: "Change the color scheme or add a logo to match your brand  (contains video) | MicrosoftDocs"
 description: Learn how to change the color scheme for your app with Power Apps
 ms.custom: ""
-ms.date: 01/12/2021
+ms.date: 10/16/2023
 ms.reviewer: ""
 ms.suite: ""
 ms.tgt_pltfrm: ""
@@ -17,11 +17,11 @@ search.audienceType:
 ---
 # Use a theme to create a custom look for your app
 
-
-
 You can create a custom look and feel (a theme), for your app by making changes to the default colors and visual elements provided in the uncustomized system. For example, you can create your personal product branding by adding a company logo and providing table-specific coloring. A theme can be created by using the **Themes** area, without requiring a developer to write code. You can create, clone, change, or delete themes that are used in your environment. 
 
 > [!NOTE]
+> We recommend you use the new way to create themes in model-driven apps. More information: [Use modern themes](modern-theme-overrides.md)
+>
 > You can define multiple themes, but only a single theme can be active in an environment and is identified as the default theme. To make a theme active, you publish it.
   
 <a name="UseThemes"></a>   

powerapps-docs/maker/model-driven-apps/modern-theme-overrides.md

@@ -16,7 +16,7 @@ search.audienceType:
 
 # Use modern themes
 
-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.  
+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.  
 
 ## Modify the app header colors
 
@@ -31,14 +31,14 @@ The first step to modifying the app header styling is to create an XML file with
 
 The following styling options for the app header are available:
 
-- **Background** – The background color of the app header. This element must be defined for any changes to take effect. 
-- **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. 
-- **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. 
-- **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. 
-- **BackgroundPressed** – The background color of buttons on the app header when they are pressed.  The defaulting logic is the same as backgroundHover. 
-- **ForegroundPressed** – The text color of buttons on the app header when they are pressed.  The defaulting logic is the same as foregroundHover.
-- **BackgroundSelected** – The background color of buttons on the app header when they are selected.  The defaulting logic is the same as backgroundHover.
-- **ForegroundSelected** – The text color of buttons on the app header when they are selected.  The defaulting logic is the same as backgroundHover.
+- `Background` – The background color of the app header. This element must be defined for any changes to take effect.
+- `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.
+- `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.
+- `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.
+- `BackgroundPressed` – The background color of buttons on the app header when they're pressed.  The defaulting logic is the same as backgroundHover. 
+- `ForegroundPressed` – The text color of buttons on the app header when they're pressed.  The defaulting logic is the same as foregroundHover.
+- `BackgroundSelected` – The background color of buttons on the app header when they're selected.  The defaulting logic is the same as backgroundHover.
+- `ForegroundSelected` – The text color of buttons on the app header when they're selected.  The defaulting logic is the same as backgroundHover.
 
 Your XML file should be formatted as follows:
 
@@ -73,7 +73,7 @@ As an example, this XML specifies a green background color for the app header wi
 
 ### Create the web resource
 
-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)
+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)
 1. Sign into [Power Apps](https://make.powerapps.com/), select **Solutions** on the left navigation pane, and then create a **New solution**.
 1. Select **Solutions** on the left navigation pane, and then create a **New solution**.
 1. Select **New** > **More** > **Web resource**.
@@ -91,7 +91,7 @@ After you’ve selected your colors and created the XML resource, follow these s
 1. In the solution you used to [create the web resource](#create-the-web-resource), select **Add existing** > **More** > **Setting**.
 1. Type *Override* in the **Search** box, select **Override app header color**, select **Next**, and then select **Add**.
 1. In the solution, select **Override app header color**, and then select **Edit** on the command bar.
-1. On the right **Edit Override ap header color** properties pane, select **Setting environment value** and enter the unique name of your web resource you created earlier.
+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.
 1. Select **Save**.
 1. Select **Publish all customizations** on the command bar. (This command appears when no components in the solution are selected).
 
@@ -103,7 +103,7 @@ With the example colors above, the app header should look like this after refres
 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:
 
 - The desired colors are shown for the app header at rest and for each button interaction state.
-- 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.
+- 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.
 
 ## See also