Theme Look and Feel Configuration in Liferay 7

look-and-feel-color-schemes.xml

<!-- In the file named liferay-look-and-feel.xml 
    inside a theme we can define different color schemes -->

<look-and-feel>
    <compatibility>
        <version>7.0.0+</version>
    </compatibility>
    <theme id="theme-generator-test" name="Theme Generator Test">
        <template-extension>ftl</template-extension>
        <color-scheme id="01" name="Monocrome">
            <css-class>monocrome</css-class>
            <color-scheme-images-path>
                ${images-path}/cs/${css-class}
            </color-scheme-images-path>
        </color-scheme>
        <color-scheme id="02" name="Regular">
            <css-class>regular</css-class>
            <default-cs>true</default-cs>
        </color-scheme>
    </theme>
</look-and-feel>

<!-- With that color schemes defined we can then construct the css having in mind that 
    .monocrome will be applied to body if this color scheme is selected for the theme -->

<!-- SCSS syntax
.monocrome {
    .portlet-body {
        h2 {
            color: #333;
        }
        p {
            color: #555;
            background: #FFF;
        }
    }
}
-->

<!-- The tag 'color-scheme-images-path' only has to go in one of the schemes, 
    and should refer to a folder where the images are stored for that color scheme 
    the images for the scheme Monochrome should go in src/images/cs/monocrome
    and those related to Regular in src/images/cs/regular -->

<!-- Color Schemes can have each a different thumbnail, just put the thumbnail.png file 
    inside its folder, and remember to make it 150px x 120px (width x height) --> 

look-and-feel-portlet-decorators.xml

<!-- In the file named liferay-look-and-feel.xml we can define any number of portlet decorators
    that can be selected afterwards to apply css classes to a portlet without any code needs -->

<look-and-feel>
    <compatibility>
        <version>7.0.0+</version>
    </compatibility>
    <theme id="theme-generator-test" name="Theme Generator Test">
        <template-extension>ftl</template-extension>
        <portlet-decorator id="decorate" name="Decorate">
            <default-portlet-decorator>true</default-portlet-decorator>
            <portlet-decorator-css-class>portlet-decorate</portlet-decorator-css-class>
        </portlet-decorator>
        <portlet-decorator id="borderless" name="Borderless">
            <portlet-decorator-css-class>portlet-borderless</portlet-decorator-css-class>
        </portlet-decorator>
        <portlet-decorator id="barebone" name="Barebone">
            <portlet-decorator-css-class>portlet-barebone</portlet-decorator-css-class>
        </portlet-decorator>
    </theme>
</look-and-feel>

<!-- After that we just need to define those styles in the theme css/scss and good to go 

.portlet-decorate {
    border: 1px solid gray;
    border-radius: 4px;
    margin: 10px;
    padding: 10px;
    background: lightgray;
    
    h2.portlet-title {
        display: inline-block;
        font-size: 20pt;
        font-weight: bold;
        border-bottom: 4pt solid gray;
        padding-left: 20px;
    }
}

.portlet-borderless {
    margin: 10px;
    background: lightgray;
    
    h2.portlet-title {
        display: inline-block;
        font-size: 20pt;
    }
}

.portlet-barebone {
    margin: 0;
    padding: 0;
    
    h2.portlet-title {
        display: none;
    }
}
-->

look-and-feel-settings.xml

<!-- In the file named liferay-look-and-feel.xml we have to
    add the definition of the setting like follows -->

<look-and-feel>
    <compatibility>
        <version>7.0.0+</version>
    </compatibility>
    <theme id="theme-generator-test" name="Theme Generator Test">
        <template-extension>ftl</template-extension>
        <settings>
            <setting key="welcome-message" value="Hi there!" />
            <setting configurable="true" key="main-color" options="#666,#555,#444,#333" value="#333" />
            <setting configurable="true" key="use-wide-menus" type="checkbox" value="true" />
        </settings>
    </theme>
</look-and-feel>

<!-- Three settings have been defined here, for each theme:
welcome-message is a text message, non configurable by the liferay administrators of the site.
main-color is a text option field, configurable by the administrator.
use-wide-menus is a checkbox field, configurable. -->

<!-- After creating those settings in a theme we can 
    access the setted value (default or configured by admin) throught themeDisplay

${themeDisplay.getThemeSetting('welcome-message')}

<body style="background: ${themeDisplay.getThemeSetting('main-color')}">

<#if themeDisplay.getThemeSetting('use-wide-menus') == "true">

-->

look-and-feel-themes.xml

<!-- In the file named liferay-look-and-feel.xml 
    more than just one theme can be defined -->

<look-and-feel>
    <compatibility>
        <version>7.0.0+</version>
    </compatibility>
    <theme id="theme-generator-test" name="Theme Generator Test">
        <template-extension>ftl</template-extension>
        <settings>
            <setting key="welcome-message" value="Hi there!" />
        </settings>
    </theme>
    <theme id="lighter-theme-generator-test" name="Configurable Theme Generator Test">
        <template-extension>ftl</template-extension>
        <settings>
            <setting configurable="true" key="welcome-message" value="Hi!" />
            <setting configurable="true" key="login-system" options="password,cert,pub_key" value="password" />
        </settings>
    </theme>
</look-and-feel>

<!--
That way wa new theme can be defined with variations due to configuration, 
like importing a different template depending on a config flag
or changing links/messages/colors, also the settings set may be different, 
all without the need of copying it and deploying under a new name.
-->