Full Code
Now, Put back the Total Code in The File and Change the Color Scheme Dropdown TADA ….
<!-- To change this template, choose Tools | Templates and open the template in the editor. --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Dynamically Changing Color Scheme</title> <link href="blue.css" type="text/css" title="pagestyle" rel="stylesheet" id="pagestyle"/> <script type="text/javascript"> // Setting Cookie function setCookie(c_name,value,expiredays) { var exdate=new Date(); exdate.setDate(exdate.getDate()+expiredays); document.cookie=c_name+ "=" +escape(value)+ ((expiredays==null) ? "" : ";expires="+exdate.toUTCString()); } // Get value stored in Cookie function getCookie(c_name) { if (document.cookie.length>0) { c_start=document.cookie.indexOf(c_name + "="); if (c_start!=-1) { c_start=c_start + c_name.length+1; c_end=document.cookie.indexOf(";",c_start); if (c_end==-1) c_end=document.cookie.length; return unescape(document.cookie.substring(c_start,c_end)); } } return ""; } // This function will fire on body load function loadTheme() { var c_val=getCookie("colorscheme"); if (c_val!="") document.getElementById("pagestyle").href=c_val+'.css'; } // This call ensures to load the Previously selected color Scheme by User loadTheme(); // This function will fire on change of Dropdown function changeTheme() { var c_val=document.getElementById("changescheme").value; document.getElementById("pagestyle").href=c_val+'.css'; setCookie("colorscheme",c_val,30); } </script> </head> <body> <select name="changescheme" id="changescheme" onchange="changeTheme()"> <option value="orange">Orange</option> <option value="yellow">Yellow</option> <option value="blue">Blue</option> <option value="black">Black</option> </select> <h1>This is Heading</h1> </body> </html>
You can also view the working demo Here colorscheme
