Skins in AlloyEditor are a very powerful feature that allows you to seamlessly integrate the editor inside your app.
AlloyEditor skins are organized according to these principles:Variables
Style values are parameterized as much as possible. This allows skins to fully extend others just by changing a small set of variable values.Components
A skin is created by combining one or more components together. Different skins may use different components, so irrelevant styling can be easily stripped out.Structure vs Skin
Styling is separated into structure and skin. Structure represents everything that affects the sizing and position of the elements, while skin represents all the purely cosmetic changes.
You can use these skins out of the box:Ocean (default)
<link href="alloy-editor/assets/alloy-editor-atlas-min.css" rel="stylesheet">
<link href="alloy-editor/assets/alloy-editor-moono-min.css" rel="stylesheet">