Search code examples
uwpwinjs

How to update a WinJS UWP app after the Windows system accent color changes

I have 2 variables, accentColor, and backgroundColor. backgroundColor updates as expected when I change the Windows settings from Light to Dark mode, but accentColor does not change when I choose a new Windows accent color.

var uiSettings = new Windows.UI.ViewManagement.UISettings(),
   accentColor = uiSettings.getColorValue(Windows.UI.ViewManagement.UIColorType.accent),
   backgroundColor = uiSettings.getColorValue(Windows.UI.ViewManagement.UIColorType.background);

Therefore I cannot update the UI to reflect the user's choice. Is this a bug? Is there a work around?

I am checking them on the visibilitychanged event.

document.addEventListener("visibilitychange", onVisibilityChanged);

This occurs on Windows 10 Pro 1709 build 16299.309 but surprisingly works properly on Windows 10 Mobile!

Solution

  • You could detect the accent color changed in the colorvalueschangedevent handler of UISettings instance. When you change the system' theme accent color and it will be fired.

    var uiSettings = new Windows.UI.ViewManagement.UISettings();
uiSettings.addEventListener("colorvalueschanged", onColorChanged);

function onColorChanged() {

    var accentColor = uiSettings.getColorValue(Windows.UI.ViewManagement.UIColorType.accent);

}