...
In this guide we will go over on how to create a skin for your template and use Material template template as an example.
In source code of Material template, we begin with theme.json. We notice that there is a new variable skin in vars section.
...
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
{
"id": "material",
"name": "Material",
"version": "4.7.0",.
"vars": {
"skin": { // Define a skin section in Theme Management
"title": "Skins", // Define the title for skin section
"value": "default",
"options": [ // Define the options (color skins) for your template
{
"value": "default", // Define the skin set - The value here has to be unique
"label": "Default", // Define the name of the skin set
"primary": "#2681D5" // Define the primary color of the skin set
},
// Below are other skin sets with the same settings to Default skin
{
"value": "deep_red",
"label": "Deep Red",
"primary": "#ac1a2f"
},
{
"value": "deep_purple",
"label": "Deep Purple",
"primary": "#5a2d81"
},
{
"value": "celtics",
"label": "Celtics",
"primary": "#2eff85"
}
],
"type": "skin",
"id": "",
"attr": ""
},
... |
...
You can select your preferred skin color set from the drop down here to preview the changes. Here we select Deep Red as example for instance.
Select on Publish to apply the color skin set to your site.
...