Skins

Skins

Skins

The skins array is automatically populated when you run either the gulp theme:local or gulp theme:deploy commands. This array defines an object for each new skin preset file located in the Skins directory when you run these commands. Each skin object includes the following properties:

• name - declares the name of the skin as it appears in SMT. As a default, this value equals the file name.

• file - declares the name and location of the skin preset file. This name must match the name of the file in the Skins directory.

If necessary, you can edit the manifest.json file to provide a more visually appealing value for the name property.

Example

You want to provide four selectable skins for a theme, each with a different color scheme to correspond with the different seasons: winter, spring, summer, and fall. You create four individual skin preset files in your theme's Skins directory: winter_skin.json, spring_skin.json, summer_skin.json, and fall_skin.json.

You use the theme developer tools to run the theme gulp:local command. The developer tools automatically edit your theme's manifest.json file to include these skins:

1//...
2,   'skins': [
3      {
4         'name': 'winter_skin'
5      ,   'file': 'Skins/winter_skin.json'
6      }
7   ,   {
8         'name': 'spring_skin'
9      ,   'file': 'Skins/spring_skin.json'
10      }   
11   ,   {
12         'name': 'summer_skin'
13      ,   'file': 'Skins/summer_skin.json'
14      }   
15   ,   {
16         'name': 'fall_skin'
17      ,   'file': 'Skins/fall_skin.json'
18      }      
19]
20//...

Later, you decide that you want the SMT Theme Skin Manager to display different names for each skin. You open the manifest.json file and make the following edits to each skin object's name property:

1//...
2,   'skins': [
3      {
4         'name': 'Winter Color Scheme'
5      ,   'file': 'Skins/winter_skin.json'
6      }
7   ,   {
8         'name': 'Spring Color Scheme'
9      ,   'file': 'Skins/spring_skin.json'
10      }   
11   ,   {
12         'name': 'Summer Color Scheme'
13      ,   'file': 'Skins/summer_skin.json'
14      }   
15   ,   {
16         'name': 'Fall Color Scheme'
17      ,   'file': 'Skins/fall_skin.json'
18      }      
19]
20//...