Years ago, I implemented an alternative style switcher I found at A List Apart. But, that solution is quite old now. It was published eleven years ago, back in 2001. Now, I’m looking for something a little bit more modern, perhaps a solution that uses JQuery. The idea is to let the readers choose a CSS stylesheet of their liking by simply clicking on a link. So, here’s the finished product. Demo.

The Stylesheet

I’m using two very simple stylesheets. The default stylsheet is called style.css. The alternate stylesheet is called black.css. This code belongs in the head section of the HTML page.

<pre lang="html">
<link href="style.css" rel="stylesheet" title="style" type="text/css"></link>
<link href="black.css" rel="alternate stylesheet" title="black" type="text/css"></link>

JQuery

We are using Google’s JQuery CDN by also linking it from within the head section of the HTML page. The second line is the Javascript code that actually performs the stylesheet switching. You can download the styleswitcher.js code directly from my website.

<pre lang="html">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="styleswitcher.js" type="text/javascript"></script>

CSS Switch

We will provide two links where readers can switch stylesheets from default to black and vice versa. The links are standard HTML links and using Javascript’s onclick event.

<pre lang="html">
<a href="#" onclick="setActiveStyleSheet('style');return false;">Default</a> |
<a href="#" onclick="setActiveStyleSheet('black');return false;">Black</a>

Putting It All Together

Here’s the final code.

<pre lang="html">


<title>CSS Switcher</title>
<link href="”style.css”" rel="”stylesheet”" title="”style”" type="”text/css”"></link>
<link href="”black.css”" rel="”alternate" stylesheet="" title="”black”" type="”text/css”"></link>
<script src="”//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js”"></script>
<script src="”styleswitcher.js”" type="”text/javascript”"></script>


<a false="" href="”#”" onclick="”setActiveStyleSheet(‘style’);return">Default</a> | 
<a false="" href="”#”" onclick="”setActiveStyleSheet(‘black’);return">Black</a>

</body></html><html><p>Demo</p>

Happy switching!

</html>