Create theme for model driven apps

I believe there are some constraints that are likely incompatible with EDS. Basically we're only able to set colors for different types of UI elements and texts. We have little control over how these are combined resulting in some compromise we have to explore.

Documentation provides some information about the model driven app properties: https://learn.microsoft.com/en-us/dynamics365/customerengagement/on-premises/developer/customize-dev/query-and-edit-an-organization-theme?view=op-9-1#edit-and-publish-theme-data

There are API queries that can return (and set) the values for theme entities in an organization:

note: "Organization URI" in this context is mapped to the dataverse environment, not to be confused with tenant. e.g. https://edsprod.crm4.dynamics.com/ this indicates that every environment will have their own theme settings. See Theme entity reference for more info.

EDS Prod themes as json

Suggestion

We can expect power platform to align with the Fluent Design system, a clear indication of this for model driven apps can be seen in this blog post showcasing a preview of the "new look for model driven power apps":

At the heart of the updates to the model driven app experience is a new look that is based on the Microsoft Fluent design system, already in use across Microsoft in apps like Word, PowerPoint, Outlook, Teams and Azure. This new look aligns core concepts, like sharing, with other Microsoft products, making it easier for users to learn and use.

I believe the better option is to leverage the Fluent UI theme designer as a compromise. Creating a theme by using the Moss Green 100 as primary color on black text and white background generates the following theme:

{
  "themePrimary": "#007079",
  "themeLighterAlt": "#f0f9fa",
  "themeLighter": "#c4e7e9",
  "themeLight": "#96d2d6",
  "themeTertiary": "#46a7ae",
  "themeSecondary": "#108088",
  "themeDarkAlt": "#00656c",
  "themeDark": "#00555b",
  "themeDarker": "#003f43",
  "neutralLighterAlt": "#f8f8f8",
  "neutralLighter": "#f4f4f4",
  "neutralLight": "#eaeaea",
  "neutralQuaternaryAlt": "#dadada",
  "neutralQuaternary": "#d0d0d0",
  "neutralTertiaryAlt": "#c8c8c8",
  "neutralTertiary": "#595959",
  "neutralSecondary": "#373737",
  "neutralSecondaryAlt": "#373737",
  "neutralPrimaryAlt": "#2f2f2f",
  "neutralPrimary": "#000000",
  "neutralDark": "#151515",
  "black": "#0b0b0b",
  "white": "#ffffff"
}

The theme designer validates accessibility for the produced theme slots. But if we are to adjust the theme to bring it closer to EDS, we need to somehow do this validation in another way. The theme designer creates these values from "Primary color", "Text color" and "Background color", but do not offer validation for tweaking the theme values directly, but perhaps there are some tools for this as well.

equinor / design-system

Create theme for model driven apps #1969

Suggestion