Changing Site Background on button (and carrying it over to all pages on site) i'm trying to create a drupal site where under the logo, there would be three options visisble (light, dark, color), and once the user clicks on one of them, the site background will change. 

now i know that this is easy to do with javascript (button, changing css background-image element)

but, how can i carry it over so that if the user clicks on a link on the site, the background-image stays the same without revolting to default?

i couldn't find any resources on how to do it, but i would gladly appreciate all of your help and anyone else on the interwebs with the same idea :)
You could change the background with JavaScript and also save that preference in the user's Local Storage - which is basically a cookie that doesn't get sent to the server. It gets erased when cookies get erased. 

First you need a JavaScript function to check that LocalStorage is available. Here is the function I use, cribbed from Stack Overflow:

function localStorageTest(){
  var test = 'test';
  try {
    localStorage.setItem(test, test);
    localStorage.removeItem(test);
    return true;
  } catch(e) {
    return false;
  }
}


You'll throw an exception if the localStorage object is not available (e.g. if cookies are completely disabled), so that's why the try/catch. 

Then you need to check for a preference when the page loads. I'm using jQuery here:

if (localStorageTest()) {
  var bgcolor = localStorage.getItem('bgcolor');
  $('#page').css('background-color', bgcolor);
}


Finally, some code to set the preference - assuming here we are setting the same color as the button. You could use another attribute on the element to store the value. jQuery again:

$('#button').click(function() {
  var bgcolor = $(this).css('background-color');
  $('#page').css('background-color', bgcolor);
  if (localStorageTest()) {
    localStorage.setItem('bgcolor', bgcolor);
  }
};


Just to add some Drupal to this answer, there is a Local Storage module that doesn't quite do this yet, but could potentially work if you set up a custom form and send the color choice as an AJAX form submit.

Also consider the Session Cache API module if you are going to elaborate on this example - it won't do what this example does, but it can help perform similar tasks. 

I haven't tested this code, so there may be errors - consider it at least a roadmap to accomplishing the task.