Button to change background colour of webpages

I'd like to create a toolbar for FireFox consisting of one button to change the background colour of the currently viewed webpage. At present I have a button "Background Colour", when I click on it I have set up a popup message to say "Code for Changing Background Colour goes here". Ideally I'd like to use a colorpicker for the user to select their colour choice, and then the selected colour be applied as the background colour of the webpage. To change the background colour of a page would it simply be a case of placing a css sheet over the top of the currently viewed page? And if so any ideas on how i do this? Thanks!!

We can use a technique similar to that in www.xul.fr/javascript/dynamic-images.html for changing the background. the background property could be changed directly.

var x = document.getElementsByTagName("body").item(0);        
x.setAttribute("background", color);

Thanks for that! If I were to add more buttons to my toolbar to change the text colour and / or the font colour / size, are there similar functions available to use? Thanks again!!

For the color, the CSS property is color, to replace the background property, and for the size, it is font-size.

whenever i insert the following code into my js file referenced by the toolbar, and install the toolbar none of the toolbar functions accessed by any of the buttons work, any ideas what's going wrong? or what i could try?? i can't see what i'm doing wrong. Thanks guys!

function BGColour(event)
{
var currentDocument = getBrowser().getBrowserForTab( getBrowser ).selectedTab ).contentDocument;
currentDocument.body.style.backgroundColor = "magenta";
BrowserReload();
}

Fixed ;) now for the text colour, size and font buttons.