Change/Switch Stylesheets with jQuery Style Switcher Plugin

Style Switcher is a lightweight jQuery plugin which allows your visitor to switch between alternative themes/stylesheets dynamically. Has a cookie option which remembers the current theme your used selected.

How to use it:

1. Upload all the themes into your web servers.

2. Include a stylesheet for the default theme in your document's head sections.

<link rel="stylesheet" id="default-them" href="css/theme1.css">

3. Load jQuery library and the jQuery style switcher plugin in the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jQuery.style.switcher.js"></script>

4. Create a list of links to switch the themes. You can hover over the links to preview and then click on the style you like best. data-theme="theme2" means that replaces the default theme (theme1.css) with alternative theme (theme2.css) as you click on the 'Theme 2' link.

<ul id="style-switcher">
  <li> <a href="javascript: void(0)" data-theme="theme1">Default Theme</a> </li>
  <li> <a href="javascript: void(0)" data-theme="theme2">Theme 2</a> </li>
  <li> <a href="javascript: void(0)" data-theme="theme3">Theme 3</a> </li>
</ul>

4. Initialize the plugin.

$('#style-switcher').styleSwitcher();

5. Default settings to customize the style switcher.

hasPreview: true, // preview themes on hover
defaultThemeId: 'jssDefault', // ID for the default theme
fullPath: 'css/', // path to your custom themes
cookie: { // remember the user selected theme
  expires: 30,
  isManagingLoad: true
}

Change log:

2015-06-06

• set cookie path

---

This awesome jQuery plugin is developed by camsjams. For more Advanced Usages, please check the demo page or visit the official website.