Get the Accent Color in a Windows Phone 8.1 JavaScript (WinJS) app

Windows Phone Themes

Windows Phone has since the start had the concept of themes, the theme is built up from either a dark or light background and a accent colour.

Sometimes it's a nice touch to have your app use the the theme the user has chosen. It can make for a less "jarring" experience and it can make your app fit in with the rest of the overall feeling of the phone.

HTML, CSS and JavaScript (WinJS)

As of Windows Phone 8.1, we have the option to write Windows Phone apps with HTML, CSS and JavaScript, which is what I'm doing at the moment :)

However when I started, I quickly realised that I didn't know how to get the phones accent colour in a Windows Phone JavaScript app! After some searching around on the web, I found that there's basically very litle to no information about this available at the point in time of me writing this.

So I went looking around a bit further and figured I'd share my findings :)

Dark or light theme

In a JavaScript app on Windows phone, there is per default a page called default.html, which is the main container for the application (if you use one of the by Microsoft provided templates and don't manually change this of course).
In default.html, you find this line:

<link href="/css/ui-themed.css" rel="stylesheet" />

With the comment <!-- At runtime, ui-themed.css resolves to ui-themed.light.css or ui-themed.dark.css based on the user’s theme setting. This is part of the MRT resource loading functionality. -->

In the css folder of the project, one can find both the files ui-themed.light.css and ui-themed.dark.css however looking in them, they just contain references to the "system files" containing the actual css code e.g. @import url(//Microsoft.Phone.WinJS.2.1/css/ui-dark.css);

To find the actual files, we have to look in the project references folder.

Visual studio solution explorer, showing the files in the reference folder

After some testing on the app, I found that for example buttons, got the accent color of the theme when being pressed and armed with this and the information about the theme css files, I went digging.

And then magic happens

Eventually I found the following in the ui-dark.css file:

Showing the background of active button set to the value Highlight

Here we can see that the backgound colour of an active button is "Highlight", which isn't any colour I know of (and I've been doing web development for quite a few many years), but with the help of the ever helpful Visual Studio editor, we can see that the preview of the colour, is actually the elusive accent colour!

And with the magic of Intellisense (Visual Studio autocomplete), we can also see that there's also a accompanying text colour called "HighlightText" to go with it.

There is a colour HighlightText to accompany the Highligt colour

So there we go, that's how we find the accent color (colour) in a Windows Phone 8.1 JavaScript app!

P.S If you're looking for how to do this in XAML and C# or VB look here: How to apply theme resources for Windows Phone