AlloyEditor bundles a couple of gorgeous skins that you can use out of the box. However, if you would like to have a skin that reflects your app's look and feel, you can create your own skin.
Create skin folders
Create a new directory under src/ui/react/assets/icons/ with the name of your skin (e.g zebra). This directory will contain all the required icons for your skin.
Create a new directory under src/ui/react/assets/sass/skin with the name of your skin (e.g zebra). This directory will contain the styling for the skin.
Note: You can use our Skin Architecture to simplify the process of creating your own skin!
Create your skin
Place the icons for your skin inside your skin's svg folder. The icons placed in this folder are combined with the existing icons to generate your skin's icon font.
Create a main.scss file inside your skin folder. Add the styles to this file to create the overall look and feel for your skin.
Build the editor
Follow the instructions in our How to build it guide to learn how to modify and build AlloyEditor. Your skin is automatically read when you build AlloyEditor:
gulp [build]Use your skin
Add your skin's CSS file to the page. This overrides the default skins:
<link href="alloy-editor/assets/alloy-editor-zebra-min.css" rel="stylesheet">There you have it. AlloyEditor has a new beautiful look and feel!
