第一步，下载好Styleswitcher，把其原理弄清楚。
1、先看一下JS方法的代码
01.<script type="text/javascript">02.function styleswitch(mode, setstyle){03.var i, a;04.var stylepath = './style/';05.// setting the path to the CSS directory06.var cookstyle = Cookie.get('Stylesheet');07.// getting current cookie value for the stylesheet08.if (cookstyle == false ) {09.for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {10.if(a.getAttribute("rel").indexOf('style') != -111.&& a.getAttribute("media").indexOf('screen') != -112.&& a.getAttribute("title")13.// find default stylesheet, which is defined in the head section of the document14.) {15.cookstyle = a.getAttribute("title");16.Cookie.set('Stylesheet', cookstyle, {duration:365, path:"/"});17.//set the default stylesheet as cookie value18.}19.}20.}21. 22.switch (mode) {23.case 'set' :24.new Asset.css(stylepath + setstyle +'.css', {id: setstyle});25.// loads the new stylesheet26.Cookie.set('Stylesheet', setstyle, {duration:365, path: "/"});27.// sets the stylesheet into a cookie value28.break;29.case 'noset' :30.new Asset.css(stylepath + setstyle +'.css', {id: setstyle});31.// only apply the new stylesheet, without saving it in a cookie value32.break;33.default :34.new Asset.css(stylepath + cookstyle +'.css', {id: cookstyle});35./ sets the current cookie value as active stylesheet36.break;37.}38.return null; 39.}40.window.addEvent('domready', styleswitch);41.</script>注意上述代码的
第4行var stylepath = './style/'; 和第9行的if(a.getAttribute("rel").indexOf('style') != -1 ，这两处的sytle均要换成Joomla的模板CSS目录，也就是：
1.<?php echo $this->baseurl ?>/templates/jk_fm101/css/2、再看body部分的表现代码：
01.<body>02.<a href="#" onclick="styleswitch('set', 'style1'); return false;">Style1</a>03.// Erzeugen eines Link-Elements04.// Beim Anklicken wird die Funktion05.// Styleswitch ausgelöst06. 07.<a href="#" onclick="styleswitch('set', 'style2'); return false;">Style2</a>08.// Zweiter Style09. 10.<a href="#" onclick="styleswitch('set', 'style3'); return false;">Style3</a>11.// Dritter Style12.</body>非常简单的引用，三个鼠标点击事件分别产生切换style1.css，sytle2.css和style3.css，onclick="styleswitch('set',style1') 这里的set作者给的解释便是支持cookies，如果希望不支持cookies，就将三个set换成noset即可！
第二步，装到Joomla模板上！
1、通常模板主要文件是/templates/jk_joomlask/index.php （将jk_joomlask替换成你使用的模板名），打开该文件，添加JS调用，由于Joomla模板开发时有个声明为：<jdoc:include type="head" />，即引用了mootools1.12等多个库，所以无需额外添加mootools1.12的调用，剩下的就是在</head>前面加入修改路径后的代码：
01.<script type="text/javascript">02.function styleswitch(mode, setstyle){03.var i, a;04.var stylepath = '<?php echo $this->baseurl ?>/templates/jk_joomlask/css/';05.// setting the path to the CSS directory06.var cookstyle = Cookie.get('Stylesheet');07.// getting current cookie value for the stylesheet08.if (cookstyle == false ) {09.for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {10.if(a.getAttribute("rel").indexOf('<?php echo $this->baseurl ?>/templates/jk_joomlask/css/') != -111.&& a.getAttribute("media").indexOf('screen') != -112.&& a.getAttribute("title")13.// find default stylesheet, which is defined in the head section of the document14.) {15.cookstyle = a.getAttribute("title");16.Cookie.set('Stylesheet', cookstyle, {duration:365, path:"/"});17.//set the default stylesheet as cookie value18.}19.}20.}21. 22.switch (mode) {23.case 'set' :24.new Asset.css(stylepath + setstyle +'.css', {id: setstyle});25.// loads the new stylesheet26.Cookie.set('Stylesheet', setstyle, {duration:365, path: "/"});27.// sets the stylesheet into a cookie value28.break;29.case 'noset' :30.new Asset.css(stylepath + setstyle +'.css', {id: setstyle});31.// only apply the new stylesheet, without saving it in a cookie value32.break;33.default :34.new Asset.css(stylepath + cookstyle +'.css', {id: cookstyle});35./ sets the current cookie value as active stylesheet36.break;37.}38.return null; 39.}40.window.addEvent('domready', styleswitch);41.</script>2、制作三个样式表green.css、blue.css、yellow.css，内容分别填入 body{background:green;}、body{background:blue;}、body{background:yellow;}，注意一定要去除template.css中的body背景色，否则template.css的背景色优先级较高，可能不会产生样式切换效果，做好了三个样式表保存在/templates/jk_joomlask/css/下（将jk_joomlask替换成你使用的模板名），三个样式表还需要设定其中一个为默认样式，否则初次进入网站无默认背景色！以green.css为默认背景色示例，在样式引用
1.<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/jk_joomlask/css/template.css" type="text/css" />下方加入
1.<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/jk_joomlask/css/green.css" title="green" type="text/css" media="screen" />这里的title="green"是关键
3、做完JS，就需要在body部分加入表现代码（以支持cookies为例，不支持cookies请将下述代码中的set换成noset即可）
1.<a href="#" onclick="styleswitch('set', 'green'); return false;">green</a>2.<a href="#" onclick="styleswitch('set', 'yellow'); return false;">yellow</a>3.<a href="#" onclick="styleswitch('set', 'blue'); return false;">blue</a>4、注意事项，该mootools方法是基于mootools1.11，兼容mootools1.12，所以Joomla后台中的mootools upgrade不可开启，开启后mootools的版本会变成mootools1.24，另外测试支持cookies时一定要清除浏览器的cookies。
