Add support for custom color and photo themes

[grochocki]

Problem Statement Calculator is great example of Fluent design, but it doesn't feel like my Calculator.

Evidence or User Insights

• Adding more color options is a top requested feature on Feedback Hub
• Other products, like SwiftKey and the new Windows Terminal, support themes, which are quite popular with users.

Proposal Add support for custom color and photo themes in Calculator.

Goals

• Users can select a custom color theme.
• Users can select an image as their theme.

Non-Goals

• Fine-grained personalization of individual UI elements

Low-Fidelity Concept

Requested Assignment I'm just suggesting this idea. I don't want to implement it.

[ghost]

This pitch looks like it has everything it needs for review. In the meantime, we'll keep this idea open for discussion so the community has the chance to provide feedback. Check out our New Feedback Process for more info on the user-centered process we follow for new feature development.

[ghuntley]

👋 https://calculator.platform.uno/?theme=Pink 👀

[mdtauk]

I think for colour themes, it would need to be a Hue slider (without brightness so the resulting colour can be nudged within the safe contrast ratio)

[grochocki]

Here are a few resources for reference:

• Color design guidelines
• Accessibility text requirements guidelines

[MicrosoftIssueBot]

This is your friendly Microsoft Issue Bot. I've seen this issue come in and have gone to tell a human about it.

[skyanchor]

I personally don't like this idea. It's so complicated and not harmonious with the theme color of the OS. Different tints of theme color, polished buttons with delicate depth effects and something new brought by the latest fluent design language would be my wishes.

[rudyhuyn]

I remember reading on this GitHub that the UI of this application was nicknamed Panda because everything is black/white. Adding colors could really make the application more appealing.

However, something important that I learned in the past with my own applications (some had 3 themes + customizable colors) is that when you allow users to customize their application (color, themes, etc...) it becomes very difficult to modify the UI and add features for several reasons:

• The default design will have to remain monochrome: it will be very difficult in the future to add a splash of colors in the application, icons will need to stay monochrome, a colored banner/popup won't be possible, etc. Even displaying an error message in red will be problematic.
• Impossible to remove: users will have a hard time accepting that the feature disappears. This is normal, it became their application, so any new design will have to maintain the same level of customization.
• More difficult to follow the evolution of Fluent: If the Fluent design evolves and starts recommending colored icons for example, it will be difficult to do it without killing the feature.

Only a minority of users will customize the application, a large majority will continue to see the default design. So, you need to assess what would be more beneficial for users: a richer default UI (with colored icons, for example) or a monochrome UI that some users will customize. For the Terminal app, it's an easy decision, but for a richer application like the Calculator, there are many trade-offs impacting the present and the future.

[mdtauk]

The image background I think is a step too far, but as long as the OS supports applying colour to the Taskbar and Flyouts - monochrome is probably the way to go.

I don't use that option myself, as I prefer the Light and Dark Acrylic - but it is as you say, getting rid of that feature will be a pain point.

As for coloured Icons (Office uses a variation of the MDL 2 Icons, but as a coloured font) if Calculator were to go in this direction - I would rather the whole OS moves in step.

A problem for developers using a coloured font, is that the current APIs do not support customising the palette of colours these icon fonts use, and so developers will have less flexibility than with the current mono colour Icon font, and just changing the font colour.

As for the Calculator UI in general, I think there are many ways the app's design could be made more pleasant, and easier to use. But it should remain in step with the OS design, as well as consistent with all First Party apps.

Microsoft has a bad reputation for inconsistent UI, and as long as every app, and every design team can go their own way with controls or design - this will only worsen.

[ghost]

We reviewed the pitch and would love to explore this idea further! The pitch is a great start, but there are still some open questions. I am moving this issue into planning to iron out some of those details and I created calculator-specs/themes to track progress. A human will follow up with some feedback on your pitch shortly. Keep in mind that not all ideas that make it into the planning phase are guaranteed to make it to release. For more information on next steps, check out our spec workflow.

[grochocki]

@rudyhuyn and @mdtauk - we think you both raise some really good points. Going to add a few thoughts here, but also, the concerns you raised are exactly why we felt it is important to iron out the details in a more comprehensive spec.

The default design will have to remain monochrome

I am not convinced this is entirely true. It is fair to say that any future design changes would need to consider what a monochrome theme might look like, but for accessibility, we cannot use color alone to convey functionality. As a result, I could imagine a world where the default design has a more complex color palette, but monochrome variants can coexist.

Only a minority of users will customize the application, a large majority will continue to see the default design.

While it is certainly true that the majority of users will be content with the default theme, adding "more colors" and "the ability to customize elements of the Calculator UI color" are both near the top of the list of feature suggestions in Feedback Hub.

The image background I think is a step too far, but as long as the OS supports applying colour to the Taskbar and Flyouts - monochrome is probably the way to go.

I agree that the image might be too much, but I also did not want to constrain thinking at this stage of planning. I think these are the types of details we'll need to figure out.

[rudyhuyn]

could imagine a world where the default design has a more complex color palette, but monochrome variants can coexist.

This is exactly what I had in mind.

Other questions to consider:

• do we want to support a light theme version when the the lightness (HSL) of the custom color is high?
• should we limit the choice to a curated palette of color (similar to Windows 10 settings) or use a color picker?

[Chips1234]

• should we limit the choice to a curated palette of color (similar to Windows 10 settings) or use a color picker?

I think that having a full colour picker is always better since you can offer users more freedom of choice

[mdtauk]

The initial version of WinUI 3.0 wont have support for Acrylic using the HostBackdrop setting.

Not sure if Windows will allow this app to somehow bypass this limitation, or if Calculator will wait for 3.1/3.2 where full Acrylic is restored. I did a search for UI design related issues, and did not see it mentioned.

[grochocki]

The initial version of WinUI 3.0 wont have support for Acrylic using the HostBackdrop setting.

We have been working with the WinUI team to understand the implications and options for Calculator, since we rely so heavily on the desktop acrylic effect. The timeline for Calculator adopting WinUI 3 is still TBD, so we have time to think through this more.

[mdtauk]

The initial version of WinUI 3.0 wont have support for Acrylic using the HostBackdrop setting.

We have been working with the WinUI team to understand the implications and options for Calculator, since we rely so heavily on the desktop acrylic effect. The timeline for Calculator adopting WinUI 3 is still TBD, so we have time to think through this more.

In app Acrylic will work in WinUI 3 - so if like the Mail and Calendar apps, you did use a background image - you could still Blur it, and use Acrylic for sidebars and context menus / flyouts.

Backdrop but no HostBackdrop.

If and when you do decide to revamp the UI, will you be designing it in the open, and providing concept designs which can be commented on and given feedback for, here in the GitHub repo?