javascript: detect if XP or Classic windows theme is enabled

Question

Is there any way to detect which windows XP theme is in use?

I suspect that there is no specific api call you can make, but you may be able to figure it out by checking something on some DOM element, ie feature detection.

Another question: does the classic theme even exist on windows vista or windows 7?

edit - this is my solution:

function isXpTheme() {
  var rgb;
  var map = { "rgb(212,208,200)" : false,
              "rgb(236,233,216)" : true };
  var $elem = $("<button>");
  $elem.css("backgroundColor", "ButtonFace");
  $("body").append($elem);
  var elem = $elem.get(0);
  if (document.defaultView && document.defaultView.getComputedStyle) {
    s = document.defaultView.getComputedStyle(elem, "");
    rgb = s && s.getPropertyValue("background-color");
  } else if (elem.currentStyle) {
    rgb = (function (el) { // get a rgb based color on IE
    var oRG =document.body.createTextRange();
    oRG.moveToElementText(el);
    var iClr=oRG.queryCommandValue("BackColor");
      return "rgb("+(iClr & 0xFF)+","+((iClr & 0xFF00)>>8)+","+
                  ((iClr & 0xFF0000)>>16)+")";
    })(elem);
  } else if (elem.style["backgroundColor"]) {
    rgb = elem.style["backgroundColor"];
  } else  {
    rgb = null;
  }
  $elem.remove();
  rgb = rgb.replace(/[ ]+/g,"")
  if(rgb){;
    return map[rgb];
  }
}

Next step is to figure out what this function returns on non-xp machines and/or figure out how to detect windows boxes. I have tested this in windows XP only, so vista and windows 7 might give different color values, it should be easy to add though.

Here is a demo page of this in action:

http://programmingdrunk.com/current-projects/isXpTheme/

Answer 1

Interesting question. The only thing that comes to mind is checking the size of a default button. It is styled differently in both themes, and I suppose it has a different size. This could be half-way reliable if you give the button a fixed text size.

I'll start the XP virtual machine and check whether the sizes actually differ.

Update: They do differ.

Google "I'm feeling lucky" button

• in classic skin: 99 x 23.75 (sic!) pixels
• in XP skin: 97 x 21.75 pixels

A second, less reliable approach that comes to mind is giving an element a CSS system colour and then parsing the resulting computed colour. In classic mode, the ButtonFace property will have a specific shade of grey and I think a different one in the default skin. Again, would have to be tested.

Update: they differ, too.

ButtonFace CSS system colour

• in Windows classic skin: #D4D0C8
• in XP skin: #ECE9D8

Obviously, both approaches will break if the user did any customization to colours and/or font sizes. The font size approach is the more reliable IMO, as there are fewer people playing around with that.

You would, of course, have to have comparison tables for all Windows generations, as presumably, the values for classic and default skin will differ.

Answer 2

just to give a starting point look for IsThemeActive()