A skin is a group of elements designed to compliment each other. A theme can contain multiple skins. You can quickly change the appearance of your domain by applying a different skin. The default skins that come with a theme cannot be changed. Instead you can copy the default skins and then make any required changes.
To activate a theme skin:
Log in to Site Management Tools. Esc key in site to get login.
Click Settings and then Themes.
From the Customized Theme Skins list, click the Ellipsis beside the skin you want to make active.
Select Set to Active.
In the confirmation popup, click Yes.
Expose Sass Variables for Customization:
Open the Sass file containing the variable you want to expose.
Create an inline comment (//) or a block comment (/* … */) immediately following the variable declaration.
Use the editable() function within your comment tags to declare the variable as editable.
type – declares the variable type. This property is required.Possible values include: color & string
color – displays a color picker in SMT.
string – declares a value as a string (font-weight, font-style, thumbnail size, etc.).
label – provides a formatted string to reference the variable in the SMT user interface.
$sc-primary-color: red; // editable({"type": "color", "label": "Primary Color"})$sc-primary-color: red; /* editable({
"type": "color",
"label": "Primary Color",
"description": "Used mainly for 'call to action' elements."
})*/Skin creation:
In the fetched theme in the theme folder there will be a folder named Skins. In that folder we can create our own skin JSON files. Add the variable to the skin.
{
"$sc-color-header-color": "#339b10"
}Add the variable to the colors.scss and to make it editable add the type and label as shown in the image.
$sc-color-header-color: #339b10; /* editable({"type": "color", "label": "Color"}) */To change the color of the header menu links , added the new variable to the color. in the scss file of the particular id.here -header-menu.scss file.
color: $sc-color-header-color;After this deploy the theme.