Proposal: Colour Blending option for Light and Dark ThemeResources

[mdtauk]

Proposal: Colour Blending option for Light and Dark ThemeResources

Summary

Dynamically adjust default Light and Dark Theme colours, to blend in either the chosen Accent Color or Predominant Color taken from the Desktop Background.

Rationale

Within Microsoft, many products have made changes to how their app handles Themes in their UIs. As a result whilst most apps appear to be mostly consistent with their Light Theme styling, their Dark Themes are inconsistent, and give the impression of an unpolished and inelegant design.

Common changes I have noticed:

• Apps move away from Pure Black and sometimes from Pure White for surfaces. This mostly affects the Dark Theme, where pure black is avoided.
• Elevation, which introduces hierarchy and structure through shadows, are much less effective with Pure Black backgrounds.
• Office's Win32 apps offer both Black and Dark Gray theme options, but even Black avoids pure black everywhere except the Title Bar
• Office, Fabric, and FastDNA projects - all created by Microsoft - have avoided using neutral grey colours for their UI controls and designs - instead opting for a warmer tone. These have all come about after the initial Light and Dark themes were devised.

Scope

Capability	Priority
This proposal would be an option in Settings users can toggle	Could
This proposal will allow developers to override their theme resources as they presently can	Should
This proposal will not introduce more than Light and Dark themes	Won't

Important Notes

Whatever algorithm is implemented to define the colours, it needs to take into account Contrast Ratios.

Open Questions

The exact approach to deriving colours is up to those implementing, I have included my approach I took for the examples included

Examples and Thinking

I have been putting some thought into this, and am happy to say I took my inspiration from both Apple's macOS Mojave release and developer resources - as well as Google's Material Design Dark Mode and Theming documentation.

Blended Theme Proposal and Methodology

Blended Light and Dark Theme colours - Example 1

Blended Light and Dark Theme colours - Example 2

[mdtauk]

MacOS first introduced this idea of tinting the system theme colours to match the wallpaper. Some didn't like it so they added a toggle to stick to neutral Dark theme colours too.

Android 12 is rumoured to be getting this feature as well, as part of a new theme engine.

[mdtauk]

Whilst this has not been implemented at the OS level as a setting - I think the surprise drop of the new Mica material in WinUI 3.0 covers a lot of this.

https://docs.microsoft.com/en-us/windows/apps/design/style/mica

I guess we finally got our Fauxcrylic!