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 :)

2 Answers 2


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);
    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.


Try the Sweaver module

Sweaver offers a visual interface for completely changing your Drupal theme without knowing any CSS. Through a bar that sits at the bottom of your screen, you can change the fonts, colours, dimensions etc of all your design elements and see the changes real-time. If you are happy with the changes, you can easily save it as a revision to activate immediately or save for later.

Advanced users will find a highly pluggable and configurable system that allows full manipulation off the interface and extendability of the functionality.

Have a look on some similar modules

Flexible Colors - Flexicolor provides a flexible method for Drupal Designers to provide content administrators with ways to color text and backgrounds on different parts of the site.

DesignKit - DesignKit is a small API module lets themes provide options for customizing colors and images.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.