Search code examples
javascriptcsswinjs

How can I use the user's background color?


I am writing a WinJS app and would like to integrate the current user's selected background and accent colors.

I would prefer a way to use them right in the CSS, but using JS is alright as well.


Solution

  • This actually isn't supported, by design.

    The principle is that because there isn't all the usual chrome like title bars that typically differentiates between system functions and app functions, the color theme is used instead.

    That is, the system color scheme exclusively identifies UI that's coming from the system itself, such as consent dialogs. Apps are not given access to the theme to prevent confusion and also prevent apps from attempting to mimic the system.

    In short, apps should have their own design theme that's independent of the system theme and is always consistent for that app. For example, Facebook and Twitter have their own distinctive colors, for example, and this becomes important when apps appear in system UI like the Share charm, so that they're visually identifiable.

    This is certainly a change from the way things were done on the desktop, when apps were expected to follow the system theme. But that's no longer true with Store apps.