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.
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 --> <script> var openskin = "appName"; // Set app name var openskinDefault = "https://shuga.co/openskinDefault.json"; // Set default skin URL var openskinDLProxy = "https://php.eclipseemu.me/dl/dl.php?dl="; // Set proxy URL. Can be blank. </script> <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
https://shuga.co/openskinDefault.json 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.
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.
Vulnerabilities (i.e. XSS)
Please contact HeyItsShuga immediately.
Please use the Issues tab to report any bugs that don't compromise security.