The Skin Preset File

To create a skin, you need to build a JSON preset file. The JSON preset file contains the variables that you want your skin to change. Each variable listed in the preset file includes the new value to use when the skin is applied.

To create a skin preset file:

Expose all Sass variables you want your skin to override. See Expose Sass Variables for Customization for instructions.

Go to your theme’s Skins directory.

The Skins directory is located in your theme development directory. For example:

                <Top-LevelDevelopmentDirectory>/
      Workspace/
         <Theme_Directory>/
            Skins/

Create a new JSON file.

Name the file in an intuitive manner. Do not include spaces or special characters.

For example:

../Workspace/<Theme_Directory>/Skins/winter_skin.json

Open the JSON file, define the Sass variables you want your skin to change, and include the values your skin changes.

For example, your winter skin might look like the following:

                {
   "$sc-color-body-background": "white"
,   "$sc-button-primary-text-color": "white"
,   "$sc-button-primary-hover-text-color": "white"
,   "$sc-button-primary-active-text-color": "white"
,   "$sc-button-primary-text-transform": "none"
,   "$sc-button-secondary-text-color": "white"
,   "$sc-button-secondary-hover-text-color": "white"
,   "$sc-button-secondary-active-text-color": "white"
,   "$sc-button-secondary-text-transform": "none"
,   "$sc-button-tertiary-hover-text-color": "white"
,   "$sc-button-tertiary-active-text-color": "white"
,   "$sc-button-tertiary-text-transform": "none"
,   "$sc-button-large-line-height": "1"
,   "$sc-button-large-letter-spacing": "1px"
,   "$sc-button-large-mobile-width": "100%"
,   "$sc-button-large-desktop-width": "auto"
,   "$sc-button-medium-line-height": "1"
,   "$sc-button-medium-letter-spacing": "0.5px"
,   "$sc-button-medium-mobile-width": "100%"
,   "$sc-button-medium-desktop-width": "auto"
,   "$sc-button-small-line-height": "1"
,   "$sc-button-small-letter-spacing": "normal"
,   "$sc-button-small-mobile-width": "auto"
,   "$sc-button-small-desktop-width": "auto"
,   "$sc-body-line-height": "1.6"
,   "$sc-h1-line-height": "1.2"
,   "$sc-h2-line-height": "1.2"
,   "$sc-h3-letter-spacing": "0"
,   "$sc-h4-line-height": "1.4"
,   "$sc-h5-line-height": "1.4"
,   "$sc-h6-line-height": "1.4"
,   "$sc-blockquote-line-height": "1.6"
,   "$sc-color-primary": "#e23200"
,   "$sc-color-secondary": "#15607b"
,   "$sc-neutral-shade": "#4D5256"
,   "$sc-color-theme": "#97CCDF"
,   "$sc-color-link": "#0067b9"
,   "$sc-color-link-active": "#0067b9"
}

Important:

When creating a skin preset file, include only variables that are exposed for editing within your theme’s Sass files. If you include a variable that is not exposed, that value does not change when the skin is applied to the theme. See Expose Sass Variables for Customization.

Save the JSON file.
Include your new skin in the extension manifest file. See Add a Skin to the Theme Manifest.

To create a skin preset file:

Related Topics