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.
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.
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
- 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.
It has come to my attention that someone has already done this before