Question

I am trying to change the body background color when the user changes the theme of the page using the jQuery UI Themeselector.

I have tried this

function updateBodyBackground() {
    $("body").css('background-color', $('.ui-widget-header:first").css("background-color") + ' !important;');
}

Then I call it on document ready (to set initial theme background) and I set it to the onClose event for the ThemeSelector like this;

$function() {
    updateBodyBackground();
    $('#switcher').themeswitcher({ expires: 365, path: '/', loadTheme: "sunny", onClose: updateBodyBackground });
}

Doesn’t do anything in Firefox, seems to be behind one on change in Chrome and the selector doesn’t seem to work at all in IE8.

Any suggestions on how to change the background to better match the selected jQuery UI Theme?

Thanks!

Answer 1

Buggy fix using timeout…

find function updateCSS() inside themeswitchertool.js

After
$(“head”).append(cssLink);

Add the below line increase timeout if it still doesn’t work…

Insert
setTimeout(“$(‘body’).css(‘background-color’, $(‘.ui-widget-header:first’).css(‘background-color’))”, 2000);