OpenSkinHelper (for Framework7)

Making OpenSkinJS even easier to implement

Developed by Shuga.


OpenSkinHelper is a helper script for OpenSkinJS that will make it easier to implement in your app. It has all the code needed for implementing skins in your app in minutes.

This version of OpenSkinHelper is designed to work with Framework7 versions 2.0.0 and above without the use of frameworks like Vue or React.


To set up OpenSkin and OpenSkinHelper in your project, add the following towards the end of the page (to reduce page load time):

<!-- OpenSkin -->
  var openskin = "appName"; // Set app name
  var openskinDefault = ""; // Set default skin URL
  var openskinDLProxy = ""; // Set proxy URL. Can be blank.
<script src="js/openskin.js"></script>
<script src="js/openskinHelper.js"></script>
<!-- /OpenSkin -->

Make sure to replace appName with your web app's name, and with a new default skin URL (if you wish). This is used for skin developers to fine-tune their skins for your site (if needed), and for setting the default skin in the skin picker.

Opening the Skin Viewer

Brings up the OpenSkinHelper GUI for the user:


This is all that needs to be called for most implementations

Set Launch Skin

Apply the current skin and allows it to be loaded on app start:


Catalog Manipulation

Add a skin to the skin list:


Remove a skin to the skin list:


Get a list of all the skins stored:


Internal Methods

Display a dialog box to add a new skin:


In nearly all use cases, this method should not be used directly.