‘Skins’ is a unique concept, and you’ll likely see them referenced when you’re using Uncode. In short, ‘Skins’ are some set of settings you can use to adjust the color of key features such as texts, headings or logo, concerning the color of your sections’ backgrounds to grant optimal contrast:

• Light Skin: in the absence of modifications, this refers to dark text on a light background.
• Dark Skin: in the absence of modifications, this refers to light text on a dark background.

▶  

How to define and use Skins

To define your Skins, navigate to Theme Options → Customize → Light or Dark Skin. Select each skin to access its options: you can control the color options for Logo Color, Menu Text Color, Primary and Secondary Menu Background, Headings Color, Content Text Color and Content Background Color, screenshot.
You can also set the default skins for your content, Menu, and Footer in the Theme Options, by clicking on each relevant area and choosing your desired skin from the drop-down menu, screenshot.
This enables you to set different skins for the various areas of your site. That way, you can define two completely different Skins for your website (you probably have on your site light sections alternated with other with dark colors).

How to use Skins with the Page Builder

In addition to the global theme settings, you can apply skins to specific columns using Uncode’s Page Builder. To do so, open the Column Setting → Style tab. The first drop-down menu there controls the column’s skin. You can select Inherit to maintain the global skin settings specified in the Theme Options, or choose the Light or Dark Skin options to apply one or the other. This function enables you to apply your skins to specific columns, screenshot.

If you need to create a column with a dark background (consider the case of a section with text and a background image), you need the text and elements to be in contrast. Thanks to the Skins you need to change just a setting and all elements inside this column will have an optimal contrast. This method is advantageous because you don’t have to change every internal element manually.

How to use Skins to define Menu and Logo Coloration

To independently set a Skin for your Menu, you can adjust the Skin settings for your site’s header. This can be done either via the Theme Options or by using a Content Block. If you’ve set your Menu’s opacity to transparent or semi-transparent in the Theme Options as described above, your Menu automatically detects your header’s skin. The Menu Skin then adjusts automatically, to create the maximum possible contrast. To learn more please refer to the dedicated documentation: Menu Skins Coloration.

The Posts and Media Gallery Exception

The Posts and Media Gallery modules offer independent Skins control. If you add one of these modules to a page, you can modify its Skin options by opening the Posts or Media Gallery → Blocks tab, screenshot.
There you can adjust the background color and text Skin independently. This gives the possibility so that you can use thumbnails with different and independent skins related to the Skin of the container column.