MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

control sample, and switch between the different high contrast themes in the Personalization section of
Control Panel.
Of course, an app will almost always have some layout of its own, such as div elements with custom
color schemes and such defined in CSS. You’ll want to make sure you have appropriate style rules for
high contrast settings, for which we have the -ms-high-contrast media feature for media queries,
similar to -ms-view-state as we saw in Chapter 6. This feature can have the values of active (to apply its
rules to all high contrast themes), black-on-white (the white background theme), white-on-black (a
black background theme), and none. Clearly, none is implied when you don’t use -ms-high-contrast to
group any rules; active is also implied if you use -ms-high-contrast without a value. We’ll take a closer
look at all this in the next section.
As with view states, you can use media query listeners and matchMedia to pick up contrast themes in
code. This is useful for updating canvas elements, as we’ll see shortly. There is also the
-ms-high-contrast-adjust CSS style that indicates whether to allow the element’s normal CSS
properties to be overridden for high contrast. The default value, auto, allows this; the value of none will
prevent this behavior. Again, we’ll see more shortly.
Next, WinRT surfaces the current contrast settings through the
Windows.UI.ViewManagement.-AccessibilitySettings class. This has two properties: highContrast, a
Boolean indicating if high contrast is on), and highContrastTheme, a string with the name of the high
contrast color scheme. For the black on white theme this will be “High Contrast White”; for the other
three themes in Control Panel > Personalization the strings will be “High Contrast #1”, “High Contrast
#2”, and “High Contrast Black” (going from left to right). You can see these results through Scenario 2 of
the UI contrast and settings sample, where the code is very simple:
var accessibilitySettings = new Windows.UI.ViewManagement.AccessibilitySettings();
id("highContrast").innerHTML = accessibilitySettings.highContrast;
id("highContrastScheme").innerHTML = accessibilitySettings.highContrast ?
accessibilitySettings.highContrastScheme : "undefined";
WinRT also provides detailed color information through the
Windows.UI.ViewManagement.-UISettings.uIElementColor method. (Note the odd casing on
uIElementColor, an artifact of WinRT names projecting into JavaScript.) This returns a
Windows.UI.Color object for an element identified with a UIElementType. Scenario 1 of the UI contrast
and settings sample shows all these possibilities with a piece of instructive but otherwise uninspiring
code that I won’t duplicate here!
The AccessibilitySettings object also supports one event, highcontrastchanged, that lets you
know when high contrast is turned on or off; its eventArgs.target is the updated AccessbilitySettings
object. You can use this event to trigger any programmatic updates you need to make in your UI, such
as redrawing a canvas with high contrast colors if you’re not using a media query listener for that
purpose.
789