High contrast and theme support for images and img background colors

[andrewleader]

When hosts are in high contrast mode, or hosts have a "dark" or "light" theme, the author's images need to be able to change accordingly. Note this issue also tracks supporting the same for background color on images.

In Windows, this was solved by an addImageQuery option, that appended query string arguments to the https URL, so that servers could then decide what image to return if the parameters say it's in high contrast, etc. But leaving the title of this generic so that the issue tracks the feature, not the implementation.

Asks

• Action Center (need high contrast support)

Potential new solution

Use data-binding to host runtime properties to allow authors to change their images.

{ 
"type": "Image",
"url": "http://bing.com/sunny.png?high-contrast={{host.highContrastMode}}"
}

This allows authors to perform infinitely many different operations based on host runtime properties.

This means they can...

• Have the URL parameters in whatever format they want (name the query string how they wish, etc)
• Potentially swap out the URL completely
• Choose to not even use an image

This also works for image background colors, etc...

{ 
"type": "Image",
"url": "http://bing.com/sunny.png",
"backgroundColor": "{{host.theme == 'dark' ? '#ff00ff', '#f492e1'}}"
}

Suggested host properties

• highContrastMode
• windows-scale: Windows-specific scale factor based on DPI of device
• lang: Language
• theme: dark/light? Universal to all hosts

Potential old solution

Remote images need context about the client to ensure the image will look correct.

{ 
"type": "Image",
"url": "http://bing.com/sunny.png",
"includeQueryParameters": true
}

When includeQueryParametersis is true we will append query string params to the request that the client can use to generate properly.

Suggested query params:

ms-scale a scale factor that is recommended based on the DPI of the device
ms-contrast - whether the device/app is operating in a high-contrast mode
ms-lang - the language the device is in
ms-theme - Need to know light/dark theme?

Stretch goal:

ms-background-color - provide the background color of the Card so that the generated image can feel native with the rest of the content

Context from Notifications

https://msdn.microsoft.com/en-us/library/azure/mt587306.aspx

Set to true to allow Windows to append a query string to the image URI supplied in the tile notification. Use this attribute if your server hosts images and can handle query strings, either by retrieving an image variant based on the query strings or by ignoring the query string and returning the image as specified without the query string. This query string specifies scale, contrast setting, and language; for instance, a value of www.website.com/images/hello.png included in the notification becomes www.website.com/images/hello.png?ms-scale=100&ms-contrast=standard&ms-lang=en-us.

[paulcam206]

Not currently under consideration, but will reactivate should we decide to pursue.