Changing background of body when themeroller theme changed

Changing background of body when themeroller theme changed

Hi, Would like to update the body css background to match (more or less) the selected theme from themeroller.

I have tried this;
  1.         function updateBodyBackground() {
  2.             var bgColor = colorToHex($(".ui-widget-header:first").css("background-color"));
  3.            $("body").css('background-color', bgColor);            
  4.         };
Using this function I found on Haack's site;
  1.         function colorToHex(color) {
  2.             if (color.substr(0, 1) === '#') {
  3.                 return color;
  4.             }
  5.             var digits = /(.*?)rgb\((\d+), (\d+), (\d+)\)/.exec(color);
  6.     
  7.             var red = parseInt(digits[2]);
  8.             var green = parseInt(digits[3]);
  9.             var blue = parseInt(digits[4]);
  10.     
  11.             var rgb = blue | (green << 8) | (red << 16);
  12.             return digits[1] + '#' + rgb.toString(16);
  13.         };
Then I try to apply it via the themeroller option of 'onSelect' like this;
  1.                 $('#switcher').themeswitcher({ expires: 365, path: '/', loadTheme: "sunny", cookieName: 'my_site_name-jquery-theme-ui', onSelect: updateBodyBackground });
The problem is it seems to be 'behind' one. Meaning if you pick Sunny, then pick PepperGrinder, on the select of PepperGrinder the Sunny background is applied. Seems the only way I can get it to 'sync' is by picking the theme from the themeroller twice.

Any ideas?