Skip to content
A helper script for OpenSkinJS.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

OpenSkinHelper for Framework7

OpenSkin: The Flexible and Open Skin Format


OpenSkin is a proposed file format based off of the JSON syntax that will (try to) make a standardized format for application theming. It is based off of the skin format of web-based GameBoy Advance emulator iGBA (now Eclipse), but expanded to be used for non-emulators and to enrich the capabilities of their theming system, as it was quite limited in its standard state.

The Library

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.

Please note that OpenSkinHelper is currently beta software and might have some bugs. It should be mostly stable, though.


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.

OpenSkinJS Documentation

Please check out the main GitHub for proper documentation and APIs.


Opening the Skin Viewer

OpenSkinHelper.popup(): Brings up the OpenSkinHelper GUI for the user. This is all that needs to be called for most implementations.

OpenSkinHelper.apply(url): Applies the current skin and allows it to be loaded on app start.

OpenSkinHelper.addPopup(): Displays a dialog box to add a new skin.

OpenSkinHelper.add(url): Add a skin to the skin list.

OpenSkinHelper.remove(url): Removes a skin to the skin list.

OpenSkinHelper.list(): Gets the current skin list.

Reporting Bugs

Vulnerabilities (i.e. XSS)

Please contact HeyItsShuga immediately.

Everything Else

Please use the Issues tab to report any bugs that don't compromise security.

You can’t perform that action at this time.