It may be useful sometimes to provide your visitors with the option to change the appearance of your website. Perhaps you may want to provide theme support for your site. Or you may simply want to provide a bigger font size version of your site for older users who may not be able to read the small-sized text you use by default. This article describes how you can use JavaScript to dynamically change the cascading style sheets, or CSS, of your website.

Here we go;

1st put your css files in ./css directory like

./css/theme1.css

./css/theme2.css

./css/theme3.css

Then put below code in your head tag.

<script>
   var StyleFile = "theme" + document.cookie.charAt(6) + ".css";
 
   document.writeln('<link rel="stylesheet" type="text/css" href="css/' + StyleFile + '">');
</script>

After that u can make style changer buttons

      <div id="styleswitcher">
            <ul>
                <li><a href="javascript: document.cookie='theme='; window.location.reload();" title="Default" id="defswitch">d</a></li>
                <li><a href="javascript: document.cookie='theme=1;'; document.cookie='theme=1; path=/;'; window.location.reload();" title="Blue" id="blueswitch">b</a></li>
                <li><a href="javascript: document.cookie='theme=2'; document.cookie='theme=2; path=/;'; window.location.reload();" title="Green" id="greenswitch">g</a></li>
                <li><a href="javascript: document.cookie='theme=3'; document.cookie='theme=3; path=/;'; window.location.reload();" title="Brown" id="brownswitch">b</a></li>
            </ul>
        </div>