Theme/Stylesheet Switcher With jQuery And Local Storage - styleSwitcher

File Size: 21.6 KB
Views Total: 3837
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


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>

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.


5. Change the default stylesheet folder & prefix.

  path: "css/customstyles/",
  prefix: "custom"

6. Customize the selector of the theme picker.

  inputType: "select"

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

  session: true



  • Small adjustments


  • Added button support + code cleanup


  • 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.