Theme/Stylesheet Switcher With jQuery And Local Storage - styleSwitcher

An easy-to-use jQuery based stylesheet/theme switcher that allows the user to select an alternate stylesheet from a dropdown based theme picker and remembers the user selection using HTML5 local storage.

The plugin enables the visitors to quickly switch the themes of your webpage according to their preferences.

It automatically stores the current stylesheet in the session storage and retrieves the stylesheet value on next visit (page refresh).

How to use it:

1. Create alternative stylesheets and place the CSS files in the css\customstyles folder.

customstyle1.css
customstyle2.css
customstyle3.css
...

2. Create the theme picker from a normal dropdown list.

<select name="themepick" id="themepick">
  <option value="defaultstyles" selected>DEFAULT Theme</option>
  <option value="customstyle1">PETER RIVER Theme</option>
  <option value="customstyle2">TURQUOISE Theme</option>
  <option value="customstyle3">WISTERIA Theme</option>
</select>

3. Include jQuery library (slim build) and the styleSwitcher.js at the bottom of the webpage.

<script src="/path/to/cdn/jquery.slim.min.js"</script>
<script src="/path/to/js/styleSwitcher.js"></script>

4. Initialize the stylesheet switcher on document ready.

$(document).ready(function(){
  $('#themepick').styleSwitcher();
})

5. Change the default stylesheet folder & prefix.

$('#themepick').styleSwitcher({
  path: "css/customstyles/",
  prefix: "custom"
});

6. Customize the selector of the theme picker.

$('#themepick').styleSwitcher({
  inputType: "select"
});

7. Decide whether to save the user selection on the client side.

$('#themepick').styleSwitcher({
  session: true
});

Changelog:

2020-06-10

• Small adjustments

2020-05-26

• Added button support + code cleanup

2018-10-14

• Fixed default radio selection bug

---

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