Im using the following code to change the color scheme of a website...

<img src="images/bg_green_box.gif" alt="" onclick="document.getElementById('bg_css').href='b g_green.css'" />
<img src="images/bg_blue_box.gif" alt="" onclick="document.getElementById('bg_css').href='b g_blue.css'" />
<img src="images/bg_peach_box.gif" alt="" onclick="document.getElementById('bg_css').href='b g_peach.css'" />

...with this between the head tags...

<link id="bg_css" rel="stylesheet" href="bg_green.css" type="text/css" />

... problem is the default color scheme, bg_green.css, will be loaded again once the user clicks on another page of the website. Is there a way for the site to remember which scheme was chosen as the user navigates through the site?

If you are using "pure" client side code, your best bet to make it work across pages is to set a cookie, and read it when creating the link tag.

If you have a server side language, then store the data in the user's session and generate the appropriate link tag.

Problem Solved. Used the following...

<script type="text/javascript">
//<![CDATA[

window.onload = function(){
    if(document.cookie.match(/UseCss=(\w+)/) != null){
        document.getElementById('bg_css').href = 'bg'+RegExp.$1+'.css';
    }
    else{
        document.getElementById('bg_css').href = 'bg_green.css';
    }
}

function ChangeCss(toWhich){
    document.cookie = 'UseCss='+toWhich+';';
    document.getElementById('bg_css').href = 'bg'+toWhich+'.css';
}

//]]>
</script>