jQuery: Detect Windows XP Theme

I started building a jquery dropdown widget, and i ran into a problem where i was not styling the dropdown arrow correctly because i developed the widget in the classic theme, but the xp theme styled widgets differently.

Clearly i needed to be able to assign different classes to my widget depending on the user's theme if i wanted the widget to look natural to that user.

The problem is that the user's theme setting is not something available through a javascript api call, nor is it in the user agent string. I used a javascript technique called feature detection to get this information. Here is how it works:

We create a button element and assign it background color called 'ButtonFace'. This is a special system color that is different depending on what theme you use. Next we need to get the computed color of the button element, and remove the element from the DOM. The idea is that a user in XP theme will have a slightly different colored button than a user in the classic theme.

I used some jQuery to make my life easier, but it would be easy to port this code to any other framework, or do it in plain javascript.


The code above plugin will create a new jquery.support object $.support.windowsTheme which contains a name member that will be set to 'xp' if user is using the XP windows theme, 'classic' if they are using the classic theme, and undefined if they are using a custom theme, or another operating system.

To see this code in action look at this demo page

For further updates to this code please visit the jquery plugin page

Caveats:

• This code does not check if the user is actually using windows, you would need to add that check yourself.
• I have tested this code in firefox 3.6 and IE6,7 on windows XP. This code should really be also tested on Vista and Windows 7.

See also:
It has come to my attention that someone has already done this before